ttc-freebies / plugin-responsive-images

Responsive images for Joomla! articles (com_content)
https://responsive-images.dgrammatiko.dev
GNU General Public License v2.0
87 stars 9 forks source link

Displaying Error / 4.2.7 should fix this problem. #556

Open torstenhoppe opened 10 months ago

torstenhoppe commented 10 months ago

Sorry for my delay, but it won't work for me. When Content - Responsive Images is activated I can't enter my dashboard in the backend - the Error-Message is: 0 Class "Imagick" not found. And the same issue is frontend, the complete website is not shown.

Bildschirmfoto 2023-11-09 um 13 03 59 Bildschirmfoto 2023-11-09 um 13 05 35

4.2.7 should fix this problem. If not please reopen this issue

Thanks

Originally posted by @dgrammatiko in https://github.com/ttc-freebies/plugin-responsive-images/issues/541#issuecomment-1773480134

torstenhoppe commented 10 months ago

Maybe it is a problem with my server configuration. I will check this out next couple days and will report again.

torstenhoppe commented 9 months ago

Hi there, just a little late, but it was'n possible earlier. So for me it's not working in version 4.2.7. In the meanwhile I updated my system to Joomla 5.0.1 my webserver is NGINX 1.25.3 with PHP 8.2.12 and MySQL 8.2.0.

For a better understanding I'd like to reply my problem again: In Joomla Backend I created a custom admin modul with a simple HTML table with 2 colums. The first is just coms text and 2nd is a picture. Inside the editor I can define some parameters for this picture, espacialy the width and height. When I deactivate the plugin the HTML-Code is:

<img style="display: block; margin-left: auto; margin-right: auto;" src="../images/path/picture.png" width="300" height="149" loading="lazy" data-path="local-images:/path/picture.png">

231129-01

But when I activate the plugin it seems not interpreting this paramaters as expected. The HTML-Code is:

<picture class="responsive-image">
<source type="image/webp" srcset="/media/cached-resp-images/path/picture_1920.webp?version=xyz 1920w, /media/cached-resp-images/images/path/picture_1600.webp?version=xyz 1600w, /media/cached-resp-images/images/path/picture_1200.webp?version=xyz >

<source type="image/png" >
<img decoding="async" style="display: block; margin-left: auto; margin-right: auto;"
src="/images/path/picture.png" width="3448" height="1714"
loading="lazy" data-path="local-images:/path/picture.png">
</picture>

And here it takes the original width and height of the image and doesn't interpret the parameter that I captured in the form (see screenshot)

dgrammatiko commented 9 months ago

espacialy the width and height

The width and height are automatically extracted from the original image. The reason is that these values are there so the browser could calculate the pre-rendered area and not to set the size of the image. The whole idea with responsive images is that you set a container size and then the image will render inside it with a width 100% and height auto. So, in your case wrap the image in a div with a class (or inline style) to set the preferred size

About the size part: the calculated aspect ratio in the 1st case is width/height = 300/149 = 2.013 in the case of responsive images is width/height = 3448/1714 = 2.011 So, essentially the aspect ratio is the same

torstenhoppe commented 9 months ago

Yes I understand, but if I have adjusted the values within the editor, then I expect them to be applied and not recalculate the original values from the size of the file, right? The problem is still that I get a much too large display of the image - which I did not expect.

dgrammatiko commented 9 months ago

then I expect them to be applied and not recalculate the original values from the size of the file, right?

Nope, the size are always reflect the given image size, that's by design

then I expect them to be applied and not recalculate the original values from the size of the file, right?

Could you send me the generated html for the module at d.grammatiko at gmail dot com?