We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 53986
    • 12 Posts
    Hello, I have a modified website template that I have been working on for some time, and I have successfully implemented it as a template in modx. I am in the process of adding template variables to different parts of the page. My problem is that at the top of the page, there is a large background image, and I would like to be able to manually change this image as I please. This is only a problem because the code for the image isn't in the HTML document itself, but rather in the CSS. I cannot for the life of me figure out how to change the css with a template variable in order to change this image as I please. Granted, I have no idea if this is even the way to be going about this.

    Any tips would be greatly appreciated!
      • 3749
      • 24,544 Posts
      Try putting a MODX tag like this (with the real name of the TV) in the CSS file where the URL of the image is:

      [[*TV_name]]


      Then put the URL of the image in the named TV.


      If that doesn't work, you can move the CSS with the tag into the head section of the Template, between "style" tags.
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
        • 53986
        • 12 Posts
        Try putting a MODX tag like this (with the real name of the TV) in the CSS file where the URL of the image is:

        [[*TV_name]]

        Thank you for your reply.

        I have done this step. Straightforward enough.

        Then put the URL of the image in the named TV.

        Can you explain a little more in depth how to do this? My understanding of modx is basic at best.
          • 17301
          • 932 Posts
          If you create the TV as Bob suggested and set the input type as 'image' when you upload an image all that [[*TV_name]] will output will be the path of the image. Therefore you could then use this tv to set an inline style that you want the background applied to ie:

          <section style="background-image: url('[[*TV_name]]');">
          	<h1>Hello world.</h1>
          </section>


          I wasn't personally aware you could set this in the CSS file itself though but give that a try too if you want and let confirm the results if it works! smiley
            ■ email: [email protected] | ■ website: https://alienbuild.uk

            The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
            • 3749
            • 24,544 Posts
            LK, IIRC a tag for an image TV returns a complete img tag, which wouldn't work so well. Maybe it depends on the output type, though. I'm not sure what comes back if you use 'image' for the input type and 'text' for the output type.

            I was thinking of a text TV containing the URL of the image, though that keeps you from using the image browser to select the image. So for Brickthenick the second step would be to just edit each page, and on the TV tab, put the URL of the appropriate image into the TV value.

            My other suggestion would be to set the TV value the same way and put something like this in head section of the Template:

               <style>
                   #big_background_image {
                       background-image: url("[[*TV_name]]");
                   }
               </style>
            
            


            And something like this in the body section where the image goes:

                <div id="big_background_image">
                </div>


            The tag will be replaced by the value of the TV for that page.


              Did I help you? Buy me a beer
              Get my Book: MODX:The Official Guide
              MODX info for everyone: http://bobsguides.com/modx.html
              My MODX Extras
              Bob's Guides is now hosted at A2 MODX Hosting