[Resolved] Adding data attributes to featured image

[Author]

Posts

[Armando]

Tell us what you are trying to do?
Add data attributes to featured image. Here is the php code:

<?php the_post_thumbnail('post_thumbnail', array("class" =>"portfolio-image", "data-object-fit" =>"cover", "data-object-position" =>"50% 50%") ); ?>

I need to add the data attributes to:

<div>[wpv-post-featured-image]</div>

Thank you!

[Beda]

To our ShortCode you can use these attributes:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

For more attributes, you would need to craft your own HTML and use the ShortCode to return only the raw value (output="url").

The ShortCode features several Attributes you can use, but they are limited to the ones listed on the Document above shared.

[Armando]

Thank you, but using the URL will not give me the native responsive image syntax that you get from the_post_thumbnail. So I made a shortcode:

function category_thumbnails(){
	$the_thumbnail = the_post_thumbnail('post_thumbnail', array("class" =>"portfolio-image", "data-object-fit" =>"cover", "data-object-position" =>"50% 50%") );

	 echo $the_thumbnail;
}

add_shortcode('category_thumb','category_thumbnails');

If I may add a feature request to Views that you can add data attributes to images, a field that might let me enter comma delimited attributes like:

"data-object-fit" =>"cover", "data-object-position" =>"50% 50%"

then it renders it in code.

Thank you!

[Armando]

Hi, while the thumbnail does load correctly on the page, it loads at the top of the loop. My results are:

image
image
image
image
page content

Thanks.

[Armando]

I added responsive code to the img tag. As I stated above, please add data attribute fields to the featured image tag in views. Thank you!