Portfolio Greyscale Imagebox issue

10 posts from 4 voices

• Started 4 months ago by foodieq
• Latest reply from Nick
• This topic is not resolved

Tags:

• portfolio imagebox

1. 

   foodieq
   Member

   Hi,
   The greyscale images on my portfolio imagebox are all showing slightly smaller than the color images, and you can see the larger color images underneath them at the bottom. Please help me correct this.
   Thanks,

   Posted 4 months ago #
2. 

   Ismael
   Moderator

   Hi,

   Can you give us a link to your website?

   Try adding this on your custom.css

   #top #main .greyscale-image {
   width: 100%!important;
   height: 100%!important;
   }

   Regards,
   Ismael

   Posted 4 months ago #
3. 

   foodieq
   Member

   http://yuri-suzuki.com/wp/
   I am new to this - where in the .css file should I copy the codes above?
   Thanks,

   Posted 4 months ago #
4. 

   Dude
   Dude

   Hey!

   Please add it to the very bottom of css/custom.css

   Regards,
   Peter

   Posted 4 months ago #
5. 

   foodieq
   Member

   Thanks for your reply. I added the code to the custom.css, but it still doesn't solve the issue. Was i suppose to change a setting to load this custom.css?
   The link to the portfolio is as follow.
   http://yuri-suzuki.com/wp/?page_id=22
   Please help!

   Posted 4 months ago #
6. 

   Nick
   Moderator

   Hi,

   I think the problem is that you changed image sizes but did not regenerate the thumbnails. If you want to keep the cool effect just add this
   

   #top #main .greyscale-image {
   width: 245px !important;
   height: 200px !important;
   }

   But you really need to either install http://wordpress.org/extend/plugins/simple-image-sizes/ plugin, and 'regenerate these specific images. Or just delete the image in Media and upload it again. That should fix the issues.

   Thanks,

   Nick

   Posted 4 months ago #
7. 

   foodieq
   Member

   Hi,
   The above code solved the issue of the small greyscale thumbnail image size. However, the color thumbnails that shows up when pointer hovers over does not match the greyscale image on top (The overall size is now the same, but the color version appears to be rescaled instead of the greyscale one that is cropped). Is there a way to add a code to tell the color thumbnails to crop instead of rescale?

   I also installed the simple-image-sizes plug-in. I believe that I have to set up a new image size to validate here. Could you let me know what "thumbnail-name" I should be using here to specify the crop dimension of the portfolio thumbnails to 245px x 200px?

   Thanks,

   Posted 4 months ago #
8. 

   Nick
   Moderator

   Hi,

   for you to have 245x200px images you will either need to (a) only upload your images in the *same aspect ration* but larger (490 x 400 for example ) (b) upload your images any larger size but *crop your images down* to 245x200 automatically.

   If you want them that size, please open functions.php file and look for lines 27-37. As you can see a large number of images get controlled here including the portfolio ones. I would change portfolio_1, portfolio_2, portfolio_3 and portfolio lines in that block

   to look like this if you do not want to crop (a) option above
   

   $avia_config['imgSize']['portfolio'] = array('width'=>245, 'height'=>9999, 'crop'=>false);

   (b) if you want them cropped to exact size use this code instead (but do not use both)
   

   $avia_config['imgSize']['portfolio'] = array('width'=>245, 'height'=>200, 'crop'=>true);

   Once you -reupload the images with the option for greyscale turned on, you will get 'correct size' overlays. If you change the above without changing the images, you will not see results.

   Thanks,

   Nick

   Posted 4 months ago #
9. 

   foodieq
   Member

   Hi Thanks for your help.

   I would like to pursue option (a) , resize the thumbnail images instead of cropping them. However, does this mean that all my portfolio single entries have be re-sized to match the aspect ratio of 245x200?

   In the Angular Demo Page, I see portfolio entries that are in different aspect ratio (some are 1:1) and the grey scale thumbnails of these entries are working perfectly. How did you achieve this?

   Posted 3 months ago #
10. 

    Nick
    Moderator

    Hi,

    Yes, though match the aspect ratio , not the size. You can change the aspect ratio to whatever you want, however all images in the protfolio should match it, otherwise there will be stretching, blurring or cropping.

    If you look here http://www.kriesi.at/themes/angular/template-files/portfolio-4-columns/ you will see for example the image of the kid with a frozen tongue, the thumbnail is cropped when you compare it to the original image. If you don't mind cropping, then you can use any larger sized images then your settings

    http://wordpress.org/extend/plugins/simple-image-sizes/ <-- please install this plugin. In your Settings > Media , the plugin will display all image sizes from within the theme to give you better control. Just please be aware when you change the sizes, the images already uploaded do not automatically resize. Instead you will either need to re-upload them, or use the regenerate button which is also a part of the plugin.

    Thanks,

    Nick

    Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.