Not signed in (Sign In)

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

General Support: Thumbnail spacing

Bottom of Page

1 to 9 of 9

  1.  
    • CommentAuthorandrewjs18
    • CommentTimeApr 6th 2009 edited
     
    Anyway to adjust the thumbnail vertical spacing in the albums? I want to move the thumbnails closer together so everything properly fits in my iframes fixed size.

    gallery.ugly-cars.com
    • CommentAuthorandrewjs18
    • CommentTimeApr 21st 2009
     
    anyone? trying to make it so there's almost no space below/above the thumbnails.
    • CommentAuthorsp33d
    • CommentTimeApr 23rd 2009 edited
     
    You'll need to edit /plog-content/themes/default/gallery.css:

    Find:
    .slides li {
    display: block;
    float: left;
    margin: 0 10px 10px 0;
    padding: 0;
    width: 130px;
    height: 185px;
    }

    And decrease the height field to around 100px.

    You'll also need to edit /plog-content/themes/default/album.php:

    Find:
    <div class="tag" style="width: 130px; height: 175px;">

    And change the height value to around 100px as well.
    Thankful People: andrewjs18
    • CommentAuthorandrewjs18
    • CommentTimeApr 23rd 2009
     
    Thanks sp33d. I made the changes in the gallery.css, but I didn't see anything to change in album.php. I see the div you're talking about, but it has a bunch of php after the height/width and I'm a nub to php so I wasn't sure what to do. This is what I see:
    <div class="tag" style="width: <?php echo $div_width; ?>px; height: <?php echo $div_height; ?>px;">

    Please advise.
    •  
      CommentAuthorsidtheduck
    • CommentTimeApr 23rd 2009
     
    andrewjs,

    I'd leave album.php as is since the height and width are determined by the thumbnail size.
    • CommentAuthorandrewjs18
    • CommentTimeApr 23rd 2009
     
    sidtheduck, I'll leave it alone then.

    I am running into a snag where once I changed the thumbnail height to 108, the bottom horizontal line and powered by plogger are basically running through the names of my albums and how many photos are in each album.

    http://www.ugly-cars.com/gallery.html

    I tried adjusting the height to 130px and it pushed it down some, but not enough to be 'normal' again. I can't adjust it anymore than 115px without cutting off the 15 thumbnails per page that'll fit inside my iframe.

    any advice?
    • CommentAuthorsp33d
    • CommentTimeApr 23rd 2009 edited
     
    Sorry for the confusion, I just copied that line out of your source code and not out of the actual album.php file.

    If you need to decrease the spacing more than the css edit allows you would need to find these lines in album.php:

    $div_width = $thumb_width + 30; // account for padding/border width
    $div_height = $thumb_height + 75; // account for padding/border width

    They are used to figure the $div_height and $div_width in the div tag I quoted earlier. Decrease the "30" and "75" as needed.

    The reason for the problem with the "powered by" and the lines is because of the change you made to the css file. By decreasing the height of the element it's not making room for the album title and image count. I didn't think about pointing that out.

    Editing the css value will also cause problems if you have captions on any of your pictures.

    If you don't use captions than you can do the following to correct the collection page:

    In gallery.css add the following:


    ul.collection-slides { /* this is the overall thumbnail container in collection view */
    margin: 0 auto;
    margin-top: 5px;
    margin-left: 15px;
    padding: 0;
    list-style: none;
    line-height: 1.4em;
    }

    .collection-slides li { /* this is the individual thumbnail container in collection view */
    display: block;
    float: left;
    margin: 0 1px 10px 0; /* 2nd number controls the distance between thumbnails */
    padding: 5px;
    width: 130px;
    height: 185px;
    }


    And in collection.php find:
    <ul class="slides">

    And change "slides" to "collection-slides"

    What all of this does is add a new class to your style sheet to handle the collection thumbnails differently from the album thumbnails. This will allow you to change the height of the collection thumbnail element without affecting the album thumbnail element, and vice versa.
    Thankful People: andrewjs18
    • CommentAuthorandrewjs18
    • CommentTimeApr 23rd 2009
     
    thanks man...this worked PERFECTLY....I simply did your css fix and edited the album.php and boom, worked...I just had to remove the code changes to the .slides li for it to work.
    • CommentAuthorsp33d
    • CommentTimeApr 24th 2009 edited
     
    Posted By: andrewjs18thanks man...this worked PERFECTLY....I simply did your css fix and edited the album.php and boom, worked...I just had to remove the code changes to the .slides li for it to work.


    That works too :)

1 to 9 of 9

  1.