New Blogging Functionality now Live
Written By: Administrator on Thursday 3rd Sep 2015
We're happy to announce that blogging functionality is now available for Instantcart. With a few simple changes to your template, you can add Wordpress style blogging entries to your store, with dedicated articles.
To find out what changes you need to make, read further..
How to enable Blogging within your template
To use blogging functionality within your webstore, you need to make sure you have the correct support within your chosen template.
To add support, follow the instructions below.
If you want to display a list of article tiles, with links to each article, you can do so as follows.
- Make sure you have copied over the template files for your chosen template.
- Navigate to your templates folder, either via FTP or via the Instantcart control panel.
- Select the content/news.template.html file.
- Open it, and start editing with the changes below.
To add functionality as shown below in the visual, simply amend the html and twig markup you have in your content/news.template.html file to that shown in the coding example below. Once you have amended your code, you can then add some sample blogging articles, and an associated image for each article.
{% set holdingImage = '/images/blog_images/blog_P2L8mF3jo2_iphone-624709_1920.jpg' %}
{% for article in news %}
{% if loop.index == 1 %}
<div class="col-sm-12">
<a href="{{ article.url }}" title="{{ article.title }}">
<img src="{% if article.image %}{{ article.image }}{% else %}{{ holdingImage }}{% endif %}" alt="{{ article.title }}" class="img-responsive" />
</a>
<span class="text-lg">
<a href="{{ article.url }}" title="{{ article.title }}">
{{ article.title }}
</a>
</span>
<span class="text-sm" style="color:#999"><br>by {{ article.author.name }} >> {{ article.date.created|date("l jS M Y") }}</span>
<div class="divider-clear-20px"></div>
</div>
{% else %}
<div class="col-sm-6">
<div style="text-align:center" >
<a href="{{ article.url }}" title="{{ article.title }}">
<img style="max-height:300px; width:100%;" src="{% if article.image %}{{ article.image }}{% else %}{{ holdingImage }}{% endif %}" alt="{{ article.title }}" class="img-responsive" />
</a>
</div>
<span class="text-lg">
<a href="{{ article.url }}" title="{{ article.title }}">
{{ article.title }}
</a>
</span>
<span class="text-sm" style="color:#999"><br>by {{ article.author.name }} >> {{ article.date.created|date("l jS M Y") }}</span>
<div class="divider-clear-15px"></div>
</div>
{% endif %}
{% endfor %}
Adding a Blogging Article
The next step is to add a sample article or two.
- First, navigate to the Instantcart control panel and login to your store.
- Click on Content
- Click on the News & Blog Tab.
- Then, click on the grey "Add a new article" tab.
- Add a title, and sample content, and an image (make sure your image is of a suitable size and dimension to operate as a tile).
- Click on "Add News" and the article will automatically save.
- A URL will be automatically generated from the title, and you can choose to section this under either the news or blog sub categories.
- Continue to add 2-3 articles with images, and you should see the news section populate as per the visual above.
