-
Posts
-
Trying to configure the Portfolio masonry thumbnail images to be 16:9 ratio. I’ve got images that are 1280 x 720 pixels but the masonry outputted thumbnails are cropped vertically. How does one go about maintaining the 16:9 ratio where no part of the image will be cropped or distorted?
Link to screenshot of the settings I have for the Masonry section: https://ibb.co/0926jSd
Link to screenshot of Portfolio page with cropped thumbnails and one sample 16:9 image I overlaid in Photoshop for reference purposes: https://ibb.co/10MwqDZ
UPDATE JANUARY 28, 2020
I tried changing the Masonry settings from Perfect Grid to Flexible Masonry and noticed that the thumbnails were now displaying correctly with the 16:9 ratio and no cropping.
However, now when a new featured image is uploaded to a Portfolio item, the outputted masonry thumbnail image is shrunk down by about 85%. The previously uploaded featured images from older Portfolio items remain the correct size and consistency.
Screenshot for reference purposes here: https://ibb.co/TWJ2hfh
Any help would be much appreciated.
UPDATE JANUARY 29, 2020
I figured out the reason why the previously uploaded featured images from older Portfolio items maintained their correct size of 1920×1080 while the latest ones were being re-sized upon upload to 705×397. I had installed the Simple Image Sizes plugin and changed the masonry size settings in the plugin to 1920×1080, but then after a little testing, I removed the plugin. After removing the plugin newly uploaded images were being re-sized to 705×397.
Screenshot of the plugin settings and changes I made for masonry size: https://ibb.co/XZwW1MQ
I’d prefer not to use a plugin for this goal of making sure all uploaded masonry images (portfolio featured images) are maintained at 1920×1080 dimensions upon upload. Isn’t there a way to add some code to my child theme’s functions.php file to accomplish targeting just the masonry image size?
Hi killyman,
Please have a look at the following thread:
https://kriesi.at/support/topic/image-sizes-and-scaling/#post-276214If you need further assistance please let us know.
Best regards,
VictoriaThanks Victoria.
So, in my child theme’s functions.php file, would I just add the following line of code with my preferred width and height dimensions?
$avia_config['imgSize']['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); // images for fullscreen masonryWould I then be able to remove the Simple Image Sizes plugin?
Hi killyman,
You would need to use avf_modify_thumb_size to override it in the child theme, so use this code:
function enfold_customization_modify_thumb_size( $size ) { $size['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); // images for fullscreen masonry return $size; } add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );Then you can remove Simple Image Sizes plugin.
Best regards,
NikkoThanks Nikko. It seems to be working great.
One more question. How do we make, via CSS, the last portfolio thumbnail image in a 2 or multi-column layout align left instead of right? See this screenshot for reference: https://ibb.co/Hr4fDcz
Thanks!
Hi killyman,
You would need to upload a similar image dimension for it to move to the left.
Reptopia image is a bit longer (not similar aspect ratio) with other images, it’s current size is 1136 (width) x 640 (height) px.
Try to crop it using an image editor and make it 1136 x 639px.
Let us know if this helps.Best regards,
NikkoHey Nikko. I thought all our portfolio featured images had been uploaded with 1920 x 1080 dimensions. After reviewing your response, I realized we uploaded the wrong dimensions for the Reptopia image. I just replaced it with a version with 1920 x 1080 dimensions and now the last portfolio thumbnail is aligning left as desired.
Thanks so much for catching this oversight on our part.
Hi,
Great, I’m glad that Nikko could find the problem for you and thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHi Richard. I just have one last question.
If I wanted to modify the default dimensions of the blog post featured image, would I just add and modify the following lines of code to the existing avf_modify_thumb_size code in the child theme’s functions file?
$avia_config['imgSize']['entry_with_sidebar'] = array('width'=>710, 'height'=>270); // big images for blog and page entries $avia_config['imgSize']['entry_without_sidebar']= array('width'=>1030, 'height'=>360 ); // images for fullsize pages and fullsize sliderThanks!
Hi killyman,
Yes, so the code would look like this:
function enfold_customization_modify_thumb_size( $size ) { $size['masonry'] = array('width'=>705, 'height'=>705 , 'crop' => false); // images for fullscreen masonry $size['entry_with_sidebar'] = array('width'=>710, 'height'=>270); // big images for blog and page entries $size['entry_without_sidebar']= array('width'=>1030, 'height'=>360 ); // images for fullsize pages and fullsize slider return $size; } add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );One thing also to keep in mind is that this works only for images that is uploaded after this code is added, for older photos you will need to regenerate the images.
Best regards,
NikkoGreat. Yes, I understand about needing to regenerate previously uploaded images once this change has been implemented.
Thanks!
- You must be logged in to reply to this topic.