Putting images into folder without having to type IMAGES/example.gif everytime

John
Jr. Member ⚓︎

I have no idea what I'm doing.
⛺︎ My Room

Guild Memberships:

Artifacts:

Putting images into folder without having to type IMAGES/example.gif everytime

« on: April 11, 2026 @564.20 »

Sooooo, I started making my site this year without any previous experience and everything's just in one folder. Now I'd like to sort the files into sub folders, but that obviously breaks everything. Is there a line of code I could just put into the <head> that tells the <img src="example.gif"> to look for example.gif in the IMAGES/ folder?


	Logged

Kind regards,

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #1 on: April 11, 2026 @614.75 »

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>:

Code

<base href="./images/">

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:

kurohaato
Sr. Member ⚓︎

Full Steam Ahead! (≧∀≦)ゞ
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: rinrinrin
iMood:

Matrix: Chat!

Guild Memberships:

Artifacts:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #2 on: April 11, 2026 @654.07 »

Most code editors allow for find and replace, that's probably going to be your best option here. If you're using the default neocities editor then unfortunately your best bet is going through it manually with ctrl+f. You could also program your own tool that reads your code and spits it back out with the new src attributes, but that would probably take longer than doing it manually or installing an IDE that has a proper find and replace feature already


	Logged

It ain't much but it's honest work

Artifact Swap:

John
Jr. Member ⚓︎

I have no idea what I'm doing.
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #3 on: April 11, 2026 @723.92 »

I'm using VS Code, so there probably is a find and replace feature, but I'd still have to type it for every new image, wouldn't I? I feel like it might be less work to use the <base> element and add ../ for intra-site links? Especially since there are far less intra-site links than images on my site. Or would a full, external link also require additional markers? 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?

I had hoped there'd be a way to tie the effect of the <base> element to a specific element or class like

<style>
img {
base: ./images/
}
</style>

: P

Sorry for being confused and clueless and probably not using the correct terminology.


	Logged

Kind regards,

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #4 on: April 12, 2026 @883.02 »

Quote from: John on April 11, 2026 @723.92

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:

snufkin
Casual Poster

touching grass
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #5 on: April 12, 2026 @893.75 »

Quote from: Dan Q on April 11, 2026 @614.75

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.

I am not the person who asked but thank you for teaching me something new today! That's neat that someone thought to include it in the standard but not to allow more flexibility with it.

Quote from: Dan Q on April 12, 2026 @883.02

No, there is no (good) CSS way to achieve what you're looking for.

Now you have me curious about the bad CSS ways to do such a thing


	Logged

長い旅行に必要なのは大きなカバンじゃなく、口ずさめる一つの歌さ。

Artifact Swap:

Dan Q
Hero Member ⚓︎

I have no idea what I am doing
⛺︎ My Room
RSS:

Guild Memberships:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #6 on: April 12, 2026 @935.84 »

Quote from: snufkin on April 12, 2026 @893.75

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:

Code

<!-- 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>

What that code tries to do is to use the newly-enhanced attr(...() CSS directive to extract the data-cat attributes and then build a url(...) type from it, and then inject that into a background-image.

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:

John
Jr. Member ⚓︎

I have no idea what I'm doing.
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #7 on: April 14, 2026 @668.47 »

If no one's screaming 'don't do it, it's stupid and will cause problems later on' I think I'll try the <base> solution. I think it's even easily reversible, because if I don't like it I can just remove the <base> line and put everything back into the top directory and all links and hrefs should still work regardless of whether they've got a / in the beginning or not?

Thank you for your advice!


	Logged

Kind regards,

Artifact Swap:

snufkin
Casual Poster

touching grass
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #8 on: April 14, 2026 @871.26 »

Quote from: Dan Q on April 12, 2026 @935.84

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 so neat! It'd be interesting to see this kind of feature implemented, but I suppose those sorts of things take time. Thank you for taking the time to explain it!


	Logged

長い旅行に必要なのは大きなカバンじゃなく、口ずさめる一つの歌さ。

Artifact Swap:

crazyroostereye
Full Member ⚓︎

I am most defiantly a Human
⛺︎ My Room
iMood:

RSS:

Guild Memberships:

Artifacts:

Re: Putting images into folder without having to type IMAGES/example.gif everytime

« Reply #9 on: April 14, 2026 @878.83 »

So I wouldn't do it with the base tag as that seems to me not as a good solution. As it doesn't solve the Underlying Issue of sorting out your website structure.

As you said you use VSCode, its search and replace feature can do that. If using the regex mode which makes things weird. How to enable it is by going to search and replace (with WIN+H) and clicking the little icon in the Search box that looks like this: .*

For my example I'll do it with GIF, as an Important Note beforehand it is case-sensitive. So watch out for Upper case and lower case.

So in the Search bar type (src=")([^"/].*.gif") and in the replace bar type $1/YOURFOLDER/$2

This should replace src="smthsmth.gif" with src="/YOURFOLDER/smthsmth.gif".
You can change out the .gif with the other file formats and Cases as you need it.

I'll also explain what this all means now but be aware its weird as explaining Regex is quite difficult:
The Brackets () splits our search expression into two groups, which is important for our replace expression.
In group 1 we search for the character string src=" this being the attribute for an image tag.
The Second Group follows directly after group 1. And it starts with a check that the next character after Group one (e.g. src=") is not either a " (quote) or a / (slash) with the [^"/]. Insuring we don't change an already sorted tag. Then after that we allow any characters forever with the .* until we read a .gif".

Now to the Replace expression:
We begin with $1 which refers to the search expression group one (e.g. src=") and insert in at the beginning, then we add our folder /YOURFOLDER/ followed with the content of search expression group 2 (e.g. smthsmth.gif).


« Last Edit: April 14, 2026 @881.06 by crazyroostereye »	Logged

Pages: [1]

« previous next »