0

Seems I can't use source set to switch out a background image (which happens to be from a file grid) So can't use this code

The issue is in parsing. I need to do something like this:

@media screen and (max-width: 440px) {
  .banner {background-image: url('{banner_dual:banner_long}');
}

@media screen and (min-width: 441px) {
 .banner {background-image: url('{banner_dual:banner_short}');
}

But my templates calls the stylesheet before the template can parse it. Since it's dynamic i can't add the query in the stylesheet.

<!doctype html>
<html lang="en">
{exp:channel:entries channel="home"}
  <head>
    <meta...
    <style>
       {styles}
   </style>
</head>
<body>
{banner_dual}
<div class="banner rtf" style="background-image: url('{banner_dual:banner_long}')">
{/banner_dual}

Any ideas how to solve this?

Improve this question

2 Answers 2

Reset to default
0

If you need to do stuff like that you are better off putting the dynamic content in an inline style tag - specificly because of the parsing order.

Also, It has been my understanding (and experience) that you are better off keeping your stylesheets outside of the CMS and call them in as a locally hosted file. Calling them from the Template manager only increases the processing overhead and doesn't really give much benefit.

Improve this answer
1
  • Thank you. I will review and responding to comment also below. We will be using a remote style sheet and bundling it using npm run build so i guess i wasn't clear on the full nature of the parsing. I use this CMS style only for testing. I assumed you mean write style code right in appropriate html element on the template. Assuming that's what both you and replier above meant. It does make for klunky coding but gotta do what works i guess.
    – lberelson
    Jun 25, 2021 at 16:39
0

Inline styles are by far the easiest way to do this. Keep the style tag inside your entries tag so you can pull in custom values, and after your main CSS link so your custom styles override anything else.

For ease of reference I'd put the style tag immediately above the custom field you're calling in your template. That way you can omit the style tag if it's not needed.

It might not be pretty but it works.

Here's a rough example:

<!doctype html>
<html lang="en">
{exp:channel:entries channel="home"}
  <head>
    <meta...
    <style>
       {styles}
   </style>
</head>
<body>

{!-- your banner field --}
{banner_dual}

{!-- custom style tag to select viewport based image --}
<style>
@media screen and (max-width: 440px) {
  .banner {background-image: url('{banner_dual:banner_long}');
}
@media screen and (min-width: 441px) {
 .banner {background-image: url('{banner_dual:banner_short}');
}
</style>

{!-- your banner container --}
<div class="banner rtf" style="background-image: url('{banner_dual:banner_long}')">
</div>
{/banner_dual}
{!-- /banner field--}

{/exp:channel:entries}
Improve this answer
2
  • Thank you. I will review and responding to comment also below. We will be using a remote style sheet and bundling it using npm run build so i guess i wasn't clear on the full nature of the parsing. I use this CMS style only for testing. I will need to understand what an inline style tag is. I assumed i could just write style code right in the template but i know i can put it in the html element. Assuming that's what both you and replier below meant.
    – lberelson
    Jun 25, 2021 at 16:37
  • An inline style tag is a <style> tag that's added inside your page content area. You'd add it to your template wherever you need to call it in so it can respond to value(s) in a channel entries tag (or even a category tag). It's nothing to do with your main stylesheet.
    – Bluedreamer
    Jun 25, 2021 at 17:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.