I am trying to:
On our websites using Types/Views, we always use background images and assign a size to them. In the last couple of weeks, the way images work are no longer the same. Example- hidden link the staff images used to display centered and proportionate. This is an issue on all of our sites, and the are dozens of sites.
Link to a page where the issue can be seen:
hidden link
I expected to see:
Instead, I got:
Hello,
Please elaborate the questions with more details.
the way images work are no longer the same. ... the staff images used to display centered and proportionate
I assume we are talking about a custom image field created with Types plugin, how do you display the image field in front-end?
If it is Types shortcode, please follow our document to setup your shortcodes:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
example:
<div class="team-member-image" style="background-image: url(/wp-content/uploads/Staff/profile-default.png)" size='thumbnail' title="[wpv-post-title]" alt="[wpv-post-title]"></div>
this used to return an image that was proportionally placed in the containing area but now the images are all over the place. Please advise. We have built dozens of sites and this is now affecting all of them.
This is a better example:
<div class="team-member-image" style="background-image: url([types field='staff-image' size='thumbnail' url='true'][/types])" title="[wpv-post-title]" alt="[wpv-post-title]"></div>
The size='thumbnail' attribute will using crop method to resize your images, same result as you can see in WordPress admin side when you edit a post and upload an image.
I suggest you change your specific the image size(width and height) and add attribute resize='proportional' into image shortcode, for example:
<div class="team-member-image" style="background-image: url([types field='staff-image' width='150' height='150' url='true' resize='proportional'][/types])" title="[wpv-post-title]" alt="[wpv-post-title]"></div>
