Images appear stretched

Question

Hi,

I have implemented Customer notifications template and after doing so images that are inserted in a comment comes through on the email as stretched.

I am currently testing different scenarios but just to raise the question here in case someone has an answer

Thanks

Ian

Ian Robinson · Answer

I go to Customer Notifications, Edit Templates the 'See Example Templates' I follow the guide and go to the site they suggest for the example HTML/CSS, I copy this directly into my Customer notification HTML and CSS Below we can see the Preview is applied I go to ym project where I have to nice pictures of a horse, one is a small image and one is a large. Both appear as stretched in the email HTML Static Template

Reply above this line.

${message.content}

View request

CSS body { background: #fafbfc; color: #091e42; font-family: "Arial", sans-serif; font-size: 16px; line-height: 1.4; } a { color: #0052cc; text-decoration: none; } img { width: 20%; } .template { background: #ffffff; margin: auto; width: 550px; border: 3px; padding-bottom: 30px; border-radius: 4px; } .center { padding-bottom: 30px; } .container { text-align: center; } .header { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 8px; height: 176px; background: url("https://nimbus.atlassian.net/images/header.png"); justify-content: center; background-size: contain; } .button { background: #172b4d; color: white; padding: 10px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .jsd-message-content { margin-bottom: 30px; margin-top: 10px; width: 80%; margin-left: auto; margin-right: auto; } .jsd-issue-link { color: #0052cc; text-decoration: none; } .jsd-unsubscribe-link { color: #0747a6; font-size: 12px; text-decoration: underline; } .jsd-link-separator { padding: 0 10px; } .jsd-request-sharedwith { color: #758195; font-size: 12px; } .jsd-servicedesk-link { color: #707070; font-size: 12px; text-decoration: none; } /* Applied to reply stripping marker, when incoming email is enabled. */ .jsd-reply-marker { color: #999999; } .jsd-reply-marker-hint { color: #999999; margin-bottom: 30px; font-size: 14px; } .jsd-activity-item-separator { border: none; border-bottom: 1px solid #cccccc; } .footer { border-top: 1px solid #b3b9c4; margin: auto; width: 60%; padding: 10px; text-align: center; }

Ian Robinson · Answer

I go to Customer notifications then Click on See Example Templates Then > Get started with this sample customer notification by copying the sample CSS code I Copy the HTML and CSS from the example site. It shows in the Preview. I insert the image in a reply on a ticket and below is how it comes through I know this is most likely a HTML/CSS issue but I can't spot it, if it is then it means the example that Atlassian links to are potentially wrong. HTML Static Template

Reply above this line.

${message.content}

View request

CSS body { background: #fafbfc; color: #091e42; font-family: "Arial", sans-serif; font-size: 16px; line-height: 1.4; } a { color: #0052cc; text-decoration: none; } img { width: 20%; } .template { background: #ffffff; margin: auto; width: 550px; border: 3px; padding-bottom: 30px; border-radius: 4px; } .center { padding-bottom: 30px; } .container { text-align: center; } .header { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 8px; height: 176px; background: url("https://nimbus.atlassian.net/images/header.png"); justify-content: center; background-size: contain; } .button { background: #172b4d; color: white; padding: 10px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .jsd-message-content { margin-bottom: 30px; margin-top: 10px; width: 80%; margin-left: auto; margin-right: auto; } .jsd-issue-link { color: #0052cc; text-decoration: none; } .jsd-unsubscribe-link { color: #0747a6; font-size: 12px; text-decoration: underline; } .jsd-link-separator { padding: 0 10px; } .jsd-request-sharedwith { color: #758195; font-size: 12px; } .jsd-servicedesk-link { color: #707070; font-size: 12px; text-decoration: none; } /* Applied to reply stripping marker, when incoming email is enabled. */ .jsd-reply-marker { color: #999999; } .jsd-reply-marker-hint { color: #999999; margin-bottom: 30px; font-size: 14px; } .jsd-activity-item-separator { border: none; border-bottom: 1px solid #cccccc; } .footer { border-top: 1px solid #b3b9c4; margin: auto; width: 60%; padding: 10px; text-align: center; }

Jehan Bhathena · Answer

Hi @Ian Robinson ,

have u created a custom notification using the automation? Or via the Events?

Perhaps a little more details to how the comment is being sent to the customer will help reproduce the behavior first, based on which we can build ahead.