[Resolved] Background Image Size Override

[Author]

Posts

[Line49 Design]

Tell us what you are trying to do?
We use Toolset to manage dynamic content such as grids of real estate listings. Like others, we have noticed that the dynamic background images appearing in these grids cause a performance issue, since they reference the default original image at full size.

We see at the various links provided that this has been a feature request for years but is not available yet.
https://toolset.com/forums/topic/background-image-size
https://toolset.com/forums/topic/background-images
https://toolset.com/forums/topic/serving-custom-size-background-images-to-reduce-page-load-times-and-size-in-grid
https://toolset.com/forums/topic/choosing-image-size-with-toolset-image-block

However, we don't need you to rewrite your software to solve this item.

We simply need a function we can, say, paste into functions.php, which will globally override the default Full size with any other given size, such as Medium.

Can you please provide us with such a function?

What is the link to your site?
hidden link

[Luo Yang]

Hello,

You can setup the Background Image with HTML codes manually, for example:

<div class="wp-block-toolset-blocks-container tb-container" style="background: url([wpv-post-featured-image size="medium" output="url"]) center center no-repeat;background-size: 300px 156px;">
<p>test </p>
</div>

See below sandbox website:
Login URL: hidden link
Frontend result:
hidden link

More helps:
hidden link

[Line49 Design]

Thank you for your quick response!

We are using blocks, I will attach a screen capture, to show the structure of the blocks, the container in question is highlighted. I'm not sure how to use the provided shortcode.
Also we have multiple views very similar with the attached example.
So best for us would be to use a function, which will globally override the default Full size with any other given size, such as Medium.

Thanks again for your help,
Ligia

[Luo Yang]

Unfortunately, there isn't such kind of built-in feature or function within Toolset Blocks plugin, you just need to add two custom HTML blocks, and display the HTML div tag, for example:

<div class="wp-block-toolset-blocks-container tb-container" style="background: url([wpv-post-featured-image size="medium" output="url"]) center center no-repeat;background-size: 300px 156px; width:300px; height:156px;">

</div>

And wrap other contents into above custom HTML blocks, see the sandbox website:
hidden link

Frontend result:
hidden link

[Line49 Design]

My issue is resolved now. Thank you!