Introduction

When customers receive shop e-mails, such as order confirmation e-mails, a shop logo is usually part of them. This support article provides several implementation options for managing logo images for e-mail templates.
Please have a look at the following sample order confirmation e-mail with the inTRONICS logo:

References

• https://docs.intershop.com/icm/7.10/olh/icm/en/operation_maintenance/topic_application_branding_management.html

• ISML Function - WebRoot()

• ISML Function - WebRootEx()

Manage Logo Images

There are three options for managing logo images. This can be done via the installation of a branding package ZIP file, directly in the static directories or via an external image server.

Install the Images via a Branding Package ZIP File

Logos can be installed as part of a branding package. For further information on managing branding packages, please see https://docs.intershop.com/icm/7.10/olh/icm/en/operation_maintenance/topic_application_branding_management.html.
Please have a look at the following structure of a typical branding package:

Store the Image in a Static Folder

Static content such as logo images is usually stored in the appropriate "static" folders of the project.
Therefore, it is possible to store the logo images in site-specific static folders (<cartridge>/staticfiles/share/sites/<site>/1/units/<unit>/static/<locale>/logoEmail.png) or in cartridge-specific static folders (<cartridge>/staticfiles/cartridge/static/default/img/logoEmail.png).

Manage Logo Images on an External Image Server

Logo images do not have to be kept on the ICM instance, but can be stored on an external image server.

Reference Logo Images in E-Mail Templates

Based on the image management approach in use, the logo images can be referenced in two different ways.

Logo Images Stored on the ICM Instance

In our standard, a logoEmail.png file is already referenced in standard ISML templates and is therefore displayed when installing it via a branding package.
For example, it is referenced in the MailHeader.isml template of the app_sf_responsive cartridge (app_sf_responsive/staticfiles/cartridge/templates/default/email/mailTemplate/MailHeader.isml) as follows:

<!--- Start Email Logo --->
<tr>
  <td class="logo" valign="top" style="padding: 0 20px 20px 0;">
    <ispipeline pipeline="IncludeBranding-GetBrandingInstallation" params="#ParamMap(ParamEntry('Hook_Image_Name', 'logoEmail.png'))#" alias="dict" />
    <isif condition="#isDefined(dict:BrandingInstallation:UUID)#">
      <!--- display: block avoids a space below the image in outlook --->
      <img style="display:block;" src="#WebRootEx('','','','','')#/branding/<isprint value="#dict:CurrentOrganization:OrganizationDomain:DomainName#">/img/<isprint value="#dict:Hook_Image_Name#">?brandid=#dict:BrandingInstallation:UUID#" alt="Logo" border="0" alt="" />
    <iselse>
      <img style="display:block;" src="#WebRootEx('','','','','')#/img/<isprint value = "#dict:Hook_Image_Name#">" alt="Logo" border="0" alt="" />
    </isif>
  </td>
</tr>
<!--- End Email Logo --->

If no logoEmail.png file is available, however, a fallback image directory is checked for the logoEmail.png file instead.
For further information on the WebRootEx() function used in the above example, please refer to the following documentation: ISML Function - WebRootEx(). Alternatively, the WebRoot() function can be used instead, see ISML Function - WebRoot().

Logo Images Stored on an External Image Server

Alternatively, logo images could be stored on an external image server and can then be referenced with a static URL in ISML templates via a standard HTML img element.
The following code block illustrates a sample implementation of this approach in an e-mail template such as the MailHeader.isml template. Please make sure to replace <URL_LOGO_IMG> with the full URL path of the logo image (e.g. https://intershop.com/img/logoEmail.png).

<!--- Start Email Logo --->
<tr>
  <td class="logo" valign="top" style="padding: 0 20px 20px 0;">
    <img src="<URL_LOGO_IMG>" alt="Logo" border="0" />
  </td>
</tr>
<!--- End Email Logo --->