Announcement

Collapse
No announcement yet.

Is There A Way To Center Album Thumbnails?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Is There A Way To Center Album Thumbnails?

    Is there a way to get the album pages with thumbnails so that the thumbnails are centered on the page no matter how many columns you may have them set to display in or how wide the skin being used?

    If I used fixed-width skins, everything looks nice, but fluid skins leave a large gap down the right side...I like symmetry. Thanks!

  • #2
    That may be possible but it will require a good amount of template modifications to change the structure of the album layout. I don't have exact instructions for you. If you have some HTML ability then you need to look to the album templates.

    Comment


    • #3
      Thanks for the response, Jake.

      I've been fiddling a bit with the album templates. I tried wrapping a DIV with the usual centering CSS tricks around the picturebits elements but that does not work since each thumbnail is its own independent floated table.

      Comment


      • #4
        Jake, I've been puzzling something together which I hope might work. Take a look at the album_picturelist template below. The blue sections in the "after" blocks are what I've added; anything in red in the "before" blocks is what has been removed. Basically starting a table and an initial row before the picturebits and then closing what will be the last table row and closing the table after the picturebits.

        album_picturelist (before)

        Code:
        <tr>
            <td class="alt1" id="picturebits">
                <if condition="$picturebits">
                    $picturebits
                <else />
                    <div align="center">
                    <if condition="$show['add_picture_option']">
                        <a href="album.php?$session[sessionurl]do=addpictures&amp;albumid=$albuminfo[albumid]">$vbphrase[click_here_to_upload_pictures]</a>
                    <else />
                        $vbphrase[this_album_has_no_pictures]
                    </if>
                    </div>
                </if>
            </td>
        </tr>
        album_picturelist (after)

        Code:
        <tr>
            <td class="alt1" id="picturebits">
                <if condition="$picturebits">
                <table style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    $picturebits
                </tr>
                </table>
                <else />
                    <div align="center">
                    <if condition="$show['add_picture_option']">
                        <a href="album.php?$session[sessionurl]do=addpictures&amp;albumid=$albuminfo[albumid]">$vbphrase[click_here_to_upload_pictures]</a>
                    <else />
                        $vbphrase[this_album_has_no_pictures]
                    </if>
                    </div>
                </if>
            </td>
        </tr>
        Then in the album_picturebit template, I've removed the opening and closing TABLE tags as well as the opening and closing TR tags so that picturebit just makes an independent TD cell instead of an independent TABLE for each thumbnail.

        In addition, I've added a conditional at the top of picturebit to test for the value of the $picnum variable which I found in albums.php and which seems to be the way vB tracks how many thumbs go onto a page (based on the max thumbs per page setting in AdminCP). I'm attempting to use that same variable to test for when certain numbers come around and then write a closing </TR> and an opening <TR> to start a new row, another 4 thumbs, break again, and so on until we get back to picturelist and close the final row and the table itself.

        Hopefully, if it works the way I hope it will, I'll end up with an overall table that is centered.

        The only problem is that I don't know the correct syntax for testing the $picnum variable in the way I want. I've fudged an example of what I'm thinking of but I'm sure it is not correct. Could you advise me on the syntax for that line and give me an idea if you think all of this will work? Thanks!

        album_picturebit (before)

        Code:
        <table style="width:{$picturebit_width}px; height:{$picturebit_height}px; margin:5px; float:$stylevar[left]" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="smallfont" align="center" valign="middle">
            <if condition="$picture['thumburl']">
                <a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$picture[pictureid]"><img class="alt2" src="$picture[thumburl]" alt="$picture[caption_preview]" border="0" style="
                    padding:$stylevar[cellpadding]px;
                    <if condition="!$usercss">border:solid $stylevar[cellspacing]px $stylevar[tborder_bgcolor]</if>
                " $picture[dimensions] /></a>
            <else />
                <a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$picture[pictureid]"><if condition="$picture['caption_preview']">$picture[caption_preview]<else />$vbphrase[picture]</if></a>
            </if>
            <if condition="$show['moderation']"><br /><span class="shade">$vbphrase[picture_moderated]</span></if>
            </td>
        </tr>
        </table>
        album_picturebit (after)

        Code:
        <if condition="$picnum == 5 OR $picnum == 9 OR $picnum == 13 OR $picnum == 17 OR $picnum == 21">
        </tr>
        <tr>
        </if>
        
            <td class="smallfont" align="center" valign="middle">
            <if condition="$picture['thumburl']">
                <a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$picture[pictureid]"><img class="alt2" src="$picture[thumburl]" alt="$picture[caption_preview]" border="0" style="
                    padding:$stylevar[cellpadding]px;
                    <if condition="!$usercss">border:solid $stylevar[cellspacing]px $stylevar[tborder_bgcolor]</if>
                " $picture[dimensions] /></a>
            <else />
                <a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$picture[pictureid]"><if condition="$picture['caption_preview']">$picture[caption_preview]<else />$vbphrase[picture]</if></a>
            </if>
            <if condition="$show['moderation']"><br /><span class="shade">$vbphrase[picture_moderated]</span></if>
            </td>
        Last edited by kennn; Mon 12th May '08, 2:11pm.

        Comment


        • #5
          Maybe this is a better attempt?

          Code:
          <if condition="in_array($picnum, array(5,9,13,17,21))">
          </tr>
          <tr>
          </if>

          Comment


          • #6
            I don't believe it but this actually worked on the first attempt using the array condition!

            I had to add this chunk of code in the picturelist template just after the $picturebits variable and before the final </tr></table>...

            Code:
            <if condition="in_array($picnum, array(1,5,9,13,17,21))">
            <td colspan="3">&nbsp;</td>
            </if>
            <if condition="in_array($picnum, array(2,6,10,14,18,22))">
            <td colspan="2">&nbsp;</td>
            </if>
            <if condition="in_array($picnum, array(3,7,11,15,19,23))">
            <td>&nbsp;</td>
            </if>
            That fills out the final row with a colspan'd TD if needed when the final row has only 1, 2 or 3 thumbs. Of course, this is all hard-coded for 4 columns wide and a max thumbs per page value in AdminCP of 24. I'm sure it is very kludgy and I welcome any better way of doing it. Thanks.

            Comment

            Loading...
            Working...
            X