[Closed] Square image in views

[Author]

Posts

[hollyG]

Tell us what you are trying to do?
I want to make my image show as a square image no matter what size screen I am using (Responsive) i am using Views

Is there a similar example that we can see? We have an example on the site but at the moment the image shows as a rectangle.

What is the link to your site? This is our mockup page to show the view: hidden link

Please let me know if this is possible? What we are trying to do essentially is to only have to make one size image (Instagram size) which we can use universally in many platforms including our website.

the attached pic is what we want the image to look like In the frame. on the mockup you can see that the image is not fitting within the frame and the image is rectangular instead of square. Is there a setting to force it to be Square?

Looking forward to your reply

[Shane]

Hi Holly,

Thank you for getting in touch.

From what I can see your images are already square. See Screenshot

I'm unsure of the exact query since the images are square on desktop and mobile.

Thanks,
Shane

[hollyG]

Hi Shane, I cannot see your screenshot sadly? I will explain what I mean! The pictures even f they look "somewhat square" are cutting off the edges of the actual photo I will attach this visually for you now. I look forward to your reply. I really need it to show the full picture and Cropped to an exact square, please. I hope you can help and you can ee what I am trying to achieve.

[hollyG]

Hi Shane, I am reattaching the screenshot because it is not showing and I want to make sure you can see it . It is in .png. format. Thanks Holly

[Shane]

Hi Holly,

Usually when an image is like this as per your first screenshot it means the image was uploaded at those dimensions.

Cropping an image would mean that you are shaving off the excess outside of a specified dimensions. In your case your images are larger than your crop size so some of the image will get cut off.

In the case of the image here.
https://toolset.com/forums/topic/square-image-in-views/#post-1847709

The image was uploaded with room for cropping.

Thanks,
Shane

[hollyG]

Hi Shane, I am sorry but Im having trouble understanding your reply. Our images are made for Instagram 1080px X 1080px. We upload these same images for our blog and we add them to "Set to Featured Image" in the WordPress post editor. This is what we are dragging in using Views. Can you help me to stop the images from being cropped. It is not our intention to have 'room for cropping' as you mention. in your message. We just simply want our whole image to show properly! Can this be done please? Looking forward to your reply. holly

[Shane]

Hi Holly,

Perhaps if I had a look at how you've set this up on the backend I can understand better?

Would you mind allowing me have a look at the site on the backend specifically the view?

The private fields have been enabled for your next response.

Thanks,
Shane

[hollyG]

This is the bit about the images

<div class="newsblock-image" style="background: url([wpv-post-featured-image size="custom" width="350" output="url"]) center center no-repeat, #FFFFFF; background-position: center;">

[Shane]

Hi Holly,

I would like to look at an example of the original image itself. Based on this markup you should get the full image just at a reduced size.

Would you mind sharing the login credentials so that I can have a look ?

Thanks,
Shane