Small hint needed

Questions
#1

before I opened this new ticket I did consult the documentation thoroughly .

I did not find support for the following question:

My Goal is to overwrite the below line as soon as I am on a mobile device so my intention is to establish a CSS Rule inside of a media query , in order to overwrite:

<div class="hero-container white-text" style="background-image:url({{ backgroundImage }})">

I tried to

background-image: url('{{backgroundImageMobile}}') !important;

but that did not work within the CSS-Pane.

I cannot remember the best practice-Way to accomplish this.

My goal is to inject a Field-name (Image-URL) into the CSS-Section.

Any other way to solve this is equally welcome.

On https://anymod.com/projects/86N4N3/dashboard (private mod balana: I cannot add Tyler due to the limited number of 5 Editors allowed for this project (and I am happy to be allowed those 5 editors ; )

I cloned the mod into a public Project for you to help me with more ease:

https://anymod.com/mod/mobile-productpage-hero-section-ralbdd

I played around with handlebars #IF mobile, then add class isMobile . I wanted to establish a helper. But I failed. I also played around with dropping the {{field-Content}} into the CSS. I tried various ways but I failed .

#2

You can do this using SCSS variables, which use a $:

background-image: url($backgroundImageMobile) !important;

Let us know if this doesn’t work for you!

#3

Hey Tyler,

the below text is written with With {{backgroundImageMobile}} beeing the Field-Name for the Mobile-Image-URL!

I think you might have misunderstood the issue I am facing.

I gave your advice a try :

I created the SCSS Variable as advised by you.

But I already expected this to fail. And it did indeed fail.

The problem is I probably cannot enter the Field-Name {{backgroundImageMobile}} into the SCSS Pane of my MOD.

The Solution does work if I hardcode the URL-String into the SCSS Variable like this:

$backgroundImageMobile: 'https://res.cloudinary.com/component/image/upload/v1569403793/SkySails-Power-Home-Hero-Mobile_z13gzv.png?test';

Of cause the solution does no longer work if I try to use Handlebars (field-name) inside of the SCSS Pane like this :

$backgroundImageMobile: '{{backgroundImageMobile}} ';

I guess I just cannot use Curly-braces inside of CSS and hope they are recognised as Handlebars.

So my question is: Which way is best to integrate the content of the Filed-Name {{backgroundImageMobile}} into my scss-pane?

Any other way to solve this is equally welcome.

#4

Here is an example with everything else removed:

https://anymod.com/mod/mobile-productpage-hero-section-orblll?preview=true&w=503

.bg-image {
  background-image: url($backgroundImageMobile);
}
#5

Oh!

Thank you for your support!

I did not grasp the concept. Now I do :wink:

Thank you!

1 Like