widgetfactory / jce

JCE - A Content Editor for Joomla
https://www.joomlacontenteditor.net
GNU General Public License v2.0
35 stars 12 forks source link

JCE core does not add height, width and loading attributes to images in Images and Links tab or custom media field in J4 #117

Closed Scrabble96 closed 1 year ago

Scrabble96 commented 1 year ago

I am using Joomla 4.2.9 and JCE 2.9.34 Core

Describe the bug J4 introduced code so that when adding images in the 'Images and Links' tab and to custom fields of the type 'Media' to an article or custom module it also adds the 'height', 'width' and 'loading="lazy"' attributes.

It works correctly using TinyMCE.

It does not work correctly if: a. Using JCE Editor b. TinyMCE is the default editor and JCE Editor is installed but disabled

To Reproduce Steps to reproduce the behaviour: For images in "Images and Link" tab:

  1. Open an article
  2. Click on Images and Links tab
  3. Click on the Green 'Select' button and select an image to insert. (Unless this is a blog article, it's best to test with a 'Full Article Image' rather than 'Intro Image').
  4. The resulting image URL is something like "images/banners/osmbanner1.png"
  5. On the front end, the html is <img src="/images/banners/osmbanner1.png" itemprop="image">

Expected behavior It should be images/banners/osmbanner1.png#joomlaImage://local-images/banners/osmbanner1.png?width=468&height=60

Which would then, using a few links of core JavaScript, translate to front-end html of: <img src="/images/banners/osmbanner1.png" itemprop="image" alt="test image" loading="lazy" width="468" height="60">

For media field, it is much the same process:

  1. Open an article that uses a custom field of type 'Media'
  2. Click on the 'Fields' tab
  3. Scroll to the Media field

Additional Information After inserting the image, click on the field with the image url, then inspect the code in developer tools and click on the 'Event' button. When inserting an image with JCE there are about 21 different events happening. When inserting an image with TinyMCE (and no JCE installed) there are only 3 events happening. See screenshots:

Screenshots With JCE:

Intro-image-inserted-with-JCE

With TinyMCE: Intro-image-inserted-with-TinyMCE

Desktop:

ryandemmer commented 1 year ago

Fiexed in commit - https://github.com/widgetfactory/jce/commit/f8150e246de16ff797d016889cb30f3dd40f1df6 and https://github.com/widgetfactory/jce/commit/d0ec0f0fed9551cdf6db895a590d2c5120df28a7

The fixes will be included in the next update.

Scrabble96 commented 1 year ago

Thank you.