Richard Howells' Blog

Ventrian News Articles Latest - Select from more than one News Articles Instance

It looks like Ventrian customers have wanted to do this for several years.  Here is a workaround.  It assumes javascript and jQuery are active on the page.

Here is the display I wanted to create…

image_thumb

In an instance of News Articles edit the templates such that HTML Header is empty; HTML Body contains (replace : with a single colon.  Can't get this model to display it correctly.)(replace : with a single colon character - can't get this modue to display it properly)

 

<div class='marker-newsArticle'
     data-publishdate="[PUBLISHSTARTDATE &colon; yyyy-MM-dd]"
     data-articlelink='[ARTICLELINK]'
     data-authorusername='[AUTHORUSERNAME]'
     data-title='[TITLE]'>
</div>

and HTML Footer contains:

<ul class='marker-output'></ul>

<script type='text/javascript'>
    $(function () {
        var rawData = [];
        $('.marker-newsArticle').each(
        function () {
            var $this = $(this);
            var newObj = {};
            newObj['publishdate'] = $this.data('publishdate');
            newObj['articlelink'] = $this.data('articlelink');
            newObj['authorusername'] = $this.data('authorusername');
            newObj['title'] = $this.data('title');

            rawData.push(newObj);
        });

        rawData.sort(function (left, right) {
            return right.publishdate.localeCompare(left.publishdate);
        });

        var limitOfResults = 10;
        var txt = "";
        $.each(rawData, function (i, item) {
            if (i < limitOfResults)
                txt += '<li>' + '<a href="' + item.articlelink + '"' + '>' + item.publishdate + ' ' + item.title + '</a>' + ' by ' + item.authorusername + '</li>';
        });

        $('.marker-output').append(txt);
    });
</script>

 

Add further Latest Article modules to the page pointing at other instances of News Articles on your site.  Configure those modules to set the HTML Body template the same as above.  Empty the HTML Header and HTML Footer templates.  Set the container to NOT display.  Find this on the module’s Page Settings Tab.

If you just want it to work like my example you are done.

How it works

For each item the template pumps out a div with no content (so it does not display).  We add data-* attributes and populate them from tokens belonging to the item.  That allows us to smuggle the token values in to the page without displaying them.  Each div is given a class name (marker-newsArticle) to tag it. Extension point – add and populate more tokens.

The HTML Footer lets us smuggle some jQuery down to the page.  That jQuery picks up ALL page elements with class=’marker-newsArticle’.  By picking up all on the page it will also get the divs from other instances of the module.  That is how the integration works.

Sorts them latest first. Extension point – you can sort by whatever you choose.

Uses jQuery to create an li for each of the top ten items, and wraps them in a ul for display. Extension point – a ul suited my purpose.  You can create any html you like here.  You can populate it from any attributes you choose to populate in the underlying divs.  Further extension point – change the variable limitOfResults to set the limit for the total number of results to display.

See it in action on the front page at www.broad-town.co.uk.

Posting Archive
Copyright 2002-15 by Dynamisys Ltd