Distorted Images - Tickets

Smart CRM & Sales Hub CRM
1

When I upload the image via API, the image is distorted. How can I solve it? I saw in some topic to use “?noresize”, but I don’t know how use that, when I try used not works…

Inkedex01.jpg
Inkedex01.jpg596×554 82.7 KB

When click to edit :

ex02.jpg
ex02.jpg583×569 59.1 KB

Minah_1-1655738186213.png

2

Hi @Minah,

Thanks for reaching out!

I’d like to invite some of our experts to this conversation to share their recommendations.

Hey @stefen, @piersg, @JonPayne, @Sjardo - Do you have any advice for @Minah?

Thanks!

Best,

Kristen

3

Hi,

Images uploaded to the filemanager, manually or trough the API, are automaticly compressed by HubSpot. When inserting an image within a module, you can choose to set the quality you like. If you load it directly from an URL (like you seem to do now), there is in my knowledge no way to improve the quality besides rendering the full image and upload an image good quality.

4

What do you recommend I do?

5

Hi @Minah,

It looks like i read your question the wrong way. I thought you had questions about the quality, but it looks like it indeed is about the distortion.

The distortion happends when you strecht an image in a way that is no longer it’s default width X height.

From my point of view, you have set an width of 500px to the email and 300px hight. The image itself is 768px width and 1360px height.

HubSpot injects some inline stylesheet in certain situtations that gives the image an max-width of 100% (in this case, 300px), but it remains 768px height. Thats why it’s stretcht out in height.

My best guess is to do one of the following:

  • remove the inline styling that only happends in the output
  • Insert an image that has an maximum width of 500px so it can’t distord.

This is my best guess!

6

It’s only happens when edit content, when I disable max-width the image stay perfect. How can I replace this?
My style appears before I click edit.

Minah_0-1655930936535.png

Minah_1-1655931149169.png
Minah_1-1655931149169.png564×349 55.4 KB

7

Hi,

if you do not include the inline styling trough hubspot, you can overrule this by setting some extra css:
.timeline-item-engaements img {max-width: initial !important}
- It is NOT recommanded to use !important statements within css, but sometimes, if you can’t reach the source, you have to :slightly_smiling_face:

8

This css .timeline-item-engaements belongs Hubspot.. I can edit it? How I can do that?