Adding image title to thumbnails in album view

I would like to add a title to each of the thumbnails on the album view page. I know this information is given on 'mouse over' but I would like the title to be displayed if possible.

I have added <?php printImageTitle(); ?> on line 67 in album.php and it has done what I wanted.

However as you would expect, it has 'messed up' the layout and the title is showing above the 'next' thumbnail and not under the correct one.

I am not sure how to alter 'style.css' to 'tidy up' the album view layout. Ideally,I would like to have the image title in a 'text box' which is the width of the thumbnail with a maximum 3 line depth, for the text.

Can anybody suggest how I can alter style.css to achieve this?

I have left my alteration to album.php in place so you can see the result and you can still access my site using - test-user & test123.

Comments

  • acrylian Administrator
    Sorry, no easy fix. By adding the title you get different heights on the thumb boxes as the titles surely differ in length. That in turn causes issues with the float layout.

    You probably would have to clear the float on the last item in the row so it still works. So you have to count the thumb entries.

    Another way would be to create those titles as overlay over the thumbs iteself. Use absolute positioning of the title within the thumb box elements.
  • Removing -
    "width: 650px;" from line 421 and "float: left;" from line 445 in style.css brings things closer to what I would like, but now I only have 1 thumb per line.

    The length of the 'Title' text now determines the width of the thumb's 'footprint' so now I need to find a way to make the text 'wrap' at a given width.
  • acrylian Administrator
    Yes, that is what happens if you do that ;-)

    A float based layout with different heights does not work.Again, you have to count the entries in the loop for the last one in the row (normally number 5), add a float clear, so the next row can start freshly. That for every row. That theme layout was not done for this.

    There are other ways for getting such layouts in modern browsers at least but that takes it too far here.
  • I have cancelled all the changes I had made and reverted to my original layout. I will return to this when I have more time.

    Thanks for the help so far. :)
  • acrylian Administrator
    Sorry that I cannot help in detail. But it is always the same, all these things take at least double time of the expected ;-)
Sign In or Register to comment.