templates/Context/Blog/posts.html.twig line 1

Open in your IDE?
  1. <h3>{{ 'app.ui.blog.heading'|trans }}</h3>
  2. {% if postsRecent|length > 0 %}
  3. <div class="ui two column grid" style="">
  4.     <div class="column wide" style="">
  5.         <div class="ui link card" style="width: 100%;">
  6.             <div class="image">
  7.                 <img src="{{ postsRecent.0.image.path }}" alt="{{ postsRecent.0.image.name }}" />
  8.             </div>
  9.             <div class="content">
  10.                 <div class="header" style="font-weight:700;font-size:21px">{{ postsRecent.0.name_full }}</div>
  11.                 <div class="description">{{ postsRecent.0.excerpt|raw }}
  12.                     <a href="{{ postsRecent.0.link }}" class="ui primary basic button" style="margin-top: 1.5em;">
  13.                         Read more
  14.                     </a>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.     </div>
  19.     <div class="column">
  20.         <div class="ui link cards" style="">
  21.             <div class="card " style="width: 100%;">
  22.                 <div class="image">
  23.                 <img src="{{ postsRecent.1.image.path }}" alt="{{ postsRecent.1.image.name }}" />
  24.                 </div>
  25.                 <div class="content">
  26.                     <div class="header">{{ postsRecent.1.name }}...</div>
  27.                     <div class="description">
  28.                         {{ postsRecent.1.excerpt|raw }}<br>
  29.                         <a href="{{ postsRecent.1.link }}" class="ui primary basic button">
  30.                             Read more
  31.                         </a>
  32.                     </div>
  33.                 </div>
  34.             </div>
  35.             <div class="card " style="width: 100%;">
  36.                 <div class="image">
  37.                     <img src="{{ postsRecent.2.image.path }}" alt="{{ postsRecent.2.image.name }}" />
  38.                 </div>
  39.                 <div class="content">
  40.                     <div class="header">{{ postsRecent.2.name }}...</div>
  41.                     <div class="description">
  42.                         {{ postsRecent.2.excerpt|raw }}<br>
  43.                         <a href="{{ postsRecent.2.link }}" class="ui primary basic button">
  44.                             Read more
  45.                         </a>
  46.                     </div>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.     </div>
  51. </div>
  52. {% else %}
  53. <p class="text muted">{{ 'app.ui.blog.no_posts'|trans }}</p>
  54. {% endif %}
  56. {% if postsAll|length > 0 %}
  57. <h3 style="margin-top:4em;">{{ 'app.ui.blog.all'|trans }}</h3>
  58. <div class="ui link cards">
  59.     {% for post in postsAll %}
  60.         <div class="card ">
  61.             <div class="image">
  62.                 <img src="{{ post.image.path }}" alt="{{ post.image.name }}" />
  63.             </div>
  64.             <div class="content">
  65.                 <div class="header">{{ post.name }}...</div>
  66.                 <div class="description">
  67.                     {{ post.excerpt|raw }}<br>
  68.                     <a href="{{ post.link }}" class="ui  primary basic button">
  69.                         Read more
  70.                     </a>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.     {% endfor %}
  75. </div>
  76. {% endif %}
  77. <script>
  78. {# @TODO: remove this and adopt a proper solution #}
  79. document.addEventListener('DOMContentLoaded', function() {
  80.     var cards = document.querySelectorAll('.card');
  81.     cards.forEach(function(card) {
  82.         card.addEventListener('click', function(event) {
  83.             if (event.target.tagName === 'A') {
  84.                 return true;
  85.             } else {
  86.                 var link = card.querySelector('a');
  87.                 if (link) {
  88.                     window.location.href = link.href;
  89.                 }
  90.             }
  91.         });
  92.     });
  93. });
  94. </script>