Missouri State University Pattern Library

Blog feed: Static

There are no notes for this item.

<article class="ContentBlock BlogFeed">
    <h2 class="Header">
        Lorem ipsum dolor sit amet consectetur
    </h2>
    <div class="FeedReader" data-feedurl="#" data-allnewshref="https://news.missouristate.edu" data-allnewslabel="More news" data-includehistorical="" data-includedate="true" data-includeblurb="true" data-entrycount="5">
        <ul>
            <li class="feedItem">
                <div class="Content"><a href="#">Lorem ipsum dolor sit amet consectetur</a>
                    <div class="itemMedia Media"><img class="itemEnclosure" src="http://picsum.photos/1920/1080?random1" alt="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."></div>
                    <div class="itemDate Date">Thursday September 12, 2019 at 11:27 a.m.</div>
                    <div class="itemDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis.</div>
                </div>
            </li>
            <li class="feedItem">
                <div class="Content"><a href="#">Lorem ipsum dolor sit amet consectetur</a>
                    <div class="itemMedia Media"><img class="itemEnclosure" src="http://picsum.photos/1920/1080?random2" alt="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."></div>
                    <div class="itemDate Date">Thursday September 12, 2019 at 11:27 a.m.</div>
                    <div class="itemDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis.</div>
                </div>
            </li>
            <li class="feedItem">
                <div class="Content"><a href="#">Lorem ipsum dolor sit amet consectetur</a>
                    <div class="itemMedia Media"><img class="itemEnclosure" src="http://picsum.photos/1920/1080?random3" alt="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."></div>
                    <div class="itemDate Date">Thursday September 12, 2019 at 11:27 a.m.</div>
                    <div class="itemDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis.</div>
                </div>
            </li>
            <li class="feedItem">
                <div class="Content"><a href="#">Lorem ipsum dolor sit amet consectetur</a>
                    <div class="itemMedia Media"><img class="itemEnclosure" src="http://picsum.photos/1920/1080?random4" alt="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."></div>
                    <div class="itemDate Date">Thursday September 12, 2019 at 11:27 a.m.</div>
                    <div class="itemDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis.</div>
                </div>
            </li>
            <li class="feedItem">
                <div class="Content"><a href="#">Lorem ipsum dolor sit amet consectetur</a>
                    <div class="itemMedia Media"><img class="itemEnclosure" src="http://picsum.photos/1920/1080?random5" alt="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."></div>
                    <div class="itemDate Date">Thursday September 12, 2019 at 11:27 a.m.</div>
                    <div class="itemDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis.</div>
                </div>
            </li>
            <p><a href="https://news.missouristate.edu">More news</a></p>
        </ul>
    </div>
</article>
 
<article class="ContentBlock BlogFeed">
  <h2 class="Header">
    {{feedHeading}}
  </h2>
  <div class="FeedReader" {{#if version.static}} data-feedurl="{{data.feedUrl}}" data-allnewshref="{{data.allNewsLink}}" data-allnewslabel="{{data.allNewsLabel}}" data-includehistorical="{{data.includeCachedEntries}}" data-includedate="{{data.displayDate}}" data-includeblurb="{{data.includeExcerpt}}" data-entrycount="{{data.entryCount}}" {{/if}}>
    {{#if version.static}}
      <ul>
        {{#each items}}
          <li class="feedItem">
            <div class="Content"><a href="{{url}}">{{title}}</a>
              <div class="itemMedia Media"><img class="itemEnclosure" src="{{image.src}}" alt="{{image.alt}}"></div>
              <div class="itemDate Date">{{date}}</div>
              <div class="itemDescription">{{description}}</div>
            </div>
          </li>
        {{/each}}
        <p><a href="https://news.missouristate.edu">More news</a></p>
      </ul>
    {{/if}}
    {{#if version.dynamic}}
      {{> @loader}}
    {{/if}}
  </div>
  {{#if version.dynamic}}
    <script>missouristate.requireScript("{{path '/scripts/components/feed.js'}}");</script>
    <noscript>
      <a href="{{allNewsLink}}">View all</a>
    </noscript>
  {{/if}}
</article>
 
{
  "version": {
    "static": true,
    "dynamic": null
  },
  "feedHeading": "Lorem ipsum dolor sit amet consectetur",
  "data": {
    "feedUrl": "#",
    "entryCount": 5,
    "includeExcerpt": true,
    "displayDate": true,
    "includeCachedEntries": null,
    "allNewsLabel": "More news",
    "allNewsLink": "https://news.missouristate.edu"
  },
  "items": [
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "image": {
        "src": "http://picsum.photos/1920/1080?random1",
        "alt": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."
      },
      "date": "Thursday September 12, 2019 at 11:27 a.m.",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "image": {
        "src": "http://picsum.photos/1920/1080?random2",
        "alt": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."
      },
      "date": "Thursday September 12, 2019 at 11:27 a.m.",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "image": {
        "src": "http://picsum.photos/1920/1080?random3",
        "alt": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."
      },
      "date": "Thursday September 12, 2019 at 11:27 a.m.",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "image": {
        "src": "http://picsum.photos/1920/1080?random4",
        "alt": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."
      },
      "date": "Thursday September 12, 2019 at 11:27 a.m.",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "image": {
        "src": "http://picsum.photos/1920/1080?random5",
        "alt": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic facilis aut aspernatur."
      },
      "date": "Thursday September 12, 2019 at 11:27 a.m.",
      "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dolorem quibusdam excepturi nulla consequuntur repellat saepe, officiis quaerat, possimus temporibus alias provident, sunt reiciendis."
    }
  ]
}