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.

#112865 How to enable the responsive tab in JCE ditor in Joomla 4

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 Ryan on Sunday, 22 January 2023 11:53 GMT

johanv67
Hello,

I want to add responsive images in a Joomla 4 website, so that images resize on Mobile devices.
I see some articles about the responsive tab, but i can find it in the backend of Joomla.

Where / how can i enable it?

Another question, how can i make this as easy as posible for customers to upload and resize images so that they are always resposive?
Any tips?

Kind regards,

Johan van der Velde

Ryan
I want to add responsive images in a Joomla 4 website, so that images resize on Mobile devices. I see some articles about the responsive tab, but i can find it in the backend of Joomla.
The Responsive tab is available in the Image Manager Extended, which you can open from the editor toolbar. See below. https://cdn.joomlacontenteditor.net/tmp/112865-how-to-enable-the-responsive-tab-in-jce-ditor-in-joomla-4.gif The fields in the Responsive tab are used for setting alternate images to be used on different screen sizes (generally representing different devices), so for example you can load a smaller sized image for iPhones, larger images for Tablets, etc. Most images you insert into an article will automatically be "responsive", ie: they will resize for the device screen size and orientation, and don't need anythign else set for them. This is acheived by some css in your template stylesheet, which most templates already have, eg:

img {
    max-width: 100%;
    height: auto;
}

Ryan Demmer

Lead Developer / CEO / CTO

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

johanv67
Hi Brian,
Thanks for your help sofar!

When I click on the icon to insert a new image (see attachment JCE step 1 - arrow), I dont see the tab responsive (see attachment JCE-step2).
My question is, how can I enable the tab responsive in JCE?
Do I need to install an adition JCE extension like a plugin? I use JCE pro.

Kind regarsd, thank you in avance.

Johan van der Velde

Attachments

johanv67
Hello Brian,

As an reaction on part 2 of your answer, I use images that are larger then presented in the article.
For example if an image is 1000 x 667, I make it smaller and chanche it to 500 x 334. See attachment JCE Question 2.

Is this the right way to insert images, or are the not responsive anymore on this way?

Kind regards.

Johan van der Velde

Attachments

Ryan
[quotePost id="112867"]
When I click on the icon to insert a new image (see attachment JCE step 1 - arrow), I dont see the tab responsive (see attachment JCE-step2).
My question is, how can I enable the tab responsive in JCE? [/quotePost]

This is the core Image Manager button. If you have upgraded from JCE Core to JCE Pro, you will need to add the Pro buttons you require (like the Image Manager Extended) to the editor toolbar. Please see - https://www.joomlacontenteditor.net/support/faq/editor/pro-buttons-missing-after-upgrade

For example if an image is 1000 x 667, I make it smaller and chanche it to 500 x 334. See attachment JCE Question 2.
Is this the right way to insert images, or are the not responsive anymore on this way?


Yes, this is fine. The image will still be responsive if you insert it as a smaller size.

Ryan Demmer

Lead Developer / CEO / CTO

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