Skip Navigation

[Resolved] Re: You don’t have to do anything for your images to be optimized

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

Problem:

Customize image size of container block background image.

Solution:

There isn't such kind of built-in feature within Toolset Blocks plugin, as a workaround, you can setup the container HTML div tags manually, for example:

https://toolset.com/forums/topic/re-you-dont-have-to-do-anything-for-your-images-to-be-optimized/#post-2060921

Relevant Documentation:

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.

This topic contains 2 replies, has 2 voices.

Last updated by Alexander Rothschild 2 months, 2 weeks ago.

Assigned support staff: Luo Yang.

Author
Posts
#2060895
Screenshot 2021-05-19 112302.jpg
Screenshot 2021-05-19 112153.jpg

Hi there! Congrats on taking on the performance optimizations in the latest releases!

I just ran a Lighthouse report and found that my dynamic grid is loading full size featured images for each item leading to a terrible score.

I'm using a container for each grid item with a dynamic background as shown in your instructional videos. I know that the image is added as a css background property, so your srcset solution is not being applied.

As a workaround, maybe we could add a drop down in the side-bar that lets me select a lower resolution? Or maybe you can suggest something else?

#2060921

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Hello,

You are right, there isn't such kind of built-in feature within Toolset Blocks plugin, as a workaround, you can setup the container HTML div tags manually, for example:
In view's loop, add two shortcodes blocks:
1) The first one:

<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:cover;">

2) The second one:

</div>

Then put all other blocks between above two shortcode blocks

#2061005

Thanks for a creative workaround, Lou.

I guess it would work in a pinch, but we lose all visual representation of the container in gutenberg, not to mention that I have quite a few other Desktop/Tablet/Mobile customizations on the container, that I would have to hardcode-in somehow as well.

This needs a native solution...