|
|
Dan Q
Hero Member ⚓︎
 
I have no idea what I am doing
⛺︎ My Room
RSS: 
Guild Memberships:
Artifacts:
 
|
 |
« Reply #1 on: a Spring day » |
|
Yes and no.
Your intuition is solid; there is an element you can put into the <head> that does exactly that: the element you're looking for is <base>. It's not well-known nor widely used but it's been standard in HTML for decades and all browsers support it. The idea is that you put something like this in your <head>:And now every href/src in the page's HTML is considered to be relative to the "images" subdirectory. So <img src="first.jpg"> actually points to "images/first.jpg". Neat, huh?
The downside is that I really do mean every href, so that includes your hyperlinks! If you have e.g. <a href="sibling-page.html">, that link now goes to images/sibling-page.html, which probably isn't what you meant! It needs to be modified to be something like <a href="../sibling-page.html"> (../ means "up one level"), or <a href="/top-folder/sibling-page.html"> (the leading / means "at the root of the side"), or even a full hyperlink like <a href="//example.com/top-folder/sibling-page.html">.
Hope that helps! |
|
|
|
|
Logged
|
Artifact Swap:     
|
|
|
|
|
|
|
Dan Q
Hero Member ⚓︎
I have no idea what I am doing
⛺︎ My Room
RSS:
Guild Memberships:
Artifacts:
|
|
« Reply #4 on: a Spring night » |
|
Also, if the leading / means 'at the root of the site' an intra-site link wouldn't even need to be "/top-folder/sibling-page.html" but could just be "/sibling-page.html", right? Depends if your page is in a folder! I chose to assume it was as a learning example. You're correct.
No, there is no (good) CSS way to achieve what you're looking for. |
|
|
|
|
Logged
|
Artifact Swap:
|
|
|
|
|
Dan Q
Hero Member ⚓︎
I have no idea what I am doing
⛺︎ My Room
RSS:
Guild Memberships:
Artifacts:
|
|
« Reply #6 on: a Spring night » |
|
Now you have me curious about the bad CSS ways to do such a thing  It won't work... yet, but in the future you'd probably be able to do something like this (but don't; it's horrible) to create a gallery of cats where you only provide the name of each cat and then use CSS to concatenate that into a URL and use it in a CSS directive:<!-- this is BAD; don't do this, even if it works (which it doesn't at time of writing); use an <img> like a normal person -->
<h1>A Gallery of Cats</h1>
<div class="cats">
<div data-cat="neo"></div>
<div data-cat="millie"></div>
<div data-cat="millie_neo"></div>
<div data-cat="neo_banana"></div>
<div data-cat="bella"></div>
<div data-cat="poppy"></div>
<div data-cat="louie"></div>
</div>
<style>
@function --get-cat(--name type(<string>)) {
result: url("https://placecats.com/" var(--name) " /300/200");
}
.cats {
display: flex;
flex-wrap: wrap;
gap: 8px;
div {
width: 300px;
height: 200px;
position: relative;
background-color: lightgray;
background-image: --get-cat(attr(data-cat));
&::after {
position: absolute;
bottom: 6px;
right: 6px;
padding: 2px 4px;
content: 'Name: ' attr(data-cat);
background: white;
}
}
}
</style>
It doesn't work because you can't currently concatenate strings in CSS to make a URL. If you try the above code you'll notice that you see each cat's name in a "Name: neo" caption, or similar... but the image of the cat itself doesn't appear. This is a legacy bug in CSS: because the url(...) directive can work with or without quotation marks, it's impossible for it to be sure whether you're concatenating it with a variable or you've just got a really-weird-looking URL!
But there's chatter on the relevant standards body mailing lists that such a feature might make it to CSS someday.
I tried some experiments with embedding SVGs that in turn embed bitmap images and deriving their URLs from CSS variables, but hit the same problem. This one's unsolvable without e.g. implementing a Web Component (which would create a JavaScript dependency just to display images, ugh) or else - as I and others have said above... just adding the folder name (or changing the <base>).
If it really bugs you (and you can't stand to copy-paste), and the <base> solution turns out not to be best for you... you could just use a shorter folder name, like "i". Just a thought! |
|
|
|
|
Logged
|
Artifact Swap:
|
|
|
|
|
|
|
|
|
Posts & Arts: 93/1k.beats
Are u having fun?
Author
