ElkArte Community

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, O:-)  please, can someone help me?

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

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

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:

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

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

<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"?

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

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?

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:

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

I hope I am right.  :-[

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

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

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

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:

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

instead of this:

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

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.
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?

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:

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

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

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:

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

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

then we have our image at:

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:

../../images/_light/

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

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:

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

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

http://myforum.de/elk/

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

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:

themes/mytheme/images/_light

So, your image tag should be:

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

Thank you very much for your explainations, Emanuele.

But I am not sure, that I really understood it all, O:-) 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.


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.

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:

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:

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

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. ;)

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

Thank you very much.

You are welcome. ;)

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

	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.

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. O:-)  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.

It was difficult for me as well before and still is for me now, though now is less difficult, of course.

What you need is a proper structure of the images and from what I see, may be, you don't even need to be in theme variant but just inside the theme images, maybe custom, folder. Of course you can still use it if you want it to be very specific to light and social theme as well.

You are using the same named but actually different image, and want it to change accordingly if user change their theme. Meaning you would have to example.png, i.e. one for theme A and one for theme B (more a like my css code i.e. one for light and one for social but extendable / changeable for every theme as well).

That's why php code comes in very handy because this setup cannot be done programmatically without php.

Non-variant:

global $settings;
echo '<img src="' . $settings['default_theme_url']. '/images/portal_images/example.png" width="98%" height="auto" alt="Example">';

Variant:

global $context, $settings;
echo '<img src="' . $settings['default_theme_url']. '/images/portal_images/' . $context['theme_variant'] . '/example.png" width="98%" height="auto" alt="Example">';

I think something like that will work in a php box , but of course, it is all up to you on how you want to achieve it, if there are some other ways to do it.

Okay, forget about php, just use a css class then.
Instead of:

<img src="whatever" />

use:

<span class="my_image_whatever"></span>

and in the custom css:

.my_image_whatever:before {
    content: '';
    width: 100px;
    height: 100px;
    background: url('../../images/_light/image.png');
}

or something like that.

Thank you very much, both of you...

I have a really bad headache since yesterday... (to much thinking hurts sometimes) ;)

I will try with your codes later

What I have tried beforewas not working or not working in a way which would look nice .

A smart trick @emanuele! Thumbs up!

I have tried both now, also tried some changing of them...but both are not really working...

Aharis, I think, your php-code would be working proper, if the images were in default, but they are not. They are in the different themes, in the image-folder "_light" and for testing also in the image-folder for the portal "sp" in the themes.

If I would load them up into the image-folder in default, the blocks would show an image, but it would be always the same image, in each theme, which is selected. The images should change with the themes.

Emanuele, maybe I did it the wrong way?

If I have this in my custom_light.css:

.girlande_1:before {
    content: '';
    width: 100%;
    height: auto;
    background-image: url('../../images/_light/girlande_1.png');
    background-repeat: no-repeat;
    display: block;
}

and this in a portal block:

<center><span class="girlande_1"></span></center>

It will show nothing. ;D

I still have to write something like this in the portal block:

<center><span class="girlande_1"><img src="themes/Winter/images/_light/girlande_1.png" width="100%" alt="Girlande"></span></center>

But so the images would not change with the theme.

height: auto;

I wrote:

height: 100px;

for a reason: you have to specify a height, otherwise the block becomes 0px tall and you see a nice nothing. ;)
You of course can adjust it to the size you prefer, but still you have to use a size.

I see... it is working that way :)  and the image will change with the theme:

.girlande_1:before {
    content: '';
    width: 1496px;
    height: 68px;
    background-image: url('../../images/_light/girlande_1.png');
    background-repeat: no-repeat;
    display: block;
}

Is there a way to resize those images in the script? They look much to big now.  I am using percent in portal and forum for the wrapper and the width of the blocks. With width: 100% or less the images in the blocks would not be shown complete and with 1496px they are also not shown complete and they will get a scrollbar there.

Before that image was shown in 961 x 44px.  They are all pngs, so I can also resize the graphic itself to about 960px, it should work without looking ugly.

Is the "thing" online?
I'm not that good with CSS and see it in action helps getting things sorted out. ;)

Yes, some of them are online to see in my testforum, but not really finished for all themes. I had just started with creating those images for the themes.

Those background-images have always a stupid behavior, ::)  if they are not just colors. If they show "real things" (like little flowers, stars, clouds or anything like this) they are getting much larger or smaller in the different browsers and in other resolutions or on different screen-sizes. And the background-repeat will show more or less of those little graphics. Not easy to handle for me.

But I think, I got a nice result now :) with "background-size", it seems to work in each browser and on each screensize. Maybe I can use this for other parts in my forum with background-images as well.

Now I need not to resize the graphic itself and it is looking exactly the same as before, the images have the same size again:

.girlande_1:before {
    content: '';
    background-size: 100%;
    height: 44px;
    background-image: url('../../images/_light/girlande_1.png');
    background-repeat: no-repeat;
    display: block;
    }

In themes, where I don't want to have any decoration at all or just one or two of them, I can use display: none for the others. They will disappear, without using any space.

It is very comfortable and easy that way with the classes and the content, users now can select themes, as they like to...and it is less work for me in future and a shorter list of portal blocks.

Thanks a lot for your help!

---

Edit:

I have to give them a little more space in the height, about 54px, instead of 44px.  Otherwise the images will be cut off a little on the bottom if I resize in browser to 90% or 75 %. And they are getting too much "empty" space on the bottom in the mobile view. So I will disable them in mobile view.  But basically it is working perfect.

Yes... it seems to work that way.