Relative paths in HTML files

Topic: Relative paths in HTML files (Read 4361 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Relative paths in HTML files

August 04, 2016, 05:59:03 am

Hello!

I would like to have "relative paths" to some images, which are used in custom portal blocks (HTML). But I can't figure it out,

please, can someone help me?

In a CSS-file both kinds of paths are working proper:

Code: [Select]

background-image: url(http://myforum.de/elk/themes/mytheme/images/_light/example.png);

Code: [Select]

background-image: url(../../images/_light/example.png);

But with img src in a portal block or in index.template.php it is not working that way. I will not see the image with something like this:

Code: [Select]

<img src="../../images/_light/example.png" width="98%" height="auto" alt="Example">

It has always to be the full url, like this:

Code: [Select]

<img src="http://myforum.de/elk/themes/mytheme/images/_light/example.png" width="98%" height="auto" alt="Example">

How can I change them to "relative paths"?

Re: Relative paths in HTML files

Reply #1 – August 04, 2016, 06:35:01 am

https://css-tricks.com/quick-reminder-about-file-paths/

Re: Relative paths in HTML files

Reply #2 – August 04, 2016, 07:34:01 am

Thank you, ahrasis. I had a look there and at several other HTML-Helping-Pages trough the last days.

Maybe I don't understand it at all, what I can read there, but I think, the directory in my example is correct?

Re: Relative paths in HTML files

Reply #3 – August 04, 2016, 08:08:05 am

I still think the problem is the starting point. We are not in an images directory when looking at a portal block. So we can't go two directories backwards and hope we are in the mytheme folder. Right?

Where is the file located that IS the portal block? From there we must start. Right?

If I am right (which isn't for sure) the code for index.template.php should be:

Code: [Select]

<img src="images/_light/example.png" width="98%" height="auto" alt="Example">

I hope I am right.

Re: Relative paths in HTML files

Reply #4 – August 04, 2016, 08:40:04 am

I think it should have / in its beginning in img src unlike in css i.e. without / in the beginning?

Re: Relative paths in HTML files

Reply #5 – August 04, 2016, 08:43:13 am

With / in the beginning the path starts in root directory, if I understand the manual correctly. But that's not what Ruth wants.

Re: Relative paths in HTML files

Reply #6 – August 04, 2016, 09:36:39 am

It is not working for the index.template.php that way, Jorin. It is working in no way.

I think, the portal blocks are created in default...so maybe I should go upwards for the images in the _light folder, not backwards, as I did?

And the portal has got its own css-file and its own image-folder in each theme. Maybe my images are just in the wrong folder? They are in the images/_light folder of my themes.

Maybe I have to upload them instead into that sp-images-folders of my themes?
And try this in the portal blocks:

Code: [Select]

<img src="../images/sp/example.png" width="98%" height="auto" alt="Example">

instead of this:

Code: [Select]

<img src="../../images/_light/example.png" width="98%" height="auto" alt="Example">

Edit: No...it is also not working that way...I have tried it.

Or I can try to use background-urls in the portal.css of my themes?

Re: Relative paths in HTML files

Reply #7 – August 04, 2016, 10:23:26 am

Sorry. That was just a quick thought and I don't have even a portal to test it on. So, I don't have any certain answer for that.

Quote from: Ruth – August 04, 2016, 05:59:03 am
Code: [Select]
<img src="http://myforum.de/elk/themes/mytheme/images/_light/example.png" width="98%" height="auto" alt="Example">

For what I see, this is correct a php. For that, we have use THEMEDIR or $settings such as <img src="' . $settings['images_url'] . '/openid.png" title="' . $txt['openid'] . '" alt="' . $txt['openid'] . '" /> in index.template.php. I doubt that we can use .. there at all or can we?

Re: Relative paths in HTML files

Reply #8 – August 04, 2016, 11:14:20 am

The first problem is "guessing".
Let's stop with the guessing and let's understand what "relative" actually means.

When you have something "relative" there is always a comparison between "something" and something else, in this case is the comparison between two paths.
When you are referencing a path "relatively to another, you have to imagine to start from one path and write the route you have to take to go to the another one.

Let's use an example:

Code: [Select]

c:\users\emanuele\documents\elkarte\themes

if I want to go from the path above to let's say:

Code: [Select]

c:\users\emanuele\webserver\myforum\themes

I have to:
1) go up one level (to elkarte),
2) go up another level (to documents),
3) go up another level (to emanuele),
4) enter "webserver",
5) enter "myforum".
Now, when you try to speak the "pathish" language (in the MS Windows dialect), "go up" is translated to "..\" (two dots and a backslash).
So, from the first path to the second, using a relative path you have to write:

Code: [Select]

..\..\..\webserver\myforum

Does it sound about right up to here?

Okay, now let's move to the web.
The web speask another "pathish" dialect, the "unix" one, in which case, the backslash (\) is replaced by a slash (/). Easy, right?

Good, then let's assume the URL to the css file is:

Code: [Select]

http://myforum.de/elk/themes/mytheme/css/_light/custom_light.css

then we have our image at:

Code: [Select]

http://myforum.de/elk/themes/mytheme/images/_light/example.png

The principle is the same, starting from http://myforum.de/elk/themes/mytheme/css/_light/ :
1) go up one level (to css),
2) go up one level (to mytheme),
3) enter into "images",
4) enter into "_light".
This translates to:

Code: [Select]

../../images/_light/

So, in your custom_light.css file, to pick images in the images directory you have to write:

Code: [Select]

background-image: url(../../images/_light/example.png);

The same thing you already wrote, but now you know why you wrote it that way.

Now, let's see analyse the "block" situation.
When you visualize a block, what is the URL in your browser? Most likely something that looks like:

Code: [Select]

http://myforum.de/elk/index.php?some=garbage

right?
Okay, the relevant part here is anything up to "index.php", so:

Code: [Select]

http://myforum.de/elk/

Now, this is the path you start from, from here you have to go to your image that resides at:

Code: [Select]

http://myforum.de/elk/themes/mytheme/images/_light/example.png

So, how should it look like the relative path?
hmm... do you have to go up of any level?
I'd say no, what you have to do is follow the directories:
1) enter into "themes",
2) enter into "mytheme",
3) enter into "images",
4) enter into "_light".
Translating to "pathish" results:

Code: [Select]

themes/mytheme/images/_light

So, your image tag should be:

Code: [Select]

<img src="themes/mytheme/images/_light/example.png" width="98%" height="auto" alt="Example">

Re: Relative paths in HTML files

Reply #9 – August 04, 2016, 02:40:13 pm

Thank you very much for your explainations, Emanuele.

But I am not sure, that I really understood it all,

Why is the "relative path" there so different to the way I can use the background-image in my css? Why has it still the name of my theme in the link?

But anyway, your code is working in index.template.php and also in custom-html-blocks.

Thank you.

QuoteNow, let's see analyse the "block" situation.
When you visualize a block, what is the URL in your browser? Most likely something that looks like:
Code: [Select]
http://myforum.de/elk/index.php?some=garbage
right?

No...it is just http://myforum.de/elk/index.php? Nothing more as URL in browser. The several portal blocks have only a div class and a div id, they say nothing to me in browser.

I think, maybe I was asking the wrong thing.

What I wanted to do with the images in portal blocks is the same I had done with our icons and some backgrounds in the header:

I have in custom_light.css for example a background-image: url(../../images/_light/clouds.png) or a background-image: url(../../images/theme/pm.gif) or a background-image: url(../../images/icons/img_profile.gif).

I do not need to change this in css for another theme. There will be blue icons in a blue theme and red icons in a red theme, if people switch from one theme to another. I just have to upload blue or red icons into the theme folders of the blue and the red theme.

I would like to have the same with the decoration in some custom portal blocks. If people are using the theme "summer" in winter, they should see the flowers which belong to this theme, no snowflakes, which belong to the theme "winter".

But this is not possible with <img src="themes/winter/images/_light/snow.png"> or <img src="themes/summer/images/_light/flowers.png"> in the portalblocks.

So it would be neccessary to create a lot of nearly simulare blocks for each theme, activate and deativate them always, if I switch to another theme and the users cannot select themes by themselves, because it would look very funny if they see easter bunnys together with a background and colors which belong to christmas.

I have not tried it yet, but maybe I can create a few other portalbgs special for blocks which are just for decoration. If I use something like background-image: url(../../images/_light/deco.png) there, it should be possible, that the same portal block will show flowers in summer and snow in winter.

At the moment I am using no backgrounds and no headers for those blocks with decoration, because there is always a shadow with the portal backgrounds, which is not looking nice together with the decoration...and I can't make this shadow transparent or change it to the color of the wrapper in blocks, which should show no shadow.

Re: Relative paths in HTML files

Reply #10 – August 04, 2016, 03:25:38 pm

Quote from: Ruth – August 04, 2016, 02:40:13 pmBut I am not sure, that I really understood it all, Why is the "relative path" there so different to the way I can use the background-image in my css? Why has it still the name of my theme in the link?
[...]
QuoteNow, let's see analyse the "block" situation.
When you visualize a block, what is the URL in your browser? Most likely something that looks like:
Code: [Select]
http://myforum.de/elk/index.php?some=garbage
right?

Here you have the answer to your question: you have to "understand" to what your path is relative to.
If you read my answer again, you will see that when I'm talking about the custom_light.css file I present the URL:

Code: [Select]

http://myforum.de/elk/themes/mytheme/css/_light/custom_light.css

Why? Simple because this is where the file resides. If you open the URL in your browser you'll see the css.
So it's the "starting point" of your relative path.

When you are talking about the block, you are using an img tag, this tag is contained in the HTML of the page, so the "source" becomes the address of the page:

Code: [Select]

http://myforum.de/elk/index.php

That's why I said the important part is everything except index.php.

The "starting point" is always the file you are in. It can be the index.php of your forum (and so the starting point is /elk/) or the css file (in which case the starting point is /elk/themes/mytheme/css/_light/).

I'm not sure this makes things any more clear, but if not, let me know and I'll try some more.

Quote from: Ruth – August 04, 2016, 02:40:13 pmI think, maybe I was asking the wrong thing.

What I wanted to do with the images in portal blocks is the same I had done with our icons and some backgrounds in the header:

I have in custom_light.css for example a background-image: url(../../images/_light/clouds.png) or a background-image: url(../../images/theme/pm.gif) or a background-image: url(../../images/icons/img_profile.gif).

I do not need to change this in css for another theme. There will be blue icons in a blue theme and red icons in a red theme, if people switch from one theme to another. I just have to upload blue or red icons into the theme folders of the blue and the red theme.

TBH, while writing the answer I imagined what you wanted, but I didn't say anything not to make things more complex.
Relativeness in that case doesn't help, what you need is... unfortunately a php block...
Spoiler (click to show/hide)

At that point, though, it's probably better if you post the code of your block, so that I can "convert it" to php and give you the answer.

Re: Relative paths in HTML files

Reply #11 – August 04, 2016, 03:41:59 pm

I have to read this a few times more, Emanuele...but I think I am starting to understand.

Thank you very much.

Re: Relative paths in HTML files

Reply #12 – August 04, 2016, 04:56:19 pm

You are welcome.

Re: Relative paths in HTML files

Reply #13 – August 04, 2016, 08:35:58 pm

I think what I understand is first we need to differentiate html (via php) and css as html will require either full or relative url i.e, unlike in css where .. is appllicable, the same is not applicable in html.

Second, the forum root where index.php is located as the base. From there, we build up our relative url for our images or simply use full url.

Third, since the block is using php, we can add using php code as suggested or others, depending on where we put our images.

By the way, if I understand correctly, for css variant, you may use something like this code (that is copied and modified from my MASA addon):

Code: [Select]

	global $context, $settings;
	<link rel="stylesheet" type="text/css" href="' . $settings['default_theme_url']. '/css/' . $context['theme_variant'] . '/portal/custom.css?fin10" />

I think the images can use the same code trick as well.

Re: Relative paths in HTML files

Reply #14 – August 05, 2016, 03:47:54 am

Thank you very much, ahrasis. It is very kind of you, trying to help me with this.

I try to understand...but I can't.

I can do some very simple changes in the files, but only by "copy and paste" and "try and error", because I know nothing about coding and do never really know what I am doing there and why it works sometimes and sometimes it does not.

I have no "basic knowledge" about all this technical stuff, that's the problem. Maybe I am too stupid or just too old to learn new things.

I can handle my css-files somehow, but php is much too difficult for me.