From 29a55bd10176ac5b802d0bb1ec4e8802e16bd1f8 Mon Sep 17 00:00:00 2001
From: Lionel Sambuc <lionel.sambuc@gmail.com>
Date: Sat, 30 Aug 2014 23:12:29 +0200
Subject: [PATCH] Flowing layout for the galleries

---
 pelican-bootstrap3/templates/article.html | 98 +++++++++--------------
 1 file changed, 36 insertions(+), 62 deletions(-)

diff --git a/pelican-bootstrap3/templates/article.html b/pelican-bootstrap3/templates/article.html
index 640c8c9..1796d8c 100644
--- a/pelican-bootstrap3/templates/article.html
+++ b/pelican-bootstrap3/templates/article.html
@@ -37,73 +37,47 @@
                     </div>
                 </div>
                 {{ article.content }}
-
                 {% if article.album %}
-                <table class="gallery_table">
-                    <tr>
+                <div id="gallery" class="panel">
+                <div class="panel-body">
                 {% for image in article.galleryimages %}
-                        <td>
-                            <table class="layout">
-                                <tr class="layout">
-                                    <td class="layout" colspan="2">&nbsp;
-                    {% if article.gallerycaptions.get(image) %}
-                            <strong>{{ article.gallerycaptions.get(image) }}</strong>
-                    {% endif %}
-                                    </td>
-                                </tr>
-                                <tr class="layout">
-                                    <td class="layout">
-                                        <a class="{{ article.album }} cboxElement" href="{{ SITEURL }}/images/gallery/{{ article.album }}/{{ image }}"
-                    {% if article.gallerycaptions.get(image) %}title="{{ article.gallerycaptions.get(image) }}"{% endif %}>
-                                            <img src="{{ SITEURL }}/images/thumbs/{{ article.album }}/{{ image }}">
-                                        </a>
-                                    </td>
-                                </tr>
-                                <tr class="layout">
+                    <div class="gallery-element {{ "elem_" + article.album }}">
+                    <div>
+                        <p class="picture-title">{% if article.gallerycaptions.get(image) %}{{ article.gallerycaptions.get(image) }}{% endif %}&nbsp;</p>
+                        <a class="{{ article.album }} cboxElement" href="{{ SITEURL }}/images/gallery/{{ article.album }}/{{ image }}"
+                            {% if article.gallerycaptions.get(image) %}title="{{ article.gallerycaptions.get(image) }}"{% endif %}>
+                            <img src="{{ SITEURL }}/images/thumbs/{{ article.album }}/{{ image }}" />
+                        </a>
                      {% if article.galleryexif and article.galleryexif.get(image) %}
-                                     <td class="layout">
-                                        <table class="exif_info">
-                                            {% if article.galleryexif.get(image).get("Model") %}
-                                            <tr><th colspan="4">{{article.galleryexif.get(image).get("Model")}}</th></tr>
-                                            {% endif %}
-                                            {% if article.galleryexif.get(image).get("LensModel") %}
-                                            <tr><th colspan="4">{{article.galleryexif.get(image).get("LensModel")}}</th></tr>
-                                            {% endif %}
-                                            <tr>
-                                            {% if article.galleryexif.get(image).get("ISOSpeedRatings") %}
-                                                <td>{{article.galleryexif.get(image).get("ISOSpeedRatings")}}</td>
-                                            {% endif %}
-                                            {% if article.galleryexif.get(image).get("FocalLength") %}
-                                                <td>{{article.galleryexif.get(image).get("FocalLength")}}mm</td>
-                                            {% endif %}
-                                            {% if article.galleryexif.get(image).get("FNumber") %}
-                                                <td>f/{{article.galleryexif.get(image).get("FNumber")}}</td>
-                                            {% endif %}
-                                            {% if article.galleryexif.get(image).get("ExposureTime") %}
-                                                <td>{{article.galleryexif.get(image).get("ExposureTime")}}</td>
-                                            {% endif %}
-                                            </tr>
-                                        </table>
-                                    </td>
-                    {% endif %}
-                                </tr>
-                    {% if article.gallerycomments.get(image) %}
-                                <tr>
-                                    <td colspan="2">{{ article.gallerycomments.get(image) }}</td>
-                                </tr>
-                    {% endif %}
-                            </table>
-                        </td>
-                    {% if (loop.index % GALLERY_IMG_PER_ROW) == 0 %}
-                    </tr>
-                    <tr>
+                        <table class="exif_info">
+                            {% if article.galleryexif.get(image).get("Model") %}
+                            <tr><th colspan="4">{{article.galleryexif.get(image).get("Model")}}</th></tr>
+                            {% endif %}
+                            {% if article.galleryexif.get(image).get("LensModel") %}
+                            <tr><th colspan="4">{{article.galleryexif.get(image).get("LensModel")}}</th></tr>
+                            {% endif %}
+                            <tr>
+                            {% if article.galleryexif.get(image).get("ISOSpeedRatings") %}
+                                <td>{{article.galleryexif.get(image).get("ISOSpeedRatings")}}</td>
+                            {% endif %}
+                            {% if article.galleryexif.get(image).get("FocalLength") %}
+                                <td>{{article.galleryexif.get(image).get("FocalLength")}}mm</td>
+                            {% endif %}
+                            {% if article.galleryexif.get(image).get("FNumber") %}
+                                <td>f/{{article.galleryexif.get(image).get("FNumber")}}</td>
+                            {% endif %}
+                            {% if article.galleryexif.get(image).get("ExposureTime") %}
+                                <td>{{article.galleryexif.get(image).get("ExposureTime")}}</td>
+                            {% endif %}
+                            </tr>
+                        </table>
                     {% endif %}
+                        <p class="picture-comment">{% if article.gallerycomments.get(image) %}{{ article.gallerycomments.get(image) }}{% endif %}</p>
+                    </div>
+                    </div>
                 {% endfor %}
-                    {% if (article.galleryimages.__len__() % GALLERY_IMG_PER_ROW) != 0 %}
-                    <td colspan="{{GALLERY_IMG_PER_ROW - (article.galleryimages.__len__() % GALLERY_IMG_PER_ROW)}}" />
-                    {% endif %}
-                     </tr>
-                </table>
+                </div>
+                </div>
                 {% endif %}
             </div>
             <!-- /.entry-content -->