X3Photo Gallery Forums

Mibu · 17 Oct 2024, 16:05

I am trying to place a small gif next to the image title (e.g. indicating new/locked galleries). I have tried adding the following:

<img src="http://mypage/new.gif" alt="neu"/>

next to the image title, description and menu label in the Page menu. (just to see what would happen)

For the menu label it worked and the gif is shown correctly in the menu.
For the description it worked only on the page itself, but not when the description is displayed e.g. one level higher as folder description.
For the title it is not displayed next to the title as expected, but only below the content text. It also is not displayed next to title in higher level folder titles.

Any idea how I can fix this?

Thanks, Michael

17 Oct 2024, 22:18

Mibu wrote:For the description it worked only on the page itself, but not when the description is displayed e.g. one level higher as folder description.

This is because the description, which does not expect to have images inside, will inherit opacity:0 from the lazy loader (load images on scroll) when it's inside a list of elements in it's parent page. You could bypass this:

<img src="http://mypage/new.gif" style="opacity:1" alt="neu"/>

Mibu wrote:For the title it is not displayed next to the title as expected, but only below the content text. It also is not displayed next to title in higher level folder titles.

Images won't work in titles, because they are supposed to be minimal and raw, used inside tags that don't support block-level elements, and used in various navigation and also the web page's meta <title>. Therefore, HTML tags are stripped out of the title.

Mibu · 18 Oct 2024, 02:59

Thank you for your quick reply!

Code Select all

<img src="http://mypage/new.gif" style="opacity:1" alt="neu"/>

This partially worked. It does display the image in the folder description, but completed distorted and way too big.

I understand your reasons, why images should not be put into titles.

18 Oct 2024, 06:58

Mibu wrote:This partially worked. It does display the image in the folder description, but completed distorted and way too big.

That is not caused by setting it to opacity:1 though ... That is probably caused by images being "responsive" by default, attempting to scale to fill their container. To insert the image at exact widths, you would need to include width/height attributes and/or assign CSS.

Mibu · 18 Oct 2024, 15:32

Unfortunately adding width did not help either. I tried

<img src="http://mypage/new.gif" style="opacity:1" alt="neu" width="15" />

but it did not change anything (same for height) - it's always spread over the whole width (irrespective of width value and image type .gif, .png, .svg). What would I have to put into CSS?

18 Oct 2024, 23:30

Mibu wrote: Unfortunately adding width did not help either. I tried
Code
<img src="http://mypage/new.gif" style="opacity:1" alt="neu" width="15" />
but it did not change anything (same for height) - it's always spread over the whole width (irrespective of width value and image type .gif, .png, .svg). What would I have to put into CSS?

To be entirely sure of what happens, I would need to see a link, as I don't feel like creating a test for this, including all scenarios. It may also depend on where the description is showing, because if in layouts, CSS has been assigned to affect images inside that specific layout, and I have not taken account for images that may be added into descriptions.

All in all, you can override with something like this:

<img src="http://mypage/new.gif" style="opacity:1; width:15px; height:15px" alt="neu">

Sometimes you can omit width or height values, and allow the aspect to scale naturally. Sometimes, you might need to use !important attribute to override styles that would otherwise apply.

<img src="http://mypage/new.gif" style="opacity:1; width:15px !important;" alt="neu">

Once you have a style combination that you want to use for several images, it's easier to then assign this to a class.

<img src="http://mypage/new.gif" style="opacity:1" alt="neu" class="my-description-image">

Custom CSS:

.my-description-css {
  width: 15px;
  border: 1px solid black;
}

Mibu · 20 Oct 2024, 13:07

Thanks to these code snippets I was able to achive what I was looking for. Maybe just for others, who might be looking for a similar solution in this thread, of course the class names need to match and the !important modifier is also necessary. Here what worked for me:

.my-description-image {
  width: 100px !important;
  border: 5px solid red; 
  }

Thank you!

X3Photo Gallery Forums

gif next to an image title7 posts

gif next to an image title

Re: gif next to an image title

Re: gif next to an image title

Re: gif next to an image title

Re: gif next to an image title

Re: gif next to an image title

Re: gif next to an image title