HTML area - image scaled wrong

Help
1

Enonic version: 7.4.0
OS: Windows 10

Hi,
I am having a hard time to workaround this wrong picture visualization. The picture is pasted inside HTML Area in content type. When i paste it in the angular InnerHTML (witch till now works with HTML Area perfectly) the img is scaled wrong. I Already tried to change the css to set all img for some size, but it did not work. I also tried to set custom width (content in %), which also did not seem to change it in any ways.

Screen if the wrongly scaled pic on website.

image
image734Γ—660 39 KB

query used for getting pic from Enonic:
’ … on com_gksoftware_es_esintranet_Benefit {\n’ +
’ data {\n’ +
’ title\n’ +
’ content(processHtml:{type:absolute})\n’ +
’ icon {\n’ +
’ … on media_Image {\n’ +
’ mediaUrl(type: absolute, download: false)\n’ +
’ }\n’ +
’ }\n’ +

(Wanted to include pic in Enonic content viewer, but i can post only 1 img)

Thank you,
Martin

2

Hi @Brozek,

Did you get this figured out? In order to try to solve the issue we need to see the generated imageUrl and also what kind of CSS you apply to it on the client. Ideally, we need the image file as well. Basically, everything to be able to reproduce the issue on our side.

3

Hi @Alan,

Unfortunately not. Ok, gonna try to add anything useful.
Image is inserted in html area, that with our query (in description above), creates this answer under data and content :
<figure class=\"captioned editor-align-center editor-style-original\" style=\"margin: auto; width: 60%;\"><img alt=\"mamut_naty_internety.jpg\" src=\"http://gkr-show-server2.qa.gk-software.com:8080/site/default/draft/intranet/_/attachment/inline/1283659e-1d15-41bc-85d6-01f1305f248c:02fb787d62d9b0e99866df2572e530254f484206/mamut_naty_internety.jpg\" />\n<figcaption>Mamut časovÑ osa</figcaption>\n</figure>\n\n<h3 style=\"text-align:justify\">
this is just a part of that answer from enonic but it seems to have all the crucial info for the img.
CSS:

image
image605Γ—268 4.95 KB

The img is injected as part of an html area through angular InnerHTML β†’ so it should have css set from the enonic html area.

Thank you so much and sorry for this late response,
Martin

4

@Alan
This is the pic:

mamut
mamut1187Γ—593 37.2 KB

I can only add one picture in my response, so will add more responses

5

@Alan
Here is pic as the img is set in enonic as well. (If you need i can also add the xml data type of this)

image
image702Γ—460 37.4 KB

Last part. :slight_smile:

6

Thanks for your response! Do you also have a link to the actual frontend page where you use the URL of the incorrectly scaled image?

7

Sorry but i do not have that. Since it’s internal company website, the only allow access is through company vpn.

8

@Alan
Hi,

did you find the bug that caused it or something i could try to change to fix it on my side?

I also could fix it temporarily by uploading the image smaller. (But it may inflict some damage to responsiveness of the website)

9

Hi @Brozek,

Sorry for the delay. Yes, we have found the issue and registered it here. Will be fixed in the next release of Content Studio.

Until then you can temporarily fix it by applying β€œwidth: 100%” to the <img> element, either via your stylesheets (best option) or inline when you set innerHTML.

1 Like