You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#100500 Issue getting my images responsive

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by go-stories on Thursday, 11 July 2019 14:53 BST

go-stories
I have an issue getting my images responsive on our site go-stories.com
I did search the forum, but I cannot find the solution.

I followed the documentation on image manager extended, so, I have 3 different images, with 3 different widths
I have set them up in the responsive tab, with 1024, 800, 600 set up as W.

On my android phone, only the pic set up in the 'image' tab shows up with the width set up over there.
If I set it to 500W it becomes squeezed, if I set it with 350W, all fine.

As the next step, I took out the dimensions at the 'image' tab and now I get the responsive behavior that I want, but only with full-width pictures!
That is fine on the phone, but in the browser, the pics are now of course VERY big...

What am I missing?

Ryan
Please post a link to an article on the site containing the images.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

go-stories
And this is a copy of the page, now I have set the width on the 'image' tab to 600
In the browser all fine, on the phone, not..

https://go-stories.com/index.php/nl/blog/stroomuitval-anders-2

go-stories
Help?

Ryan
If you are using a Width Descriptor, eg: 800w, you need to set a Sizes value in the Responsive tab - https://www.joomlacontenteditor.net/support/documentation/image-manager-extended/responsive-tab#width-descriptor - eg: 50vw

Otherwise use a Device Pixel Ratio value to load a specific image for a specific device - https://www.mydevice.io/#compare-devices

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

go-stories
I understand and that is what I did, see enclosed files.

The problem is that it does not use the files set in the 'responsive tab', but the file and the width that is set in the 'image' tab.
Fine in the browser, but crunched on the phone...

Attachments

Ryan
The problem is that it does not use the files set in the 'responsive tab', but the file and the width that is set in the 'image' tab.


The file that you have set in the Image tab is the same as the file you have set for 600w.

You can remove the Source entry for 1024w as this is the same as the one for 800w. The 800w file will be used for widths of 800 and above.

Don't set a width and height value for the image in the Image tab. If you must set dimensions, only set a width value (remove the height value). The image will then scale responsively.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

go-stories
Well, setting only the width did the trick, tkx!

For the other tips, you are right, it got there trying out things to get it working, all repaired now!