Setting image root URL as a CSS variable and using CSS content

Question

I have a site with hundreds of pages and thousands of images, and we are likely to need to change the base URL from something like site_a.com to b_site.com, not once, but three to four times in the next year. I really don't want to have to go through all the image URLs on all the pages and change them manually more than once.

I was trying to use the CSS content feature, but it doesn't look like it does the right job, or I feel like I am just doing it wrong. The idea would be something like this:

:root {
    --imgroot: url('https://imgs.xkcd.com/');
}
    
img {
    content: var(--imgroot);
}

This way, when we DO change the base URL, all I need to do is change the URL listed in the root section to change it for all images across all the pages, and then the HTML would just be something like:

<p><img src="comics/2.png"></p>

When I try this, it looks like the content is only using the info from the --imgroot variable, and not picking up the comics/2.png. I'm not sure what to try next.

Ramin eghbalian · Accepted Answer · 2022-05-03 23:37:58Z

1

just put this line <base href="https://www.yourwebsite.com/" target="_blank"> in your html head tag, it also supports links in your HTML; try like below:

<head>
  <base href="https://www.yourwebsite.com/" target="_blank">
</head>


<body>
   <img src="images/stickman.gif" width="24" height="39" alt="Stickman">
   <br>
   <a href="blog/first-article">HTML base tag</a>
</body>

answered May 3, 2022 at 23:37

Ramin eghbalian

2,6851 gold badge22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ScottC Over a year ago

This would work great except the images are on a different URL than the site, so when I put the image URL in, the pages can't be found. :) Darn, this was so simple, I was hoping it would do the trick.

Ramin eghbalian Over a year ago

okay but you can put any website URL to the base tag, Do you get your images from several sites?

Lucas · Accepted Answer · 2022-05-04 13:16:03Z

0

You cannot use the content property for this. In your case you should use your backend language or javascript to do this. Example in javascript:

base-url.js

document.querySelectorAll('img[data-base]').forEach(img => {
    let base;
    // Here you add the base urls you need
    const baseOne = 'https://siteone.com';
    const baseTwo = 'https://sitetwo.com';

    switch (img.dataset.base) {
        // Create a case for each of the above bases
        case 'one':
            base = baseOne;
            break;
        case 'two':
            base = baseTwo;
            break;
    }

    // Here the img[src] is replaced
    img.setAttribute('src', base + img.getAttribute('src'));
});

So in your img tags you need to do this:

<img src="/dir/file.png" data-base="one" />

On every page that you need this functionality, add the base-url.js file at the bottom of the page, if not at the bottom of the page the script will not work because the <img /> tags have not yet been generated.

Remembering that the value of the data-base attribute of the images must be the same used in the case inside the switch.

edited May 4, 2022 at 13:16

answered May 3, 2022 at 23:27

Lucas

4526 silver badges19 bronze badges

2 Comments

ScottC Over a year ago

Kind of hate to ask, but my CSS is mediocre, my javascript is worse. Any chance you have the code to do this in javascript instead of PHP? I got to const image_base_url = https://examplesite.com; but I'm having problems putting it into the <img src

Lucas Over a year ago

I edit my answer to use javascript. I didn't do any tests, but I think everything is ok.

Collectives™ on Stack Overflow

Setting image root URL as a CSS variable and using CSS content

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related