adding ui to showcase all speakers in event page

_fifthelephant_events/2018.md

@@ -65,6 +65,7 @@ featured_speakers:
     talk_title: "Building analytics application with Streaming Expressions in Apache Solr"
     image_url: https://images.hasgeek.com/embed/file/017e81ca82314a509919b1b01e42e3b0?size=200x200
     name: Amrit Sarkar
+    featured: true
   - funnel_url: https://fifthelephant.talkfunnel.com/2018/66-operating-data-pipeline-using-airflow-slack
     designation: Senior data engineer at Slack
     talk_title: "Operating data pipeline using Airflow @ Slack"
@@ -116,6 +117,8 @@ featured_speakers:
     image_url: https://images.hasgeek.com/embed/file/4ea776dcbefd4030ba2365f55aca2943?size=200x200
     name: Vikram Vij
 
+all_speakers: true
+
 related_events:
 - title: "Anthill Inside 2018"
   datelocation: 25 July 2018, Bangalore

_includes/all_speakers.html

@@ -0,0 +1,60 @@
+<div class="has-text-centered">
+  <h3 class="title ">Who's speaking?</h3>
+  <br>
+</div>
+<div class="columns is-mobile is-desktop">
+  {% if include.instructors %}
+  {% assign speakers = include.instructors %}
+  {% else %}
+    {% assign speakers = "" | split: ',' %}
+    {% assign all_speakers = include.speakers %}
+    {% assign featured_speakers = include.speakers | where:'featured', 'true' %}
+    {% for speaker in all_speakers %}
+      {% if featured_speakers contains speaker %}
+      {% else %}
+        {% assign speakers = speakers | push: speaker %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+  {% for speaker in speakers %}
+  <div class="column is-one-quarter-tablet is-three-quarters-mobile is-one-quarter-desktop">
+    <div class="card">
+      <div class="card-image">
+        <figure class="image is-4by4">
+          {% if speaker.image_url %}
+          <img src="{{ speaker.image_url }}" alt="Speaker profile">
+        </figure>
+        {% endif %}
+      </div>
+      <div class="card-content">
+        <div class="content">
+          <strong>{{ speaker.name }}</strong> | {{ speaker.designation }}
+          <br>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+
+<!-- <div class="card">
+  <div class="card-image">
+    <figure class="image is-4by3">
+      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
+    </figure>
+  </div>
+  <div class="card-content">
+    <div class="content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+      <br>
+    </div>
+  </div>
+</div> -->
+
+
+
+
+
+
+

_includes/childcare_announcement.html

@@ -1,4 +1,4 @@
-<div class="column is-4" style="margin-top: 32px;">
+<div class="column is-4" style="margin-top: 8px; margin-bottom: 24px;">
   <img src="https://images.hasgeek.com/embed/file/9851a3e601194e3287f5ed24837dbee6" alt="">
   <h3 class="title is-6 uppercase"><strong>Childcare at {{ site.title }}</strong></h3>
   <p>We welcome children at {{ site.title }}. If you are a primary caretaker who wants to attend the conference and needs support with childcare, we have it all arranged. <a href="https://medium.com/hasgeek/we-have-childcare-facilities-droidconin-and-all-hasgeek-conferences-going-forward-70d520762a11">Learn more</a>.</p>

_includes/community_space_announcement.html

@@ -1,4 +1,4 @@
-<div class="column is-4" style="margin-top: 32px;">
+<div class="column is-4" style="margin-top: 8px; margin-bottom: 24px;">
   <img src="https://images.hasgeek.com/embed/file/046b20c66e914ea0b408b3cc3879e18c" alt="">
   <h3 class="title is-6 uppercase"><strong>Community Space</strong></h3>
   <p>Are you an open source community, non-profit org? We invite you to be part of HasGeek conferences. <a href="https://docs.google.com/forms/d/e/1FAIpQLSetkz1PAjwrzSDNZuxFRoqOe3E9ZWHExtXzwSfEXhNQ0EGF_w/viewform">Apply here</a>.</p>

_includes/featured_speakers_section.html

@@ -3,26 +3,50 @@
   <h3 class="title">Featured Talks</h3>
   <br>
 </div>
-<div class="columns">
+<div class="columns is-mobile is-desktop">
   {% if include.instructors %}
   {% assign speakers = include.instructors %}
   {% else %}
-  {% assign speakers = include.speakers %}
+  {% assign speakers = include.speakers | where:'featured', 'true' %}
   {% endif %}
   {% for speaker in speakers %}
-  <div class="column is-3">
-      <article class="tile is-child notification">
-      {% if speaker.image_url %}
-        <figure class="image is-4by4">
-          <img src="{{ speaker.image_url }}" height="200px">
-        </figure>
-         {% endif %}
-        <br>
-        <h1 class="title is-4"><strong><a href="{{ speaker.funnel_url }}" target="_blank" class="click link-unstyled" data-label="view {{ speaker.talk_title }}">{{ speaker.talk_title }}</a></strong></h1>
-        <p class=""><span><strong>{{ speaker.name }}</strong></span> | <span>{{ speaker.designation }}</span></p>
-      </article>
+  <div class="column is-three-quarters-mobile is-one-third-desktop">
+    <a href="{{ speaker.funnel_url }}" target="_blank">
+    <div class="card is-clickable">
+      <div class="card-content">
+        <div class="media">
+          <div class="media-left">
+            {% if speaker.image_url %}
+            <figure class="image is-64x64">
+              <img src="{{ speaker.image_url }}" alt="Placeholder image">
+            </figure>
+            {% endif %}
+          </div>
+          <div class="media-content">
+            <p class="subtitle" style="font-size: 10px; color: #906b37; font-weight: 700; padding-bottom: 8px;">FEATURED</p>
+            <p class="title is-6">{{ speaker.name }}</p>
+            <p class="subtitle is-6">{{ speaker.designation }}</p>
+          </div>
+        </div>
+
+        <div>
+        <h1></h1>
+          <strong class="title is-4">
+            {{ speaker.talk_title }}.
+          </strong>
+          <br>
+        </div>
+        <div>
+
+        </div>
+      </div>
+    </div>
+     </a>
   </div>
   {% endfor %}
 </div>
 
 
+
+
+

_includes/food_court_announcement.html

@@ -1,4 +1,4 @@
-<div class="column is-4" style="margin-top: 32px;">
+<div class="column is-4" style="margin-top: 8px; margin-bottom: 24px;">
   <div><img src="https://images.hasgeek.com/embed/file/a5909b39e1764bdebec85a50c14262af" alt=""></div>
   <h3 class="title is-6 uppercase"><strong>Food Court</strong></h3>
   <p>

_includes/office_hours_announcement.html

@@ -1,4 +1,4 @@
-<div class="column is-4" style="margin-top: 32px;">
+<div class="column is-4" style="margin-top: 8px; margin-bottom: 24px;">
     <img src="https://images.hasgeek.com/embed/file/c017e4041f394a3a8f8c454f0c4b6ca4" alt="">
     <h3 class="title is-6 uppercase"><strong>Office hours</strong></h3>
     <p>Want to consult experts on your queries? Catch them at {{site.title}} and chat with them individually.</p>

_includes/recommend_speaker_announcement.html

@@ -1,4 +1,4 @@
-<div class="column is-4" style="margin-top: 32px;">
+<div class="column is-4" style="margin-top: 8px; margin-bottom: 24px;">
     <img src="https://images.hasgeek.com/embed/file/3f7c2ef7eb2d45ea8205ee5d321fe910">
     <h3 class="title is-6 uppercase"><strong>Recommend a speaker!</strong></h3>
     <p>

_layouts/event.html

@@ -154,13 +154,21 @@
 {% endif %}
 
 {% if page.featured_speakers %}
-<section class="section has-featured-speakers scroll-horizontal  bg-light"id="featured_speakers">
+<section class="section scroll-horizonta bg-light" id="featured_speakers">
   <div class="container">
   {% include featured_speakers_section.html speakers=page.featured_speakers %}
   </div>
 </section><hr>
 {% endif %}
 
+{% if page.all_speakers %}
+<section class="section scroll-horizontal  bg-light"id="featured_speakers">
+  <div class="container">
+  {% include all_speakers.html speakers=page.featured_speakers %}
+  </div>
+</section><hr>
+{% endif %}
+
 {% if page.discussions %}
 <section class="section bg-light scroll-horizontal"id="dicussions">
   <div class="container">

_sass/bulma_material_overrides.scss

@@ -697,3 +697,4 @@ a{
 
 
 
+

tests/before_build/steps/events.py

@@ -59,6 +59,11 @@ def valid_external_url(field, value, error):
     'required': True
 }
 
+all_speakers_schema = {
+    'type': 'boolean',
+    'required': False
+}
+
 featured_speakers_schema = {
     'funnel_url': {
         'validator': valid_external_url,
@@ -94,6 +99,10 @@ def valid_external_url(field, value, error):
         'type': 'string',
         'required': False
     },
+    'featured': {
+        'type': 'boolean',
+        'required': False
+    }
 }
 
 proposed_speakers_schema = {
@@ -558,6 +567,11 @@ def valid_external_url(field, value, error):
         'required': False
     },
 
+    'all_speakers': {
+        'type': 'boolean',
+        'required': False
+    },
+
     'featured_image': {
         'type': 'string',
         'validator': valid_external_url,