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.

$10
Fotobook plugin change size and style of thumbnails

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

This question has been answered.

jinges | 11/16/11 at 3:13pm Edit

Previous versions of this question: 11/16/11 at 3:16pm

The experts have suggested, on average, a prize of $30 for this question.

(3) 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:
    11/16/11
    3:23pm
    Luis Abarca says:

    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;
    
}

    • 11/16/11 3:25pm

      Luis Abarca says:

      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;
      
}

    • 11/17/11 2:56am

      jinges says:

      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.

    • 11/17/11 7:42am

      Luis Abarca says:

      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!

    • 11/17/11 1:07pm

      jinges says:

      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

      Attached Image

    • 11/17/11 3:42pm

      Luis Abarca says:

      I can help you editing your styles and checking your settings if you raise the award to $20 and send me login details via private message.

  • avatar
    Last edited:
    11/17/11
    1:30am
    ej_emman says:

    Hello jinges,

    just add this to you style.css


    #fotobook-main {
    width: 900px !important;
    }

    .fotobook-grid-album {
    border: 5px solid #fff !important;
    margin-top: 5px !important;
    min-height: 132px !important;
    width: 215px !important;
    }

    tell me if it helps

    • 11/17/11 3:00am

      jinges says:

      Dear emman,

      thanks for the reply. Until now your code isn't changing the size of my pictures somehow.

      Thanks

    • 11/17/11 3:56am

      ej_emman says:

      Hello Jinges,

      Okay replace the code I give you a while ago. I'm sure this works fine.
      I'm glad to help you.

      #fotobook-main {
      width: 900px !important;
      }

      .fotobook-grid-album {
      border: 5px solid #fff !important;
      margin-top: 5px !important;
      min-height:315px !important;
      width: 215px !important;
      }

      .fotobook-grid-album img {
      width: 215px !important;
      margin:0;
      padding:0;
      }

    • 11/17/11 1:17pm

      jinges says:

      hi emman,


      yes this works very good. But it is not jet what I had in mind.
      I drew out a grid to make it a bit more understandable.

      And I have the same problem in this version than in the one from Luis.
      The thumbnail blurriness.
      Same than I wrote to Luis:
      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.


      Thanks a lot.

      Attached Image

  • avatar
    Last edited:
    11/18/11
    1:10pm
    Christianto says:

    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

    attachment image View Attachment

    • 11/18/11 3:37pm

      jinges says:

      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

    • 11/18/11 3:45pm

      Christianto says:

      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...

    • 11/19/11 3:38am

      jinges says:

      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.

This question has expired.



Gabriel Reguly, Luis Abarca, jinges 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.