Hi Tyler,
I tried to change this line:
<div class="hero-container white-text" id="containerheroFunction" style="background-image:url({{ backgroundImage }})">
to this line with additional Filesize-Information:
<div class="hero-container white-text" id="containerheroFunction" style="background-image:url({{ backgroundImage image w=1500 h=620 c='fill' }})">
The difference between the two lines is the file-size information: image w=1500 h=620 c='fill’
I did not find a syntax to make it work for Background-images.
I was fighting my way through this documentation before I contacted you:
https://guide.anymod.com/guide/global-methods.html#anymod-buildimage
The documentation suggests to do it like this:
<!-- Handlebars: inside of AnyMod editor HTML panel -->
<img src="{{ buildImage image w=300 h=200 c='fill' g='face' }}" />
My code does not use any IMG Tag, but rather a background-image. I would simply rewrite the Mods-HTML-markup to circumvent this issue, but I run some 15 Mods I have to adjust , and also: a lot of CSS is already applied to them.
So I would strongly prefer to find a way to influence the size of background-images.
While my image is auto-compressed via Cloudinary, I remain unable to apply the nessesary syntax to my background-image.
<img :src="buildImage(image, { c: 'limit', w: 500, h: 500 })" />
< image :src=“buildImage(item.sweetsImages, { c: ‘limit’, w: 1000 })” .
<img src="{{ buildImage image w=400 h=150 c='fill' }}" />
I hope the issue can be covered by applying the correct syntax for background-images.
How may I apply Clodinary-logic to gain a larger filezize for a background-image if thhis is the HTML-Code I am using ? :
<div class="hero-container white-text" id="containerheroFunction" style="background-image:url({{ backgroundImage }})">
PS: https://cloudinary.com/documentation/image_transformations#scale
PS: https://guide.anymod.com/guide/global-methods.html#anymod-buildimage
I tried to workaround the issue by creating an img Tag and setting it to display none, in order to make sure cloudinary receives the requiered logic. That also did not increase the file-size of the image. This is the MOD:
https://anymod.com/mod/home-page-hero-section-nkrkmm
https://anymod.com/edit/nkrkmm/code