Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Blogs (Footer)

Three latest blog posts for those interested in learning more about your industry.

Industries

  • Bicycles
  • Fitness & Supplements
  • Health & Beauty
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Animal & Petcare
  • Food & Beverages

Wireframe

Blog (Footer)

Coding Instructions

Step 1: Connect to your website via FTP

Step 2: Open up the Footer template

Open footer.template.html. This can be found in private > netosuite > Template > skeletal > footer > template.html. If using a different template, go into that template instead of the 'skeletal' template.

Open the template in using a text editor. We suggest either Sublime Text or Atom. Add a [%thumb_list%] at line 10, which is after the closing <div class="col-xs-12"> tag.

Step 3: Add a Blog Thumb List into template

Add the following code and save the template:

[%thumb_list type:'blogs' limit:'3' content_type:'blogs' sortby:'date_posted-desc'%]
    [%param *header%]
        <div class="col-xs-12 padding">
    [%/param%]
    [%param *body%]
        <div class="col-xs-4 padding">
            <div class="col-xs-12 col-sm-5">
                <img src="[%asset_url type:'content' id:'[@content_id@]'%][%param default%][%ntheme_asset%]img/default_product.gif[%/ntheme_asset%][%end param%][%/asset_url%]" alt="[@name@]" width="100%"/>
            </div>
            <div class="col-xs-12 col-sm-6">
                <h4><a href="[@url@]">[@name@]</a></h4>
                <small>[%format type:'text' maxlength:'70' rmhtml:'1'%][@content_short_description1@][%/ format%]</small>
            </div>
        </div>
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
    [%param *ifempty%]
        No Blogs Found
    [%/param%]
[%/thumb_list%]

The [%thumb_list%] generates a list of content based on the type specified in the parameters. These are the parameters used in the [%thumb_list%]:

Parameter Description
type Defines the type of product_filter that will be generated; e.g. blogs, brands, categories
limit Used to determine the maximum number of results to show before paging takes effect.
content_type Limits the thumblist to a specific content type.

Inside the [%thumb_list%], there are four [%params%]: header, body, footer, and if_empty. The body param loops through every item that matches the parameters that were defined at the top of the [%thumb_list%] and gives the html markup we define:

<div class="col-xs-4 padding">
    <div class="col-xs-12 col-sm-5">
        <img src="[%asset_url type:'content' id:'[@content_id@]'%][%param default%][%ntheme_asset%]img/default_product.gif[%/ntheme_asset%][%end param%][%/asset_url%]" alt="[@name@]" width="100%"/>
    </div>
    <div class="col-xs-12 col-sm-6">
        <h4><a href="[@url@]">[@name@]</a></h4>
        <small>[%format type:'text' maxlength:'70' rmhtml:'1'%][@content_short_description1@][%/format%]</small>
    </div>
</div>

We are using three B@se data tags here and a couple B@se function tags:

B@se Data Tags

<table class="table table-bordered">
<thead>
<tr>
<td>Tag</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>[@url@]</td>
<td>URL to the blog page.</td>
</tr>
<tr>
<td>[@name@]</td>
<td>The name of the blog post.</td>
</tr>
<tr>
<td>
[@content_short_description1@]
</td>
<td>
Short description fields are typically used in thumbnails or the header section of pages to provide a synopsis of the content. This can be found in the backend of the blog post in the cpanel of your Neto site.
</td>
</tr>
</tbody>
</table>

B@se Functions

asset_url

[%asset_url type:'content' id:'[@content_id@]'%][%param default%][%ntheme_asset%]img/default_product.gif[%/ntheme_asset%][%end param%][%/asset_url%]

This B@se function tag generates a path directly to the asset URL for the active theme. This checks if this blog post has a main image. If it doesn't, the path generated in the default param is used instead, which is using the [%ntheme_asset%] B@se function tag that loads the asset URL specific to the theme in use.

format

[%format type:'text' maxlength:'70' rmhtml:'1'%][%/format%]

This B@se function tag formats the content within the tag based on the tag parameters.

<table class="table table-bordered">
<thead>
<tr>
<td>Parameter</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>The type of format you wish to apply, each type has its own set of parameters that are specific to the type.</td>
</tr>
<tr>
<td>maxlength</td>
<td>Works with type text, limits the maximum amount of characters contained within the tag.</td>
</tr>
<tr>
<td>rmhtml</td>
<td>Works with type text, when true it will strip html.</td>
</tr>
</tbody>
</table>

In addition to the parameters above, we also have header, footer, and body. The header and footer param wraps around the body param. The header param opens a <div class="col-xs-12 padding">, the body loops through the sub categories, and the footer param closes the main col-xs-12 div.

At the end of the [%thumb_list%], there is an if_empty param:

[%param *ifempty%]
    No Blogs Found
[%/param%]

This will only show if the parameters we specified at the top of the [%thumb_list%] are not met. if_empty is used to tell the user that there are no blogs found and will show if there are no blogs posted on your Neto site.

Result

Now the footer should show a list of three blog posts that will display on every page.


1 related articles found: