Styling thumbnail photos

Posted on September 17, 2005 at 01:46AM

A few people have been asking about how I style the images in the sidebar and I’ve been lazy in replying. Basically, we just need a list of images and then apply a few css style to it.

For the flickrRSS crowd, go into the options panel and set before image to <li> and after image to </li>. In your sidebar code/template/whatever wrap your flickrRSS function in a list. We also want to add a <div> so we can style the list. It will end up looking something like this:

<div id="flickr">
<ul><?php get_flickrrss(); ?></ul>
</div>

That’s it on the html front. It’s the styling that’s left. There are two essential things that we want to do, remove the bullets and remove the breaks. These two bits of css should take care of that:

#flickr ul { list-style: none; }
#flickr ul li { display: inline; }

Everything beyond that is gravy. Personally, I take all the margins and padding off the list and then style the images with a thing border and a bit of padding. My code looks something along the lines of:

#flickr ul, #flickr ul li { padding: 0; margin: 0; border: 0; }
#flickr a img { border: 1px #ccc solid; padding: 3px; margin: 5px 3px 0px; }
#flickr a:hover img { border: 1px #999 solid; }

That’s pretty much it. You could start doing fancy things like backgrounds, fading the picture on hover, etc. But we’ll leave that as an exercise in Google research. There may be better ways to do it, you’re welcome to comment.

Comments // 17 Responses

  1. I installed the plugin, and put the css code. ok, but the images stay one above other. I want them to appear like yours. My sidebar is 200px width. How i can make them to stay at side with the other? is that possible?

  2. your plugin was working great until i switched to a theme called Blix. i also used your styling and after switching my photos won’t display inline. any idea why?

  3. You’ve got an error in the code above. It’s not getflickrrss() it’s get_flickrrss()

  4. [...] Styling thumbnail photos // eightface (tags: css flickr wordpress plugins ****) [...]

  5. Thanks for the great plugin and tutorial. Like many others i would love to have random photos, but meh, I’ll make do. Thanks alot :)

  6. Thanks! It works well, though I needed to modify the code to always use image caching. I’m not sure why that didn’t work right away.

  7. Does anyone know how to take off the title “flickr” as i would like to add one of my own that matches my k2 theme and has the RSS button aligned too the right…?

  8. omg THANK YOU! i had the plugin but could not get the desired effects THANKS!

  9. Whenever I set up a boarder for flickrrss feed image on my page, it also boarder my rss feed button. Any solution to this problem or fix???

  10. Sorry for the misspelling LOL…

  11. Thanks fro the great plugin!
    I’m using it at my blog and I love it.
    Random make it perfect.

  12. Can i make one image at side with the other? Actually my images are one above other. :(
    My problem seem to be like Roberlan!
    Anyone?

  13. “Actually my images are one above other. :(”

    Don’t add the to the flickrRSS “Options” section in the Wordpress Admin Panel. This will solve your problem :)

  14. #flickr ul, #flickr ul li { padding: 0; margin: 0; border: 0; }
    #flickr a img { border: 1px #ccc solid; padding: 3px; margin: 5px 3px 0px;}
    #flickr a:hover img { border: 1px #999 solid; }

    …

    Where do I put this? I’m not so good w/ the css. Thanks!

  15. Hi,
    I have tried your styling and thought i had it working at one point - that is, the 4 images i was getting from the rss feed were not lining up under each other in a list - now however (after i must have made some changes somewhere:(), i can not seem to get it to work again…Now i seem to be able to style them with a border etc and remove the bullet points so there are no list icons/graphics - but the pics still line up under each other….is there anything obvious i should be checking?

    thanks!!

  16. If you want the photos to show side by side you need to add

    display: inline;

    to the code they have listed above that goes in your stylesheet.

    Like this:

    #flickr ul, #flickr ul li { padding: 0; margin: 0; border: 0; display: inline; }
    #flickr a img { border: 1px #ccc solid; padding: 3px; margin: 5px 3px 0px;}
    #flickr a:hover img { border: 1px #999 solid; }

  17. It works fine except, like Brett Stark says, the thumbnails won’t show up in line. I set it to show 4 images and the top two show up fine but the ones on the bottom aren’t in the same position. Is there any way to fix this? Thanks, and thanks again for this great plugin.