Showing event photos in past-events slider

Author: estebistec

pythonkc_site/static/screen.css

@@ -117,6 +117,18 @@ h3{
     color: #646565;
     margin-bottom: 5px;
 }
+.past-event .details {
+    width: 400px;
+    float: left;
+}
+.past-event .event-photo {
+    float: left;
+    width: 500px;
+    height: 375px;
+    margin: 10px;
+    border: 6px solid white;
+}
+*/
 
 footer {
     color: #FFFFFF;
@@ -187,6 +199,7 @@ article.past-event{
     display: inline-block;
     width: 945px;
     vertical-align: top;
+    margin: 0 auto;
 }
 .slider-controls {
     position: absolute;

pythonkc_site/templates/index.html

@@ -45,26 +45,30 @@ <h1>Past Events</h1>
       <div id="evt-wrapper">
         {% for event in past_events %}
         <article class="past-event">
-        <header>
-          <h1><time datetime>{{ event.time|date:"F j, Y" }}</time></h1>
-        </header>
-      
-      <h2><a href="{{ event.event_url }}">{{ event.name|safe }}</a></h2>
-      {% if event.description %}
-      <p>{{ event.description|safe|truncatewords_html:25 }}</p>
-      {% endif %}
-      <a href="{{ event.event_url }}" class="read-more">Read more at the Meetup event page &rarr;</a>
-      <div class="attendees clearfix">
-          <h3>Attendees ({{event.attendees|length}})</h3>
-          {% for attendee in event.attendees %}
-          {% if attendee.photo.thumb_url %}
-          <div title="{{ attendee.name }}" style="background-image: url( {{ attendee.photo.thumb_url }} );" class="attendee"></div>
+          <div class="details">
+            <header>
+              <h1><time datetime>{{ event.time|date:"F j, Y" }}</time></h1>
+            </header>
+            <h2><a href="{{ event.event_url }}">{{ event.name|safe }}</a></h2>
+            {% if event.description %}
+              <p>{{ event.description|safe|truncatewords_html:25 }}</p>
+            {% endif %}
+            <a href="{{ event.event_url }}" class="read-more">Read more at the Meetup event page &rarr;</a>
+            <div class="attendees clearfix">
+              <h3>Attendees ({{event.attendees|length}})</h3>
+              {% for attendee in event.attendees %}
+                {% if attendee.photo.thumb_url %}
+                  <div title="{{ attendee.name }}" style="background-image: url( {{ attendee.photo.thumb_url }} );" class="attendee"></div>
+                {% endif %}
+              {% endfor %}
+            </div>
+          </div>
+          {% if event.photos.0.url %}
+            <img class="event-photo"  src="{{ event.photos.0.url }}" />
           {% endif %}
+        </article>
         {% endfor %}
       </div>
-    </article>
-    {% endfor %}
-    </div>
     </div>
   </section>
   <section class="resources clearfix">