Strange article image url

General questions relating to Joomla! 4.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
andoo
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Wed Jun 03, 2020 9:08 pm

Strange article image url

Post by andoo » Thu Oct 07, 2021 6:40 pm

On my quite newly installed joomla 4 noticed that intro images of the articles I add have this kind of URL

Code: Select all

<img src="/images/nature-5111414_1920.jpg#joomlaImage://local-images/nature-5111414_1920.jpg?width=1920&amp;height=1280" alt="">
while intro images of Joomla's demo content articles have this URL

Code: Select all

<img src="/images/sampledata/cassiopeia/nasa4-1200.jpg" alt="" itemprop="thumbnail">
Is it something wrong wih the first URL? Thank you for any help.

alex2001
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Wed Jan 14, 2009 10:19 am

Re: Strange article image url

Post by alex2001 » Sat Oct 23, 2021 1:25 pm

I see the same. All articles created in latest Joomla 4.0.3 has such additional "#joomlaImage://local-images/...?width=...&amp;height=..." in intro images URL.

Who can describe this implementation? Or this is a bug?

GreenDot
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Thu Dec 02, 2021 9:27 pm

Re: Strange article image url

Post by GreenDot » Mon Dec 06, 2021 7:16 am

Have exact the same code for the image.
Cannot find any setting of explanation for it.

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 822
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Strange article image url

Post by ceford » Mon Dec 06, 2021 11:38 am

An interesting question! I don't have a complete answer, but what you see is related to lazy loading of images. I think it is likely that the example articles in the demo content were created a long time ago before lazy loading was introduced - hence the images there have older mark-up.

For the lazy loaded images I don't see what you see myself and I wonder if you could explain the steps taken to create the img tag. This is what I see:

Code: Select all

<img src="/j4test/images/sampledata/cassiopeia/nasa1-400.jpg" alt="Nasa 1" loading="lazy" data-path="local-images:/sampledata/cassiopeia/nasa1-400.jpg" width="400" height="400">
The way it is supposed to work is that the src="" attribute is initially empty so no image is loaded. Then, when the image scrolls into the viewport the image url is copied from data-path to src and the image is loaded. And that is all I know at this stage.

This seems a good description of lazy loading: https://imagekit.io/blog/lazy-loading-i ... ete-guide/

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 557
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Strange article image url

Post by Jaydot » Mon Dec 06, 2021 12:44 pm

ceford wrote:
Mon Dec 06, 2021 11:38 am
...related to lazy loading of images...
I've been puzzling about this too.
As far as I can tell, this code adds the data-path attribute to the image's HTML, regardless of lazy loading being on or off...
All images have this data-path attribute, not only intro-images, although the only place I can actually see the code is added is when I insert an intro-image.
(More info on data-* attribute: https://www.w3schools.com/TAGS/att_data-.asp)
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12509
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: Strange article image url

Post by brian » Mon Dec 06, 2021 12:53 pm

It is used for all images and its because of
1. the dimensions are required for lazyloading
2. joomla4 support the ability to load images from external sources such as dropbox etc

I have just updated the code that creates the sample data so that also includes the extra code
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 557
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Strange article image url

Post by Jaydot » Mon Dec 06, 2021 12:57 pm

Thanks, Brian!
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
ceford
Joomla! Guru
Joomla! Guru
Posts: 822
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Strange article image url

Post by ceford » Mon Dec 06, 2021 3:15 pm

It would be nice to know a bit more about how it works. As far as I can tell the lazy loading is handled by the browser rather than Joomla Javascript and the part that says

Code: Select all

data-path="local-images:/sampledata/cassiopeia/nasa1-400.jpg"
does not actually do anything.

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12509
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: Strange article image url

Post by brian » Mon Dec 06, 2021 3:56 pm

if you are only using images from your server then yes it doesnt really do anything. However if you are using the "new to J4" ability to have remote file storage this is where it would be defined etc
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

GreenDot
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Thu Dec 02, 2021 9:27 pm

Re: Strange article image url

Post by GreenDot » Fri Dec 10, 2021 10:19 am

brian wrote:
Mon Dec 06, 2021 12:53 pm
It is used for all images and its because of
1. the dimensions are required for lazyloading
2. joomla4 support the ability to load images from external sources such as dropbox etc

I have just updated the code that creates the sample data so that also includes the extra code
Interesting when u using dropbox or any other external source. I noticed that the code is automatically added. Is it also possible to turn it off?


Post Reply

Return to “General Questions/New to Joomla! 4.x”