News

News

With a combination of oggeh-container and oggeh-repeat templates, a list of news articles can be displayed. A single news article can be displayed as a normal page (see Page Blocks).

Example:

<oggeh-content get="news">
  <!-- Template for the overall news container -->
  <template id="oggeh-container">
    <!--Start single blog post-->
    <slot></slot>
    <!--End single blog post-->
    <div class="row">
      <div class="col-md-12"> 
        <ul class="post-pagination text-center">
          <li>
            <a href="/news?start-date={{ previous }}">
              <i class="fa fa-caret-left"></i>
            </a>
          </li>
          <li v-if="content?.news?.next">
            <a href="/news?start-date={{ next }}">
              <i class="fa fa-caret-right"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </template>
  <!-- Template for a news article (a single post in a list item) -->
  <template id="oggeh-repeat">
    <div class="single-blog-post">
      <div class="img-holder">
        <img src="{{ cover.maximum.url | fallback('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==') }}" alt="{{ subject }}">
        <div class="overlay">
          <div class="box">
            <div class="content">
              <a href="/article/{{ timestamp }}" class="yellow-bg">
                Read more
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="text-holder">
        <a href="/article/{{ timestamp }}">
          <h2 class="blog-title">
            {{ subject }} 
          </h2>
        </a>
        <ul class="meta-info">
          <li><i class="fa fa-clock-o" aria-hidden="true"></i>{{ timestamp | formatDate }}</li>
          <li><i class="fa fa-tags" aria-hidden="true"></i>{{ tags | join(', ') }}</li>
        </ul>
        <div class="text">
          <p>{{ header }} </p>
        </div>
      </div> 
    </div>
  </template>
</oggeh-content>

You can add related news at the same view as well.

Example

<oggeh-content get="news-related">
    <!-- Template for the overall related news container -->
    <template id="oggeh-container">
    <div class="single-sidebar">
      <div class="sidebar-title">
          <h1>Popular Posts</h1>
          <span class="border"></span>
      </div>
      <ul class="popular-post">
        <slot></slot>
      </ul>
    </div>
  </template>
  <!-- Template for a article item (a single post in a list item) -->
  <template id="oggeh-repeat">
    <li>
      <div class="img-holder">
        <img src="{{ cover.maximum.url | fallback('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==') }}" alt=" {{ subject }}">
        <div class="overlay-box">
          <div class="box">
            <div class="content">
              <a href="/article/{{ timestamp }}"><i class="fa fa-link" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        <h3><a href="/article/{{ timestamp }}">{{ subject }}</a></h3>
        <p><i class="fa fa-clock-o" aria-hidden="true"></i>{{ timestamp | formatDate }}</p>
      </div>
    </li>
  </template>
</oggeh-content>

Last but not least, you can add a list of news tags (see Custom Methods).