Since the update from Joomla 4.xx to 5.0.00, when editing an image in the frontend and/or backend via insert/edit image in TinyMCE, the existing image is not updated but a new image is created with the new settings next to the existing image. So the existing image is not edited, and the edited image comes as duplicate. The old image must then be manually deleted from the source code.
The exsisting image should be updated.
The image with edited parameters appears left to the old image, and the old image can only be removed via the code-editor.
Joomla! 5.0.1 Stable [ Kuboresha ] 28-November-2023 16:00 GMT
Database msql 10.11.4-MariaDB-1:10.11.4+maria~deb11-log
PHP-Version 8.2.12
Webserver Apache
Labels |
Added:
No Code Attached Yet
|
Title |
|
Labels |
Added:
bug
|
Can replicate. First store your article. Then re-open, mark the image, activate the edit image button and change size or anything else.
Thanks for your replies.
Please see attached screenshots - sorry they are in German language settings:
Select the image you want to edit, select insert/edit Image:
Edit parameters or settings and safe:
The result is the edited image left to the old image:
While the existing image should be edited, i got two....
Same here. I updated yesterday to 5.0.1. @Bullenwaechter is your Joomla Version 5.0.0 or 5.0.1?
My actual Joomla verstions 5.0.1,
Really strange. On a fresh Installation I too cannot replicate the issue.
But on a site which is migrated and updated many times AND not for newly added images but only for older ones.
one of the sites I tested on has been upgraded all the way from 3.0
That got me thinking that perhaps it was s9omething to do with old images just using native html syntax and when you edit/save it gets the new syntax with the extra attributes so I went back to an article from 2008 and tried to edit the image. But sadly for you it edited as expected.
<p><img class="float-none" style="float: right; margin: 10px;" title="Ladeschreiben" src="images/Galerie/2023_Feldlager/Ladeschreiben" alt="Ladeschreiben" width="250"><img style="float: right; margin: 10px;" title="Ladeschreiben" src="images/Galerie/2023_Feldlager/Ladeschreiben" alt="Ladeschreiben" width="300" border="0"></p>
This is the code after editing the image from 300 px width to 250 px width, storing the article and displaying the code.
Different sites on different hosters. Not all images are affected but most of them.
Here an example from my local development environment with a migrated database.
The result after editing the image is:
<figure class="image"><img src="images/gastro-gm/h2ostr1fa1.jpg" width="267" height="267" class="float-none" style="float: left; margin: 12px;">
<figcaption>Caption</figcaption>
</figure>
<p><img src="images/gastro-gm/h2ostr1fa1.jpg" style="margin: 12px; float: left;" caption="false" width="267" height="267">
what was the code BEFORE editing
Hello brianteeman
in my case:
<p><img style="float: right; margin: 10px;" title="Ladeschreiben" src="images/Galerie/2023_Feldlager/Ladeschreiben" alt="Ladeschreiben" width="300" border="0"></p>
<p><img src="images/gastro-gm/h2ostr1fa1.jpg" style="margin: 12px; float: left;" caption="false" width="267" height="267">
But I could not recognize a pattern
Maybe it is something with the style="float.
The old images seem to have all this style attribute
anything in the js console?
Who knows where the editors copy/pasted this code over the years. Console says "image not found".
Here another example from another site: console says "image not found"
The code of the copy (show caption was selected)
<figure class="image"><img src="images/justizplast_ausstellungklein.jpg" title="Justizpalast: entrance to the exhibition" width="300" height="400" class="float-none" style="margin-bottom: 10px; float: right; margin-left: 10px;" alt="Justizpalast: entrance to the exhibition">
<figcaption>Caption</figcaption>
</figure>
The code of the original
<p><img style="margin-bottom: 10px; float: right; margin-left: 10px;" title="Justizpalast: entrance to the exhibition" src="images/justizplast_ausstellungklein.jpg" alt="Justizpalast: entrance to the exhibition" width="300" height="400"></p>
the message that the image is not found explains why you get the second image inserted. just need to find out why it doesnt find the image
Could be a parsing error due to the style float? Obviousely the image exists and I see that all images which cause the error have style="float ..
unable to replicate. are you sure you selected the image when you tried to edit