Order Confirmation Email Images Too Big

[ESheaffer]

When we receive the order confirmation emails, the images that are showing the items that were purchased are way too large, 3 images take up one whole page. Our customer service person has to resize every image on the email when we print it out in Word.

I thought there was a line of code somewhere (which I know nothing about code, or how to code) that limited the size those images can be on the confirmation emails.

[ESheaffer]

Update:

I was in a chat with 3dcart and they told me that the images that show up on the Confirmation Emails are pulled from the Dropdown Image on our Options tab, which are large images. We just use the same images on the dropdowns as the main images on the Images Tab. They said that we will need to upload new, smaller images just to be used for the dropdown image on the Options tab.
That however would be a huge undertaking, we have so many items and images.....

But still though... I thought that someone told me or I read somewhere that there should be a line of code somewhere that says even though the images are large, they should be limited or restricted to a certain smaller size for those emails for this reason.

Anyone have any idea?

[DeanP]

I don't have a fix for you, and I don't mean to be critical, but, do you need those images in the email? You can just remove the image code from the email template.

[ESheaffer]

Thank you for your response, I guess there isn't a way to restrict the image size, only to upload and use smaller images for the dropdowns.

I will talk to our production and packaging team to see if the images are absolutely necessary, or if they can get by without the images being on there.

In case they do not need the images, would you be able to tell me where and what code to delete?

[celebra1]

I have not altered that area, but if I did, I'd first try adding a "size limiter" code first. What I have in order confirmation is:

<td width="9%"><!--START: thumbnail-->
<img src="[store_url]/[thumbnail]">
<!--END: thumbnail--></td>

I would try changing it to this:

<td width="9%"><!--START: thumbnail-->
<img src="[store_url]/[thumbnail]" width="50" height="50">
<!--END: thumbnail--></td>

[ESheaffer]

I have not altered that area, but if I did, I'd first try adding a "size limiter" code first. What I have in order confirmation is:

<td width="9%"><!--START: thumbnail-->
<img src="[store_url]/[thumbnail]">
<!--END: thumbnail--></td>

I would try changing it to this:

<td width="9%"><!--START: thumbnail-->
<img src="[store_url]/[thumbnail]" width="50" height="50">
<!--END: thumbnail--></td>

Thank you for this, we will definitely give this a shot tomorrow. Would be a great easy fix to this annoying problem.

To answer DeanP solution, our production and processing people said they rely on the images, just makes it easier on them when fulfilling the orders, so we need to keep them on there.

[celebra1]

If that works for you, create a class for that style and substitute that for the text in red: class="email-image". Inline coding is to be avoided.

[ESheaffer]

If that works for you, create a class for that style and substitute that for the text in red: class="email-image". Inline coding is to be avoided.

I know basically nothing about coding, so Im not really sure what you mean here unfortunately...

I changed the width and height numbers that were already there to 45 I think, you can click on the preview button to see how large the images are.

Before I changed it, the preview showed the huge images that we were getting on the real emails, and after I changed it, the images preview much smaller how we wanted them to. So hopefully this fixed it, we are just waiting for an order to come through now to see if they are indeed smaller now.

Thanks again though for that code you showed me.

[cwnoah]

Hi celebra1, above you say "Inline coding is to be avoided.". I Googled it and I think I understand what you're saying, but for us web programming neophytes, could you elaborate a bit about what it is and why it should be avoided?

[JR123]

Had the same issue on Friday. Contacted Shaun thecartdesigner and he was able to get it looking right again. No idea what he did, but it is possible to fix (and he knows how).

[celebra1]

cwnoah There are a number of reasons to avoid inline coding. The web uses stylesheets. Styles should be in the stylesheet. The main purpose of stylesheets is to organize your styles in ONE place. Once you create a style it can be used site-wide. It saves a lot of writing, overall reduces page load times, etc. The web requirements are currently html5, but will evolve to xhtml, where inline styles are not acceptable. Learning html5, at the minimum, is a good idea. Check out W3C School for instruction.

There are several ways one could tackle the image size issue. I presented the easiest one that most novices to coding could try.

[cwnoah]

celebra1, I see what you're saying. It's just so tempting to put the style code right where it's needed, especially if it's not going to be used anywhere else. It leaves only one file to document, back up and modify. It's a hard habit to break, particularly considering the type of programming I've been doing the last 36 years. Your caution about xhtml is well taken, though. Do you have any idea about when the requirements will change to xhtml?

I have a 3 column header on my home page, and I have put the style code in home.html. I know - 20 lashes with a wet noodle! I've put the code below, with some snipped out to make it easier to read. Would I just move the style code to the bottom of default_modified.css or would I need to do something more so the html code would use it?

<!-- Begin Mod Add 3 Column Top Banner new code added Charlie Noah 11-27-15 -->
<style type="text/css">
#bannerleft {
float: left;
padding: 0px;
top: 0px;
width: 240px;
}
#bannercenter {
float: left;
padding: 0px;
top: 0px;
width: 400px;
}
#bannerright {
float: right;
padding: 0px;
top: 0px;
width: 240px;
}
</style>

<!-- Start top banner -->

<div id="bannerleft">
<!-- Start replaceable panel block -->
<!-- _________________________________ Why Shop Here? ________________________________ -->

<!-- Code snipped for clarity -->

<!-- End replaceable panel block -->
</div>

<div id="bannercenter">
<!-- Start replaceable panel block -->
<!-- ___________________________________ February Is National Bird-Feeding Month __________________________________ -->

<!-- Code snipped for clarity -->

<!-- End replaceable panel block -->
</div>

<div id="bannerright">
<!-- Start replaceable panel block -->
<!-- ______________________________________ Birding Tips _____________________________________ -->

<!-- Code snipped for clarity -->

<!-- End replaceable panel block -->

</div>
<!-- End Mod Add 3 Column Top Banner new code added Charlie Noah 11-27-15 -->

[celebra1]

Since your site is rendered left to right, top to bottom, and since the last style applies, add it of the bottom of your default modified css. Then go back and reference the section with your class="style-name"

As far as xhtml, it probably will take a while before it is required. YEARS ago, I was told that we'd be using xhtml transitional as the norm by 2005. It was 2015 before html5 became the norm. xhtml is a superior programming. I'm sure there is a lot of resistance to an upgrade to xhtml. Most website templates would need to be re-written (again).

[cwnoah]

Thanks! I'll do that tomorrow morning. I'm also going to do some research on xhtml. I can probably find these things out, but can html5 and xhtml be mixed? Does 3dcart support xhtml?