-
Posts
-
Hi
I came across this old thread from 2015
https://kriesi.at/support/topic/masonry-portfolio-title-underneath-the-images/
but essentially I wish for my masonry grid show perfectly square images and the title shows underneath.Here’s a preview i’d like to achieve where the title doesn’t overlay the image or interfere with the image height.
instead it sits underneath.
https://www.evernote.com/l/AAu5B_Blq7NITbsJS1bAgiuqXOgd-ufA2QkI’m reluctant to make the edits suggested in the 7 year old post, wondering if you can help with a more recent fix?
Hey smudgedesign,
Thank you for your patience, the thread from 2015 that you linked to about the Portfolio Grid doesn’t actually have a solution, the Moderator is pointing out the code block that would need to be edited without advising the specific changes. I found in my test that no change is nessary to achieve what you are looking for if you use the Portfolio Grid.
I created a test page with a Portfolio Grid element and with a square “cropped” image the element shows the image square with the title below:
please note that the image is 349×349 square, with the title it’s 349×403
The key to choosing your images is ensuring that the thumbnails are “cropped”, if you use the Simple Image Sizes plugin you will see which ones are actually cropped square, for example while the “medium” image is 300×300 it is not cropped so it shows as 349×249 if the uploaded image is landscape instead of square, compared to the “woocommerce_thumbnail” which is 300×300 and cropped and produce the square images in the screenshots above.
Now one point, the thread from 2015 that you linked to about the Portfolio Grid, often referred to as the Masonry Portfolio, because it has many of the same features as the Masonry element, so please try the Portfolio Grid element.Best regards,
Mikeyou can see here all css and settings that are needed:
- You must be logged in to reply to this topic.