×
WYSIWYG editor in Kunena (forum) (14 Jan 2021)

I have upgraded Kunena and we are now using the build-in wysiwyg ck-editor.
If you have issues posting on my forum please contact me via the contact page.

No bug Change multiple images in a bootsrap row

More
4 weeks 2 days ago #1467 by Plau
Hi Ruud,

I am using Bootstrap to display 3 images in a row. For example, on the home page of www.kreuzfahrt-praxis.de at the top the first 3 images. I had hoped that your plugin adapts these images and displays, for example, in the mobile view a smaller image. Is it possible for your plugin to do this or am I making a mistake.

Thanks for an answer in advance.

Christopher
The topic has been locked.
More
4 weeks 2 days ago #1468 by Ruud van Lent
Replied by Ruud van Lent on topic Change multiple images in a bootsrap row
Hello Christopher,

that should work.
When i visit the site I do not see that ochResponsiveImages is enabled on that page, when I goto an article it is.

Can you check that it is enabled on the frontpage?
The topic has been locked.
More
1 week 2 days ago - 1 week 2 days ago #1507 by Plau
Replied by Plau on topic Change multiple images in a bootsrap row
Hello Ruud,

Thank you for your answer. Apparently I load ochResponsiveImages on the start page too late. I am trying to fix the error.

I have a supplementary question about this.
On the page www.kreuzfahrt-praxis.de/kreuzfahrt-ziel...-sehenswuerdigkeiten there are two images on top. ochResponsiveImages works so far, but I would have thought that in the desktop view not the 1200px image is displayed but the 575px image. Is this a problem with the image embedding or can ochResponsiveImages not do this?

Many greetings

Christopher

Attachments:
Last edit: 1 week 2 days ago by Plau.
The topic has been locked.
More
1 week 2 days ago #1508 by Ruud van Lent
Replied by Ruud van Lent on topic Change multiple images in a bootsrap row
Hi Christopher,

ochResponsiveImages creates img srcsets: a set of images with widt / heigth as configured in the breakpoint.

The power, but also the 'mistery' of img srcsets is that the visitor his browser decides which image to actually download and use for displaying.
It does this on screen size, but also on css style settings.

modern devices might have a higher dpi for the screen then other devices. That means that where one device would load e.g. the 300px image to show, the device with a dpi of 2 would automatically load the 600px version: it displays the image with the best quality for the screen.

ochResponsiveImages cannot control the decision making process of the browser, all it can do is server srcsets where the browser can pick from.

That said. In your example ochResponsiveimages creates multiple size images but on the image itself you have set a 'hard' css style: width: 1200px height: 675px.
Basically you instruct the browser to take that image.
When viewing on a small screen you see it will load the smaller image (768px on a mobile with dpi 2)

Does this answer your question?

regards,
Ruud.
The topic has been locked.
More
1 week 1 day ago #1509 by Plau
Replied by Plau on topic Change multiple images in a bootsrap row
Hello Ruud,

Thank you very much for your detailed answer.

I have removed the 'hard' set css style: width: 1200px height: 675px., but the browser still uses the 1200px photo. Is this as you say a browser issue or a problem I can fix or a bug from ochResponsiveImages?


Regards,

Christopher
The topic has been locked.
More
1 week 1 day ago #1510 by Ruud van Lent
Replied by Ruud van Lent on topic Change multiple images in a bootsrap row
Hello Christopher,

This is not a bug of ochResponsiveImages, let me explain:

when ochResponsiveImages runs, it finds two images and creates img srcset for them.
The img srcset is correct at the time ochResponsiveImages handled them.

So the webpage is rendered with the correct img srcset in it.

but....

what happens then is that the visitor of your website loads the page and loads the page / template css (in your case bootstrap)
the displaying of the image are now 'changed' client side because of this css: the images are displayed smaller because they must fit in two columns (<div class="col-12 col-md-6">).

Bootstrap doesn't change the img srcset to reflect these change.

when you remove the col-md-6 from the div around the images, then you see that indeed the 1200px choice from the img scrset is the correct one.

Complex stuff :)
The topic has been locked.
More
1 week 1 day ago #1511 by Plau
Replied by Plau on topic Change multiple images in a bootsrap row
Hi Ruud,

If I understood correctly, then ochResponsiveImages "only" adjusts the image sizes based on the screen resolution. This is good if you want to display one image per column but not if you want to display multiple images per column. Like in my case.

Somehow it should be checked if the image should fill e.g. one column or half a column and then the image should be provided in a different resolution to speed up the page load. But I think there is no solution for this at the moment or is there?


Greetings

Christopher
The topic has been locked.
More
1 week 1 day ago #1512 by Ruud van Lent
Replied by Ruud van Lent on topic Change multiple images in a bootsrap row

Plau wrote: Hi Ruud,

If I understood correctly, then ochResponsiveImages "only" adjusts the image sizes based on the screen resolution. This is good if you want to display one image per column but not if you want to display multiple images per column. Like in my case.

To be more precise, it creates image sizes you configure as breakpoints: it doesn't do anything with screen sizes as that is client side and that information is not available server side (where ochResponsiveImages (and your Joomla) runs

Somehow it should be checked if the image should fill e.g. one column or half a column and then the image should be provided in a different resolution to speed up the page load. But I think there is no solution for this at the moment or is there?

That is impossible. The sizing of the image can be done anywhere on the page, on the elements or via css files (multiple). The only way to overcome that is to use JavaScript as that runs client side after the page was handled and styled. But that is like putting a bigger motor in your F1 car after the race was done: it would only slow down your site and JavaScript is not always enabled in browsers: it is not enabled in Google crawler > so even if this would work, Google could not see the results.

To add to the complexity described above: on desktop the images are side-by-side, on tablet / mobile the images are full width: so the styling of the image is also dependent on device.

So we can only work with the information we have available server side: sizing of the image on the image element is handled by ochResponsiveImages. Everything that is run client side (like template and css files styling the page) is client side.

So for desktop you currently get rewarded by google for implementing img srcsets (Google knows about the 'short comings') and for using best-practise webp image format. An more important factor for google is mobile view: you are fully okay here :)
The topic has been locked.
More
1 week 1 day ago #1513 by Plau
Replied by Plau on topic Change multiple images in a bootsrap row
Hello Ruud,

thank you very much for your detailed answer.

Greetings

Christopher
The topic has been locked.
More
1 week 1 day ago #1514 by Ruud van Lent
Replied by Ruud van Lent on topic Change multiple images in a bootsrap row
Thank your for having me review the logic :)

As with every extension, there are so many use cases (templates / css / etc. in this case) that it will always be a compromise on what it can and will do.
I always strive for security, speed, maintainability and best 'compromise' for the most use cases (where the most benefit is). with every additional 'exception' / feature you introduce it will add to the complexity > maintainability > speed > security. So decisions need to made carefully, discussions like these help me a lot!

If you have any other questions or suggestions feel free to open a new topic.
Will be closing this one.

regards,
Ruud.
The topic has been locked.

End of content

No more pages to load

Log In or Sign Up

Forgot your password? / Forgot your username?