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 (Home)

Three blog posts, to provide useful info related to your product range. Each blog contains a summary of the actual content, allowing the user to decide whether they want to click to read the full article.

Industries

  • Bicycles
  • Computers & Electronics
  • Fitness & Supplements
  • Health & Beauty
  • Music & Instruments
  • Gifts
  • Toys & Games
  • Animal & Petcare
  • Arts & Crafts
  • Events & Party Supplies
  • Food & Beverages

Wireframe

Blogs home

Coding Instructions

Step 1: Add the thumb_list code into the home page template

Open the home page template: /assets/themes/THEME-NAME/cms/home.template.html

If the blogs are set up using a hierarchy - for example the blogs are children of "Our Blog" (see below) - the following code will need to be used:

Blog home cPanel

[%thumb_list type:'content' content_type:'blog' template:'blog' show_next_level:'1' limit:'3' sortby:'date_posted-desc'%]
    [%param *header%]
        <hr/>
        <h2 class="text-center">Our Blog</h2>
        <div class="row blog-thumbs">
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/thumb_list%]

Notes About The Above Code

  • show next level: '1' skips over the parent "our blog" page, and shows all children.

If the blogs are that you want to show don't have a parent like the example above, you'll need to use the following code:

[%thumb_list type:'content' content_type:'blog' template:'blog' limit:'3' sortby:'date_posted-desc'%]
    [%param *header%]
        <hr/>
        <h2 class="text-center">Our Blog</h2>
        <div class="row blog-thumbs">
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/thumb_list%]

Step 2. Create a new blog thumb template

Create a new template under /assets/themes/THEME-NAME/thumbs/content called "blog.template.html", and paste the following code into it:

<div class="col-xs-6 col-md-4" itemtype="//schema.org/Article">
    <a href="[@URL@]" itemprop="url"><img src="[%ASSET_URL type:'content' id:'[@content_id@]' default:'[@config:imageurl@]/pixel.gif'%][%/ASSET_URL%]" alt="[@content_name@]" class="blog-img"/></a>
    <h4 class="text-center"><a href="[@URL@]" itemprop="url">[@content_name@]</a></h4>
    <p>[%format type:'text' maxlength:'255'%][@content_short_description2@][%/format%]</p>
    <a href="[@URL@]" class="btn btn-default btn-block" itemprop="url">Read Full Blog</a>
</div>

Step 3. Add the necessary CSS styles

Copy and paste the below CSS into /httpdocs/assets/themes/theme_name/css/style.css

/* Blog Thumbnails - Home Page */

.blog-img {
    width: 100%;
    margin-bottom: 10px;
}

.blog-thumbs h4 {
    height: 70px;
}

@media (max-width: 767px) {
    .blog-thumbs h4 {
        height: 75px;
    }
}

@media (max-width: 1200px) and (min-width: 992px) {
    .blog-thumbs h4 {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .blog-thumbs h4 {
        font-size: 15px;
    }
}

.blog-thumbs div {
    margin-bottom: 25px;
}

.blog-thumbs p {
    height: 145px;
}

@media (max-width: 1200px) and (min-width: 992px) {
    .blog-thumbs p {
        height: 180px;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .blog-thumbs p {
        height: 164px;
    }
}

@media (max-width: 767px) {
    .blog-thumbs p {
        height: 180px;
        font-size: 13px;
    }
}

Final Result

Final Result


1 related articles found: