[Resolved] Split: Proportional resizing of images

[Author]

Posts

[nicolaS-3]

Hi Luo Yang

I also noticed that images in block views are resized proportionally while they aren't in a traditional view even though the resize parameter is set to proportional
<div style="border-radius: 50%;">[types field='user-image' title='%%TITLE%%' alt='%%ALT%%' align='center' size='medium' resize='proportional'][/types]</div>
Any clue ? Pls compare images in my homepage (not proportional) with images in test page named aaa (proportional)

thanks

[Waqar]

Hi,

The images on the homepage are showing deformed because the "size" attribute is set to bring thumbnails in the "medium" size and the medium size thumbnails are set to have maximum width and height of 300 px, in the media settings ( WP Admin -> Settings -> Media ).

But these images are then processed by the custom CSS code in the "maps source" view and are unnaturally restricted to a width and height of 200px:

.attachment-medium {
  border-radius: 50%;
  width:200px;
  height:200px;
}

The "resize" attribute comes into effect when "width" and" height" attributes are also used.
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#image )

If you'd like the images to show the same as on the page "aaa" page, I'll recommend replacing the existing shortcode:

[types field='user-image' title='%%TITLE%%' alt='%%ALT%%' align='center' size='medium' resize='proportional'][/types]

With:

[types field='user-image' title='%%TITLE%%' alt='%%ALT%%' align='center' size='custom' width='200' height='200' resize='crop' class="attachment-medium"][/types]

regards,
Waqar

[nicolaS-3]

My issue is resolved now. Thank you!