Skip Navigation

[Resolved] cannot apply styling to [wpv-post-featured-image]

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to add a border radius to my featured image, but I cannot see how to add styles to the wpv-post-featured-image shortcode.

Solution: Use the "class" attribute on the wpv-post-featured-image shortcode to insert a custom CSS class, then write your custom CSS for that class in a custom theme file, in the theme customizer's Additional CSS block, or in a View's CSS editor, Content Template's CSS editor, or Layouts CSS.

[wpv-post-featured-image class="my-custom-rounded-class"]
.my-custom-rounded-class {
  border-radius: 15px;
}

Relevant Documentation:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

100% of people find this useful.

This support ticket is created 6 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by rexJ-2 6 years, 3 months ago.

Assisted by: Christian Cox.

Author
Posts
#1080699

I am trying to: use rounded images, css img {
border-radius: 50%;
}

Link to a page where the issue can be seen:

I expected to see: a rounded image

Instead, I got: the standard image

#1080712

I can help you with CSS if you provide a link and describe where I can see the problem on your site.

#1081086

How to show something that is not there?
anyhow: hidden link
there is an image [wpv-post-featured-image] that just show an image and not rounded.
Do i have to make a php script or what?

it must be here toolset View do the coding: how to apply styling to a toolset layout.

<figure class="woocommerce-product-gallery__wrapper">
<div data-thumb="hidden link" class="woocommerce-product-gallery__image">hidden link"><img width="600" height="178" src="hidden link" class="wp-post-image" alt="" title="20-1.png" data-caption="" data-src="hidden link" data-large_image="hidden link" data-large_image_width="735" data-large_image_height="218" srcset="hidden link 600w, hidden link 300w, hidden link 735w" sizes="(max-width: 600px) 100vw, 600px" /></div> </figure>

#1081396

The wpv-post-featured-image shortcode has an attribute "class", which can be used to add a custom CSS class to the featured image element. Then you can add any custom CSS to your site in wp-admin > Appearance > Additional CSS, or if you are using Views or Content Templates, you have the ability to add CSS in the editor's CSS panel. So you can do something like this:

[wpv-post-featured-image class="my-custom-rounded-class"]

Then in the CSS:

.my-custom-rounded-class {
  border-radius: 15px;
}

https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

#1085870

Thanks!