-
Posts
-
Hello there,
as you can see on https://www.accretech.eu/de/oberflaechenmessgeraete/ the background-images for the 6 boxes are made via external css file, which results that they are not lazy loaded (using wp-rocket).
Is there a way to have the background-images as inline-css? When searching for that I found a thread where they state, the bg-images are inline-css, which is what we want.Hey max2consulting,
Thank you for the inquiry.
The background images will still not be lazy loaded even when they are applied as inline css. You have to create a script that dynamically creates an invisible image element, load the corresponding image resource, then apply it back as background image to the designated element. This is not available in the theme out of the box but you may be able to use the following plugin.
// https://wordpress.org/plugins/lazy-load-images-and-background-images/
Best regards,
IsmaelHi Ismael,
it would make them lazy load if they were applied via inline-style, because that’s how wp rockets lazyload works.
That was the whole point.
We won’t use another plugin for that.
And I don’t really get the point of the hidden image-elements.
How shall I put them as background for the elements that they are used to be used an, and how would this help with lazyload?
The whole point of using a builder (like yours) is to make those edits inside it.So maybe, beside a workaround for now, you could consider this as an improvement request?
just not sure why you are making it so hard for yourself.
Why grid-row and why create that with background images.
6 1/3 columns and then images in there that get a caption. The caption is then styled.
Maybe also set the 6 columns as flex-box:__________________
ich bin mir nur nicht sicher, warum Du es dir so schwer machst.
Warum Grid-row und warum das mit Hintergrundbildern erstellen.
6 1/3 columns und dann Bilder hinein, die ein Caption bekommen. Das Caption wird dann gestyled.
Eventuell auch noch die 6 Columns als flex-box setzen:
https://enfold.webers-webdesign.de/images/PS: wenn du das gesehen hast, werde ich deine Bilder durch Platzhalter-Bilder ersetzen.
PPS: das Flexen geht allerdings nur wenn die flex-items nicht von anderen Elementen gestört werden. Heißt: es dürfen nur diese 6 Columns da drin sein in der Color-Section. Überschriften etc. müssen in einem anderen Container untergebracht werden.
- You must be logged in to reply to this topic.