Adding Blog page and latest articles on homepage

michelmany · Sep 23, 2018 · d482761 · d482761
1 parent 7827c4a
commit d482761
Show file tree

Hide file tree

Showing 20 changed files with 206 additions and 135 deletions.
diff --git a/front-page.php b/front-page.php
@@ -3,7 +3,16 @@
 use Basecamp\Models\Post;
 
 $context               = Timber::get_context();
-$context['posts']      = new Timber\PostQuery();
+
+$articles_args = array(
+    'post_type' => 'post',
+    'posts_per_page' => 3,
+    'orderby' => array(
+        'date' => 'DESC'
+    )
+);
+
+$context['posts']      = new Timber\PostQuery($articles_args);
 
 $context['is_front_page'] = true;
 

diff --git a/index.php b/index.php
@@ -2,8 +2,9 @@
 
 use Basecamp\Models\Post;
 
-$context               = Timber::get_context();
-$context['posts']      = new Timber\PostQuery();
-$context['pagination'] = Timber::get_pagination($pagination_mid_size);
+$context                = Timber::get_context();
+$context['post']        = new TimberPost();
+$context['posts']       = new Timber\PostQuery();
+$context['pagination']  = Timber::get_pagination($pagination_mid_size);
 
 Timber::render('index.twig', $context);
diff --git a/resources/assets/sass/_common.sass b/resources/assets/sass/_common.sass
@@ -64,3 +64,6 @@ body
     .slick__dots
         text-align: center
         margin-left: 0
+
+.is-background-cover
+    background: $gray-dark center / cover no-repeat
diff --git a/resources/assets/sass/_single.sass b/resources/assets/sass/_single.sass
@@ -1,6 +1,15 @@
 .single
   .main-article
     position: relative
+
+    &__title
+      @extend .title
+      +mobile
+        font-size: 1.5rem
+        margin-bottom: 10px
+
+      +tablet
+        font-size: 3rem
 
   .edit-post-link
     margin-top: -1rem

diff --git a/resources/assets/sass/pages/_blog.sass b/resources/assets/sass/pages/_blog.sass
@@ -0,0 +1,19 @@
+
+.blog
+
+    &__item
+
+        &-thumbnail
+            background: $gray-dark center / cover no-repeat
+            min-height: 190px
+            margin-bottom: 25px
+
+        &-title
+            @extend .title
+            margin-bottom: 8px !important
+
+            +mobile
+                font-size: 28px
+
+        &-meta
+            margin-bottom: 25px
diff --git a/resources/assets/sass/pages/index.sass b/resources/assets/sass/pages/index.sass
@@ -1,2 +1,3 @@
 
-@import tickets
+@import tickets
+@import blog
diff --git a/resources/assets/sass/sections/_latest-articles.sass b/resources/assets/sass/sections/_latest-articles.sass
@@ -20,15 +20,16 @@
         text-decoration: underline
 
     &__item
-        max-width: 436px
+        max-width: 584px
         padding-top: 18px
         padding-bottom: 18px
 
         +tablet
             display: flex
+            align-items: center
 
         &-image
-            background-color: #E5E5E5
+            background: $gray-dark center / cover no-repeat
             min-width: 150px
             height: 150px
             max-height: 150px

diff --git a/resources/views/components/article.twig b/resources/views/components/article.twig
@@ -1,29 +1,26 @@
-<article class="base-camp-article post-type-{{ post.post_type }}" id="post-{{ post.ID }}">
+<div class="blog__item column is-half-tablet is-one-quarter-desktop" id="post-{{ post.ID }}">
 
-  <header>
-    <h2 class="title is-h2">
-      <a href="{{ post.link }}">{{ post.title }}</a>
-    </h2>
-    <div class="article-meta">
-      <time class="timestamp"><i class="fa fa-calendar" aria-hidden="true"></i> <span>{{ post.date }}</span></time>
-      <div>
-        <a href="{{ post.author.link }}"><i class="fa fa-user" aria-hidden="true"></i> <span>{{ post.author }}</span></a>
-      </div>
-      {% if post.can_edit %}
-        <div><a href="{{ post.get_edit_url }}"><i class="fa fa-pencil" aria-hidden="true"></i> <span>{{ messages.article.edit }}</span></a></div>
-      {% endif %}
-    </div>
-  </header>
+    {% set post_thumb = TimberImage(post.thumbnail) %}
+
+    <a href="{{ post.link }}">
+        <div class="blog__item-thumbnail" 
+            style="background-image: url('{{ post_thumb.src|resize(1320)}}')"></div>
+    </a>
 
-  <p class="content">{{ post.content }}</p>
+    <h2 class="blog__item-title">
+        <a href="{{ post.link }}">{{ post.title }}</a>
+    </h2>
 
-  {# Tags #}
-  <footer>
+    <div class="blog__item-meta article-meta">
+        <time class="timestamp"><i class="fa fa-calendar" aria-hidden="true"></i> <span>{{ post.date }}</span></time>
+    </div>
+
+    <p class="content">{{ post.preview.length(30).force }}</p>
+
     <ul class="article-tags">
-      {% for tag in post.tags %}
+        {% for tag in post.tags %}
         <li><a href="{{ tag.link }}" class="button is-danger is-outlined is-small">{{ tag.name }}</a></li>
-      {% endfor %}
-    </ul>
-  </footer>
+        {% endfor %}
+    </ul>   
 
-</article>
+</div>
diff --git a/resources/views/front-page.twig b/resources/views/front-page.twig
@@ -69,33 +69,26 @@
 
             <div class="latest-articles column">
                 <h3 class="section-title">Latest Articles</h3>
-                <a href="#" class="latest-articles__see-all">See all articles</a>
+                <a href="/blog" class="latest-articles__see-all">See all articles</a>
+
 
                 <div class="latest-articles__items">
-                    <div class="latest-articles__item">
-                        <div class="latest-articles__item-image"></div>
-                        <div class="latest-articles__item-content">
-                            <div class="latest-articles__item-title">Lorem Ipsum Article Title here two lines</div>
-                            <div class="latest-articles__item-copy">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</div>
-                            <a href="#" class="latest-articles__item-button">Read More</a>
-                        </div>
-                    </div>
-                    <div class="latest-articles__item">
-                        <div class="latest-articles__item-image"></div>
-                        <div class="latest-articles__item-content">
-                            <div class="latest-articles__item-title">Lorem Ipsum Blog Title here which is a little longer test</div>
-                            <div class="latest-articles__item-copy">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</div>
-                            <a href="#" class="latest-articles__item-button">Read More</a>
-                        </div>
-                    </div>
-                    <div class="latest-articles__item">
-                        <div class="latest-articles__item-image"></div>
-                        <div class="latest-articles__item-content">
-                            <div class="latest-articles__item-title">Lorem Ipsum</div>
-                            <div class="latest-articles__item-copy">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</div>
-                            <a href="#" class="latest-articles__item-button">Read More</a>
+                    {% for post in posts %}
+                        {% set post_thumb = TimberImage(post.thumbnail) %}
+
+                        <div class="latest-articles__item">
+                            <div class="latest-articles__item-image" style="background-image: url('{{ post_thumb.src|resize(600)}}')"></div>
+                            <div class="latest-articles__item-content">
+                                <div class="latest-articles__item-title">{{ post.title }}</div>
+
+                                <div class="latest-articles__item-copy">
+                                    {{ post.preview.length(25).force }}
+                                </div>
+
+                            </div>
                         </div>
-                    </div>
+                    {% endfor %}
+
                 </div>
             </div>
 

diff --git a/resources/views/header/index.twig b/resources/views/header/index.twig
@@ -23,7 +23,11 @@
       <section class="hero is-primary is-bold has-text-right">
         <div class="hero__body">
           <div class="container">
-            <h1 class="hero__body-title">{{ post.title }}</h1>
+            {% if function('is_single') %}
+              <h1 class="hero__body-title">Blog</h1>
+            {% else %}
+              <h1 class="hero__body-title">{{ post.title }}</h1>
+            {% endif %}
           </div>
         </div>
       </section>

diff --git a/resources/views/index.twig b/resources/views/index.twig
@@ -1,14 +1,17 @@
 {% extends "base.twig" %}
 
 {% block content %}
-  {% for post in posts %}
-    {% include 'components/article.twig' %}
-    <hr />
-  {% endfor %}
-
-
-  {% if posts.pagination.pages %}
-    {% include 'components/pagination.twig' %}
-  {% endif %}
+    <section class="blog section">
+        <div class="container">
+            <div class="columns">
+                {% for post in posts %}
+                    {% include 'components/article.twig' %}
+                {% endfor %}
+            </div>
+        </div>
+    </section>
 
+    {% if posts.pagination.pages %}
+        {% include 'components/pagination.twig' %}
+    {% endif %}
 {% endblock %}
diff --git a/resources/views/single.twig b/resources/views/single.twig
@@ -2,39 +2,43 @@
 
 {% block content %}
 
-  <article class="main-article">
-    <h1 class="title is-2">{{ post.title }}</h1>
-    <h5 class="subtitle is-5">
-      <time class="timestamp">
-        <small>{{ post.date }} {{ post.time }}</small>
-      </time>
-    </h5>
-    {% if post.can_edit %}
-      <div class="edit-post-link"><a href="{{ post.get_edit_url }}">
-          <i class="fa fa-pencil" aria-hidden="true"></i> <span>{{ messages.single.edit }}</span></a>
+<article class="main-article section">
+  <div class="container">
+    <div class="columns">
+      <div class="column is-three-quarters-desktop">
+        {% set post_thumb = TimberImage(post.thumbnail) %}
+        <h1 class="main-article__title">{{ post.title }}</h1>
+        <h5 class="subtitle is-5">
+          <time class="timestamp">
+            <small>{{ post.date }}</small>
+          </time>
+        </h5>
+        <div class="is-background-cover" style="height: 450px; margin-bottom:24px; background-image: url('{{ post_thumb.src|resize(1320)}}')"></div>
+        <p>
+          {{ post.content }}
+        </p>
       </div>
-    {% endif %}
-    <p>
-      {{ post.content }}
-    </p>
-
-  </article>
-
-  {# Social media share buttons #}
-  {% include 'components/social-media.twig' %}
-
-  <section class="comment-box">
-    <div class="comments">
-      {% if post.comments is not empty %}
-        <h3 class="title is-3">{{ messages.single.comments }}</h3>
-        {% for comment in post.comments %}
-          {% include "comment.twig" %}
-        {% endfor %}
-      {% endif %}
     </div>
+  </div>
+</article>
+
+{# Social media share buttons #}
+{% include 'components/social-media.twig' %}
 
-    {% if post.comment_status == "open" %}
-      {% include "comment-form.twig" %}
+<section class="comment-box section">
+  <div class="container">
+  <div class="comments">
+    {% if post.comments is not empty %}
+      <h3 class="title is-3">{{ messages.single.comments }}</h3>
+      {% for comment in post.comments %}
+        {% include "comment.twig" %}
+      {% endfor %}
     {% endif %}
-  </section>
+  </div>
+
+  {% if post.comment_status == "open" %}
+    {% include "comment-form.twig" %}
+  {% endif %}
+  </div>
+</section>
 {% endblock %}
diff --git a/static/css/admin.61efea1639febaf14b78.css → static/css/admin.c2a48966181064ea921c.css b/static/css/admin.61efea1639febaf14b78.css → static/css/admin.c2a48966181064ea921c.css