Image Template

When you add an image to an area, it uses the standard Site Management Tools (SMT) image template, which determines how the HTML for the image gets written. When you add an image to a page using Site Management Tools (SMT), you can set a link (the URL the image should go to) and alternate text. Both settings are optional.

If you add a URL, the default image template makes the image a clickable link. When someone clicks it, they’ll go to the page the image is linked to. 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 don’t set a link, the template adds a standard image , 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 as-is or customize it to fit your needs.

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

Use this default template as a starting point for creating your own custom image templates.

             <% 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>
   <% } %>
<% }); %> 

        

The data-loader attribute in the template lets you control lazy loading. Meaning the image loads only when it’s needed. For example, if the image starts out off screen, it won’t load until someone scrolls down to it. Lazy loading helps long pages load faster. Setting the data-loader attribute to false turns lazy loading off, so all your images load as soon as the page loads. Setting it to true turns on lazy loading, so images are only loaded when they’re needed.

You’ll see some inline code blocks in the template that uses “<%- ... %>”. This is for security and helps prevent cross-site scripting. The hyphen following the opening <% escapes certain characters, converting them to HTML character entities. These characters include: & < > " ' /.

General Notices