Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Fotobook plugin change size and style of thumbnails WordPress

  • SOLVED

Dear experts,


I'm building this portfolio site for myself and I need some help.
I would like to have all my thumbnail pictures the same width. 4 pictures per row at a width of 215px plus a boarder of 5px around the pictures (that should be 900px in total width). The pictures below this 4 pictures should than again be 5px away from top ones.
So in the end it should be a picture grid.

The photo albums are build with the wordpress plugin fotobook.

And this is the site:

http://kimalbrecht.com/



Thanks you for the help

2011-11-16 by jinges

Answers (3)

2011-11-18

Christianto answers:

Hi,

I hope I'm not too late to answer it. :D

This cannot be done by css, you have to use javascript solution for this.
You can use jQuery plugin mansory http://masonry.desandro.com/

please download zip attachment below

put jquery.mansory.js to directory wp-content/themes/wpfolio/js/

replace style.css with style.css in the .zip (the file to replace is in directory http://kimalbrecht.com/wp-content/plugins/fotobook/styles/colorbox/style.css)

copy this code to your functions.php between php tag..

function mansory_script(){
echo '<script type="text/javascript" charset="utf-8" src="'.get_bloginfo('template_directory').'/js/jquery.mansory.js" ></script>';
}
add_action('wp_head','mansory_script');


I also include working example that I've taken from your site for demo...

Please vote me if it help you..
Thanks

jinges comments:

hi,

wow your example looks very good!
I'm not sure were to put the code in functions.php.
And there is still the problem with the blurry thumbnails that I can't figure out...


Thanks

Christianto comments:

put it at the end of functions.php before closing php..
?>

For the blurry image, you have to provide bigger image that is 215px width but can be any height...

jinges comments:

works perfectly!

I even managed to change the style around to see what looks the best. Very cool!
Is it easy to adapt the same style onto each album?

The thumbnail size is still a problem. It seams to me that facebook creates this thumbnails. I will try around.


Thanks so much I will reward you the money.

2011-11-16

Luis Abarca answers:

OK, add this to your styles.css


.fotobook-grid-album {
float: right;
width: 215px;
padding: 5px;
text-align: center;
}

#fotobook-main img {
border: 5px solid #333;
width: 205px;
}

Luis Abarca comments:

You can also define the height of the blocks or the tiny thumbs float below


.fotobook-grid-album {
float: right;
width: 215px;
height: 330px;
padding: 5px;
text-align: center;
}

#fotobook-main img {
border: 5px solid #333;
width: 205px;
}

jinges comments:

Dear Luis,


thanks for the help. I tried out both codes. Very cool!

I like the first code more than the second one. Until now the distance between the images is still a bit strange in height.
Also the thumbnails are very blurry right now. Do I need to reload the pictures or is there more to it?


Thanks so much.

Luis Abarca comments:

Hi amigo,

The images are very tiny, and when shows tiny images with a bigger size than the original then looks blurry.

You need to upload a bigger version of your photos.

Check this for example.
https://fbcdn-photos-a.akamaihd.net/hphotos-ak-snc6/247069_1986068284281_1020500470_32298648_6771701_s.jpg

You can also play with the width and padding to get the best results.

Let me know if you have any doubt.

Regards!

jinges comments:

Okay, I read through my description and I think I explained my idea of the picture grid to loose. I drew it out for better understanding. The picture row below my first picture row should have the same distance in width and in hight.

With the picture size. I know about the small thumbnails. And I have no clue how that works. I don't know the site from your example. It is something this fotobook plugin is doing.

In the settings of the plugin I changed the thumbnail size to 500px but nothing happens. Reloading the albums from facebook also didn't helped. I looked into the code and tried to put the thumbnail settings manually in but until now noting happens on the site and I'm always a bit unsure if I'm doing the right thing.


I hope that helps for understanding.

Kind regards