Jump to content

There's a mysterious (to me) self-adjusting function for images...


codecruncher

Recommended Posts


Instead of a lengthy description, see it for yourself at
https://nordfront.se/barbara-spectre-vill-inte-ha-flyktingar-i-israel.smr :
Scroll page down to mid-altitude, click on the Twitter excerpt, then go from there.

Even if I hear that browsers nowadays are more capable than earlier versions, surely this effect must somehow be prepared (in the CSS?), according to my understanding.

The source text seems to consist of this:

<a href="[URL, ending with a long jpg file name ...]29920.jpg">
<img decoding="async" loading="lazy" class="size-DCG_Main_hc wp-image-70502 aligncenter"
src="[URL, ending with a long jpg file name ...]29920-295x200.jpg"
alt="[unimportant?]" width="295" height="200"/></a>

(The decoding part (async, lazy) appears to be without siginificance in this context, according to
https://www.js-craft.io/blog/what-does-the-html-image-decoding-async-attribute-do-and-how-can-it-help-us-to-improve-performance/ )

What does the rest mean? And the link is apparently absolute, although it is on their own website. Couldn't a relative link be used?

 

 

Link to comment
Share on other sites

There are two images. A small one embedded on the page and a large one that the link goes to.

In its most basic form it's just this:

<a href="large-image.jpg">
  <img src="small-image.jpg">
</a>

They might have server-side code which generates the image files when they create the article but there's nothing special happening in the browser.

Link to comment
Share on other sites

Thanks, this is interesting to see. What I've taken away so far (meaning, I don't fully comprehend it yet) is that it appears smarter to use just the jpg file in the a href, not the html address. 

I also see that a relative notation can be chosen, instead of the absolute one used on that site. (Maybe it's because they seem to use Wordpress, which is not my situation.)

Let me rest my case for the time being, I would come back if necessary - assuming I can?

 

 

 

Link to comment
Share on other sites

I made a little test: I picked a second such file, it did open upon clicking, but the the size was too big. See

So the result seems to be that the formula for the first jpg file (the one from Twitter) can also be applied to other 'similar' (overlong) jpg files.

Then I made another test: I resized the second file of mine to the same dimensions as the first one. Then also this second file reacted like the first, upon opening it. Until - I uploaded them to pro-mobile-internet.net What happened can be seen at (description on YT)

You find it by clicking on 'This' in the bold chapter (marked, see attachment).
 
Two steps forward, one step back? And still no idea what I'm doing.

 

1.jpg

Link to comment
Share on other sites

Meanwhile I have followed up on the issue and consider it solved - largely.

According to my impression, what remains to be clarified - apart from the fact that Firefox at times has problems to open such a file (see attachment) - would be this. Permit me to reword the matter, even if this may lead to a few repetitions.

So I happened to bump into an effect so far unknown to me: 'images whose size automatically adapts to the window'. See example:

Thus it is an overlong image filling the frame, but is too small to read it. Clicking on it, it (rather a scrollable excerpt of it) appears in a reasonable reading size.

I found that link too complicated, so I changed that to
<a href="bst.jpg" target="_blank">hier</a>,
then - to test it - moved it into the website folder: This way I reached the same result like there.

Then I made another overlong jpg file, although with different measures. There, it also worked - on principle, but due to its different size, the result was no longer satisfying. After having resized it to the dimensions found in the first file (I had qualms doing that), the result was practicably usable again. See
http://pro-mobile-internet.net/Talk_4G.jpg
But it does not fill the window, length-wise.

So the resizing part appears to be a little insecure. What I would like to achieve is, being able to always master this situation - overlong image files - reliably. A clarifying explanation might be all I need.

 

F9qtSQyXgAAJ5Eg.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...