simple styling of photo albums. WordPress
- SOLVED
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
Answers (1)
Kristin Falkner answers:
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:
<strong>.fotobook-grid-album {float:left;}</strong>
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.
kayode brown comments:
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?
Kristin Falkner comments:
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;}
kayode brown comments:
Done, and it does seem to be working?
Kristin Falkner comments:
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.
kayode brown comments:
hey bro. its still not working. even with the changes
Kristin Falkner comments:
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.
kayode brown comments:
found it. now it just needs to be cleaned up.
Kristin Falkner comments:
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.
kayode brown comments:
is it possible to take the css for
http://justbgraphic.org/blog/
and use it?
Kristin Falkner comments:
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...
kayode brown comments:
True enough i can allot more money. how about an additional 5?
Kristin Falkner comments:
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.