-
Posts
-
My client has a basic portfolio website for her photography. We have each photo set as a portfolio item with the photo itself set as the featured image. We’re using the portfolio grid in order to display all of the featured images with the lightbox feature.
We need the grid to display the thumbnails as square, or at least the same size, but instead the thumbnails are all different ratios, leaving a lot of unseemly white spaces around them. Currently it looks like this:
Is there anything we can do to force the thumbnail previews to all be the same size?
Both WordPress and Enfold are up to date as of Jan 27th, 2015.
Hi jaimemerz,
Could you provide us with a link to the site in question so that we can take a closer look please?
Thanks,
RikardHi,
I’m not sure what’s going on there, please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.
Regards,
RikardHey!
The portfolio grid element requires images with the same size and proportion to keep the columns and rows consistent. Since the size and proportions of the images in your gallery are different, you will be better off with the masonry element. I created a test page here: http://rileycreates.com/test/
Regards,
IsmaelWe have to use the portfolio grid element in order to use the Ajax portfolio. Is there any way we can use code to force the portfolio grid images to stay the same size?
Hi!
Yes, but the images will blur and not look good.
Only way is to actually have the images been created before the correct size.Regards,
BasilisHey!
try this code in Quick CSS field:
img.attachment-shop_catalog.size-shop_catalog.wp-post-image { height: 494px; }and adjust as needed.
Cheers!
AndyUnfortunately we’ve discovered that forcing the height causes the images to get stretched at smaller browser sizes. Example below:
Is there a way to counteract this? I’ve tried changing to max-height, but that brings back the original issue, and adding a width or a max-width doesn’t help either.
Hi!
in this case you would need to work with media queries. For example for iPhone screen size use something like this:
@mediy only screen and (max-width: 767px) { img.attachment-shop_catalog.size-shop_catalog.wp-post-image { height: 494px; }}and adjust max-width value for browser screen size and height value for image size. For more information about media queries refer to: css-tricks.com/snippets/css/media-queries-for-standard-devices/
Cheers!
AndyThank you for the code. We tried it but the images are still getting stretched in between the queries. Is there any other solution we can implement?
I believe you still have admin access to the site, if you need it.
Hey!
the don’t get stretched for me anymore, instead they look exactly as on desktop. Please clear browser cache and check on a different device as well.
Cheers!
AndyThey are still getting stretched at some browser sizes. We had to make multiple media queries in order to get them to resize at specified intervals, and I do not want to have to make more to fix this issue. On top of that, some of the images in the portfolio are now positioned too high and are leaving large white spaces beneath them.
Is there a better solution to forcing the portfolio grid to crop all of the images to the same size without stretching the image itself?
We have solved this issue with a work around.
For those with the same problem:
We created preview images of each photo, cropped so they were all the same size (600×600) and then edited each portfolio item so the new preview image was set as the featured image. We then set the portfolio link to “manual” and set it to the url of the original image.
- You must be logged in to reply to this topic.