Table of Contents
Headlines Autotag for glFusion 1.6.0 or Higher
The headlines autotag may be one of the most versatile autotags available in glFusions powerful autotag arsenal due to its ability to be customized via templates. Headlines allows for quick customization of the look and feel of how stories are listed and can be used virtually anywhere, such as in static pages, stories and blocks.
[headlines:topic_name or all display:## meta:0/1 titlelink:0/1 featured:0/1 frontpage:0/1 cols:# template:template_name]
|topic_name||Specify the topic_id to pull articles from, or use all to pull from all topics|
|display:##||The number of articles to pull - if not specified, default is 10|
|meta:||Use 1 to include meta data (i.e.; name, date, comments) or 0 to turn off meta data|
|titlelink:||Use 1 to have the title a link to the full article, 0 only shows the title|
|featured:||Use 1 to pull only featured articles, 0 pull any article type|
|frontpage:||Use 1 to only pull articles that have the front page attribute, 0 pull from all articles|
|cols:||The number of columns to use when displaying articles - defaults to 3 if not provided|
|template:||You can pass which template to use, or specify a template you have created. Included templates are: headlines.thtml, headlines-overlay.thtml, headlines-panels.thtml, headlines-slider.thtml, headlines-slideshow.thtml|
|headlines.thtml||This is the default, if no template is given, this will be used. This template will show the standard article display with the Story Image on top, the article title, meta data (if meta:1) and the article intro text.|
|headlines-slider.thtml||This will display the story image of each story in a slider, with overlay of the title and sub-title|
Creating Your Own Template
If you are new to creating templates or just need a head start on creating your own, it is best to grab a copy of one of the bundled templates from /private/system/autotags and place that copy within path/to/your/theme/autotags/headlines directory.
Once you have placed a copy of a template in your themes autotags directory you are ready to modify it to create you own.
Tutorial: How to Make a Custom Template
In this tutorial we will modify the look and feel of the bundled headlines-slider.thtml template, turn it into a 3 column slider and change the panels to an overlay.
Things you will need:
- A glFusion installation with at least 5 populated stories, each with a Story Image, Subtitle and are in the same topic.
- A text editor such as the one used in the elFinder plugin.
- A copy of headlines-slider.thtml placed in your themes autotag directory.
- Be logged into your glFusion installation using an account that has Admin(root) access.
We are going to assume that you are using the text editor within the elFinder plugin, if you are not please use your favorite text editor such as the one in your hosts cpanel or Atom(os independent) with an appropriate ftp extension.
Go to Command and Control and click on the elFinder plugin. Once open, navigate to your themes autotags directory, right click on headlines-slider.thtml and rename it to headlines-slider-overlay.thtml.
Right click on the renamed file and select “Edit file”.
The above is what your file should look like.
Everything above the <!– BEGIN headlines –> comment runs first and only once. Every thing between <!– BEGIN headlines –> and <!– END headlines –> is the meat of the template and is looped through as many times as the display variable has been specified(default is 10). Once completed, everything after <!– END headlines –> executed last and only once.
Let's begin by making the slider a 3 column slider by changing the grid widths.
Go over to the uikit home page to see what is required to implement the overlay effect. Which in this case it is best to always have the overlay remain without hover. Below is the code example that should be used to implement desired overlay effect.
<figure class="uk-overlay uk-overlay-hover"> <img class="uk-overlay-scale" src="" > <figcaption class="uk-overlay-panel uk-overlay-bottom uk-ignore uk-overlay-background">...</figcaption> </figure>