[Resolved] Srcset sizes generated by Toolset Image Field are not proportional

[Author]

Posts

[Thomas AMX]

Hi guys,

I have an image field which I use to generate automatic post-specific page headers in the GeneratePress theme. It works quite well with Toolset Content Templates.

But I must create scrset sizes of the header image, for performance reasons.

[wpv-post-featured-image size="full"] creates correct srcset markup on its own, but this is not the case with image fields.

So, I followed Nigel's instructions from this thread:
https://toolset.com/forums/topic/image-srcset/

Unfortunately, in practice it doesn't work as expected, because the versions resized by Toolset are not proportional.
For example, my media library size for large is: max-width: 600px, max-height: 400px.

When I insert images into posts normally through the library, or using [wpv-post-featured-image size="full"], the srcset sizes will have the correct aspect ratio. For example size-large for an image with an aspect ratio 16:9 will be 600x338 and not 600x400. It is max-width and max-height, and not exact dimensions.

But it seems that Toolset doesn't respect the aspect ratios and crops to exact dimensions.

Let's say my page headers have an aspect ratio of 4:1. But Toolset will crop the srcset sizes to 3:2 (large will be exactly 600x400 - but it should be 600x150px).

[types field='some-image' size='large' url='true'][/types]
will create a path like this:
./wp-content/uploads/2019/08/some-image-file-wpcf_600x400.jpg

And it is obviously different from the resized versions created by the media library.
And it means the srcset is not usable with Toolset image fields.

If I insert the same image into post through WP Media Library, the srcset sizes will have the correct aspect ratio. So, it seems like a bug in the Toolset image field. The problem doesn't exist for the featured image shortcode, though.

Ideally, there would be an option to insert full srcset markup through the image field (somehow WordPress can do it very well for normal images). But I would be happy if I could at least generate proportional thumbnails, large, medium through the image field...

Cheers,
Tom

[Thomas AMX]

I have just come up with a workaround, but it is not elegant at all: using a WYSIWYG field instead of image field and cleaning up the markup added by WordPress each time, so that only <img> tag remains.

It does generate correct srcset html, but somehow it doesn't feel right to use WYSIWYG to add a single image.... when the purpose of the image field is just that...WYSIWYG feels like a hack in this case... I would very much prefer proportional sizes with the image field 🙂

Cheers,
Tom

[Thomas AMX]

I have discovered that entering something simple like this into the Content Template will make WordPress generate proper srcset markup:

<img class="size-full wp-image-1234" src="[types field='my-image-field' size='full' url='true'][/types]"> 

That's it, but crucial is class="wp-image-1234" and it must be the correct image ID. Taking this part out means there will be no srcset in the page source.

I thought it was easy to get the image ID in Toolset, but apparently it is not... I tried this function:
https://toolset.com/forums/topic/show-image-id/
but it breaks WordPress....

[Thomas AMX]

Guys, I had a real Toolset Sunday and it looks like I have found the solution:
adding resize="proportional" seems to generate correct aspect ratios, so it should be:

[types field='my-image-field' size='large' resize='proportional' url='true'][/types] 768w,

But nevertheless, being able to access image ID would be very useful for other things and I wonder if it's possible to make Shane's function work? Running the shortcode [get_image_id url ="[types field='my-image-field' output='raw' ][/types]"] will produce "This site is experiencing technical difficulties" screen at the URL where it is included.

[Luo Yang]

Hello,

You can modify the PHP codes as below:

function get_image_html( $atts ) {
    // Attributes
	global $wpdb;
    $atts = shortcode_atts(
        array(
            'url' => '',
        ),
        $atts
    );
	$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $atts['url'] )); 
	$res = '<img class="size-full wp-image-' . $attachment[0] . '" src="' . $atts['url'] . '">';
	return $res; 
 
}
add_shortcode( 'get_image_html', 'get_image_html' );

And use above shortcode like this:

[get_image_html url='[types field='my-image-field' size='full' url='true'][/types]']

[Thomas AMX]

Thank you Luo. My problem with wrong aspect ratios is solved now.

But what I meant was getting image IDs of files in the image field. While I was looking for a solution, I found Shane's functions:

https://toolset.com/forums/topic/show-image-id/
and:
https://toolset.com/forums/topic/get-the-image-id-of-the-repeatable-image-fields/

[get_image_id url ="[types field='gallery-1' output='raw' ][/types]"]
[get_image_id id='[wpv-post-id]' field='wpcf-field-name']

When I saw that, I found that possibility very interesting. But unfortunately, using those functions+shortcodes breaks WordPress for me. It's not urgent for me, but I am curious if it's possible to make Shane's functions work, because I may have use for it in the future.

Kind regards,
Tom

[Luo Yang]

Hi Tom,

You can try the solution of another similar thread:
https://toolset.com/forums/topic/file-upload-display-title/#post-1305207

For example:
[show_file_info url="[types field='my-image-field' size='full' url='true'][/types]" info="id"]

For your reference

[Thomas AMX]

Thank you very much Luo. This function is fantastic and it works perfectly, as far as I can tell.
Of course, alt and title options are a great bonus. Very useful.
Thanks a lot.

All the best,
Tom