[Resolved] Serving custom size background images to reduce page load times and size in grid

[Author]

Posts

[stephenW-4]

I have a grid of 8 posts using the featured image as a background, the background image used is the full size image causing bloated and slow page load time . I would have expected to be able to define the image size here with the ability to use the standard large, medium, thumbnail options.

You can see an example under the My Latest Card Creations at the URL below.
hidden link

Any suggestions on how to make this a bit leaner?

[stephenW-4]

As a work around and following on from my previous message I have created another view but instead of using a background image I have used the image field to allow me to select the correct image size etc. The trouble I'm having with this method is with the layout of the overlapping elements. I want to overlap the image with the title and excerpt fields to create a nice looking layout, but the fields are disappearing beneath the image and there doesn't appear to be a way of controlling the z-index of the elements, I'll try and add a css class to override this but I would have expected a simple layout like this should be achievable via the blocks interface.

hidden link

[stephenW-4]

Setting the image z-index to -1 should work, but I'mm unable to enter negative values in the option box as shown in the image attached

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please tell me which block you are using and to what block you are trying to set the z-index?

Maybe problem URL and access details will help so that I can see the issue in action.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I checked on the following page: hidden link

I see the text is overlapped on the image - is this not the output you want or I misunderstood the issue?

[stephenW-4]

Apologies for not explaining the issue more clearly, yes, the text is overlapping, but this method is unusable because using a background image this way we cannot define which size image to use, it just uses the full size image and css to size it. We should be able to define which version of the image as defined in the media settings. All the information is on the two test pages to see if you study it.

Issue 1: Z indexing of images
issue 2: No control of image size version when defining HTML background image

[Minesh]

If you check the following screenshot: https://toolset.com/wp-content/uploads/2020/05/1624093-Capture6.png

There is a link "Add Custom Size" using which you can define your own custom size and once you add your custom size it will also offer you the crop option.

[stephenW-4]

I think you'll find that is for the image block. Try adding an image as a background in a container block.

[Minesh]

I had an internal talk with concern person and we are happy to add a feature to container block that will allow you to set the custom size and offer the same settings like image block when you set the container background as image.

However, please note that there is no ETA on it but at least I raised your voice and we are happy to pass your voice in front of our Devs.

[stephenW-4]

Thanks for the update on the file image size issue, where are we up to regarding the z indexing of the image block?

[Minesh]

Regarding the z-index, I already shared the information with our Devs and they will fix this as soon as possible and the fix should be added in near future release.