Relative paths in HTML files

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

0 Members and 1 Guest are viewing this topic.

Re: Relative paths in HTML files

Reply #15 – August 05, 2016, 07:10:33 am

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:

Code: [Select]

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

Variant:

Code: [Select]

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.

Re: Relative paths in HTML files

Reply #16 – August 05, 2016, 07:45:02 am

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

Code: [Select]

<img src="whatever" />

use:

Code: [Select]

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

and in the custom css:

Code: [Select]

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

or something like that.

Re: Relative paths in HTML files

Reply #17 – August 05, 2016, 07:58:46 am

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 .

Re: Relative paths in HTML files

Reply #18 – August 05, 2016, 10:19:09 pm

A smart trick @emanuele! Thumbs up!

Re: Relative paths in HTML files

Reply #19 – August 06, 2016, 03:13:10 am

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:

Code: [Select]

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

Code: [Select]

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

It will show nothing.

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

Code: [Select]

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

Re: Relative paths in HTML files

Reply #20 – August 06, 2016, 03:24:23 am

Code: [Select]

height: auto;

I wrote:

Code: [Select]

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.

Re: Relative paths in HTML files

Reply #21 – August 06, 2016, 03:49:51 am

I see... it is working that way

and the image will change with the theme:

Code: [Select]

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

Re: Relative paths in HTML files

Reply #22 – August 06, 2016, 01:43:44 pm

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

Re: Relative paths in HTML files

Reply #23 – August 06, 2016, 10:42:24 pm

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:

Code: [Select]

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