logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$5
simple styling of photo albums.

I'm using a plugin called fotobook, and I want the photo albums to be laid out like a grid currently it's in 1 column. When you click the album name it then shows the pictures in a grid.

url: http://justbgraphic.org/pictures/
user: wpquestions
password: wpquestions

This question has been answered.

kayode brown | 05/15/11 at 11:34am Edit

Previous versions of this question: 05/15/11 at 12:03pm

(1) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    05/15/11
    5:53pm
    Kristin Falkner says:

    That plug-in outputs table-based code so you would need to modify the plug-in itself to do what you're wanting to do and I'd recommend doing so to remove the tables altogether. In wp-content/plug-ins/fotobook/styles/colorbox/main.php, find this:

    <table id="fotobook-main">
    <?php
    if(sizeof($albums) > 0):
    foreach($albums as $album):
    ?>
    <tr>
    <th>
    <a href="<?php echo $album['link'] ?>"><img src="<?php echo $album['thumb'] ?>" alt="<?php echo $album['name'] ?>" /></a>
    </th>
    <td>
    <a href='<?php echo $album['link'] ?>'><?php echo $album['name']; ?></a><br />
    <?php if($album['description'] != ''): echo $album['description'] ?><br /><?php endif; ?>
    <small><?php echo $album['size'] ?> photos</small>
    </td>
    </tr>
    <?php
    endforeach;
    endif;
    ?>
    </table>


    And change it to something like this:

    <div id="fotobook-main">
    <?php
    if(sizeof($albums) > 0):
    foreach($albums as $album):
    ?>
    <div class="fotobook-grid-album">
    <a href="<?php echo $album['link'] ?>"><img src="<?php echo $album['thumb'] ?>" alt="<?php echo $album['name'] ?>" /></a><br />
    <a href='<?php echo $album['link'] ?>'><?php echo $album['name']; ?></a><br />
    <?php if($album['description'] != ''): echo $album['description'] ?><br /><?php endif; ?>
    <small><?php echo $album['size'] ?> photos</small>
    </div>
    <?php
    endforeach;
    endif;
    ?>
    </div>


    And then put:
    .fotobook-grid-album {float:left;}

    In your CSS. You might have to play around with CSS attributes to get it how you want it like add in width or padding or margin to the fotobook-grid-album class.

    • 05/15/11 6:14pm

      kayode brown says:

      Thanks for the reply,

      I changed the code in the main.php as suggested, but I not clear where top lace the
      fotobook-grid-album {float:left;} line? please specify.

      Also I am not good at css coding can you provide the css to make it in a gride and styled very simple. Image at the top and title below the image?

    • 05/15/11 6:19pm

      Kristin Falkner says:

      Put it in the style.css of your theme. I would try something like:

      .fotobook-grid-album {float:left; width: 140px; padding: 10px; text-align:center;}

    • 05/15/11 6:44pm

      kayode brown says:

      Done, and it does seem to be working?

    • 05/15/11 6:53pm

      Kristin Falkner says:

      Sorry, my mistake. The first bit of code I gave you should have been replaced in wp-content/plug-ins/fotobook/styles/embedded/main.php instead of colorbox/ as you're using the embedded style. It's not going to hurt anything in the Colorbox since you changed it. Just make the same change to the embedded/main.php.

    • 05/15/11 7:40pm

      kayode brown says:

      hey bro. its still not working. even with the changes

    • 05/15/11 7:49pm

      Kristin Falkner says:

      Your page is still pulling a table-based version of the gallery so it's just a matter of finding the right place to change it within the plug-in. It's hard to find the exact spot because I didn't install the plug-in so I do not know what style you're using. Whatever style you're using, embedded, colorbox, lightbox, you just need to make sure you change the first code change I gave you in the main.php file of that style. It's definitely not been changed correctly if you're using the embedded or colorbox styles. And I don't mean the code isn't right, I mean, it hasn't been placed right within the plug-in PHP as it's still showing a table-based code and not this new div-based.

    • 05/15/11 7:52pm

      kayode brown says:

      found it. now it just needs to be cleaned up.

    • 05/15/11 7:57pm

      Kristin Falkner says:

      Excellent! Try setting a height in the CSS so if it's a tall image, it doesn't mess it up, I would do something like this:

      .fotobook-grid-album {float:left; width: 140px; height: 220px; padding: 0px 10px; text-align:center;}

      You can play around with the width, height and padding until it works.

    • 05/15/11 8:03pm

      kayode brown says:

      is it possible to take the css for
      http://justbgraphic.org/blog/

      and use it?

    • 05/15/11 8:17pm

      Kristin Falkner says:

      Yes, it can be done. You'd just need to find the style within your stylesheet and apply it appropriately to this. Look at how it's done in the blog template and the CSS that applies to those pieces then do something similar within this new image grid. If you can't figure it out, post another question asking for someone to help you match the style. It's just kind of a lot to ask for $5 after having already helped with the above...

    • 05/15/11 8:58pm

      kayode brown says:

      True enough i can allot more money. how about an additional 5?

    • 05/15/11 9:15pm

      Kristin Falkner says:

      Sorry, no. Your theme's CSS is spread over multiple stylesheets and seems pretty unorganized. It's not just worth an additional $5 to do. To me, anyway. But someone else might feel differently which is why I'm saying you might have better luck separating it out into another question, as your grid problem was solved (I hope you're still messing with the CSS, though, because the alignment still looks messed up when I look at it.) Or maybe another expert will see this and can take it from here re: your CSS questions.

This question has expired.



kayode brown voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.