Image Template

This topic applies to

Applies to

SuiteCommerce Web Stores | Site Management Tools

Any image you add to an area uses the standard SMT image template. This template determines how the HTML code for the image is written. When you use SMT to add an image to a page, the two settings for the image are the Link, which is the URL to which you want to link the image, and the Alternate Text. Both of these settings are optional.

If you specify a URL for an image, the default image template constructs the hypertext link for the image. When visitors click the image, they are taken to the location specified by the link. The resulting link for the image might appear similar to this:

<a href="/shoppingcart"><img src="/shopflow/cms_assets/img/shoppingcart.jpg" alt="A photo of a shopping cart."></a>

If you add an image to an area and do not specify a link for the image, the image template constructs only the image tag for the image. The resulting image tag might appear similar to this:

<img src="/shopflow/cms_assets/img/shoppingcart.jpg" alt="A photo of a shopping cart.">

You can use the default image template file as is or you can customize the template file to fit your needs.

Default Image Template

The default image template is located in the file cabinet at:

Web Site Hosting Files > Live Hosting Files > SSP Applictions > NetSuite Inc. — CMS > CMS > [application name] > Published > Templates > image_default.txt

image_default.txt

<% if (data.fields.string_link) { %>
      <a href="<%- data.fields.string_link %>">
   <% } %>
   <img src="<%- data.fields.string_src %>"<% if (data.fields.string_alt) { %> alt="<%- data.fields.string_alt %>"<% } %> data-loader="false" />
   <% if (data.fields.string_link) { %>
      </a>
   <% } %>
<% }); %>

You can use this default template as a starting point for any custom image template you want to create.

data-loader

The data-loader attribute as displayed in the template file above lets you control lazy loading which means the image is downloaded and displayed only when needed. For example, if the image is off screen at the bottom of the page, it does not load in the browser until the visitor scrolls down to the area of the page that contains the image. This technique is often used on long web pages to make a page load faster. Setting the data-loader attribute to false, as in this template, disables lazy loading, and all images are loaded when the page loads. Setting the data-loader attribute to true enables lazy loading, and images are downloaded and displayed only as they are needed.

Note

NetSuite recommends setting the data-loader attribute to false to disable lazy loading so images always load when the page loads.


Escaping Characters

Notice in the template file that some of the inline code blocks are constructed as “<%- ... %>”. This is a security measure designed to prevent cross-site scripting. The hyphen following the opening <% tag escapes certain characters, converting them to HTML character entities. These characters include: & < > " ' /.