index, article and gallery layout modifications

static/css-include/pelican.css

@@ -63,9 +63,18 @@
     /*margin: .25em 0 0 0; */
     padding-left: 0;
     width: 100%;
-    border: 1px;
+    /*border: 1px;*/
     }
 
+ol.photo_gallery {
+    list-style: decimal;
+    margin: 0 0 2em 0;}
+    ol li {
+        padding-left: 20px;
+    }
+    ol li a {
+        border:0;
+    }
 
 /************************************************/
 /* photos                                       */
@@ -73,11 +82,10 @@
 .photo {
     display: flex;
     justify-content: center;
-    margin: .1em;
     position: relative;
     text-transform: initial;
     transition: transform .05s;
-    width: 200px;
+    width: calc(100%/5); /* 13 is for the inner padding and the 0.4 is photo margins. If you want more or less photos per line it will be (n-1) * 0.1 */
     z-index: 1;
 }
 
@@ -147,7 +155,7 @@ box-shadow: 0 0 10px rgba(0,0,0,.5);
 /* Article/Entry Info                           */
 
 #content {
-    max-width:750px;
+    width:100%;
 }
 
 #entry-info {

static/css/main.css

@@ -1783,9 +1783,9 @@ button,
     -webkit-flex-shrink: 1;
     -ms-flex-shrink: 1;
     flex-shrink: 1;
-    margin: 0 2em 2em 2em;
+    margin: 0 2em 1em 0em;
     position: relative;
-    width: calc(33.33333% - 4em); }
+    width: calc(33.33333% - 2em); }
     .posts article:before {
       background: rgba(210, 215, 217, 0.75);
       content: '';
@@ -1794,13 +1794,13 @@ button,
       left: -2em;
       position: absolute;
       top: 0;
-      width: 1px; }
+      /*width: 1px; */}
     .posts article:after {
       background: rgba(210, 215, 217, 0.75);
       bottom: 0em;
       content: '';
       display: block;
-      height: 1px;
+      /*height: 1px; */
       position: absolute;
       right: 0;
       width: calc(100% + 6em); }
@@ -2119,7 +2119,7 @@ button,
   border-bottom: solid 5px var(--style-colour);
   padding: 6em 0 1em 0;
   position: relative; 
-  max-width:750px;}
+  width:100%;}
   #header > * {
     -moz-flex: 1;
     -webkit-flex: 1;

templates/base.html

@@ -42,6 +42,10 @@
   <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
   {% endif %}
 
+  {% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %}
+	<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css-include/magnific-popup.css">
+  {% endif %}
+
   {% if TRACKING == True %}
   {% include 'include/trackingcode.html' %}
   {% endif %}
@@ -108,6 +112,31 @@
 {{ IMAGETRACKINGCODE }}
 {% endif %}
 
+{% if (article and article.photo_gallery) or (articles_page and articles_page.object_list[0].photo_gallery) %}
+<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
+<!-- Magnific Popup core JS file -->
+<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/magnific-popup.js"></script>
+<script>
+$('.gallery').magnificPopup({
+	delegate: 'a',
+	type: 'image',
+	gallery: {
+		enabled: true,
+		navigateByImgClick: true,
+		preload: [1,2]
+	},
+	image: {
+		titleSrc: function(item) {
+			if (item.el.attr('caption') && item.el.attr('exif')) {
+				return (item.el.attr('caption').replace(/\\n/g, '<br />') +
+					'<small>' + item.el.attr('title') + ' - ' + item.el.attr('exif') + '</small>');
+			}
+		return item.el.attr('title') + '<small>' + item.el.attr('exif') + '</small>';
+	} }
+});
+</script>
+{% endif %}
 </body>
 </html>

templates/include/paginated_posts.html

@@ -7,10 +7,12 @@
                 <a href="{{ SITEURL }}/{{ article.url }}" class="image"><img src="{{ SITEURL }}/{{ article.photo_image[2] }}" style="max-width: 100%; display: inline; float: center;" /></a>
             {% endif %}
             {% if (article.category != MICROBLOG ) %}
+            {% if (testing == 1) %}
             <header> 
                 <h2 id="indexheader"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2> 
             </header>
             {% endif %}    
+            {% endif %}    
             {% if (article.category != MICROBLOG)%}
             {% if (testing == 1) %}
             <div class="entry-content"> {{ article.summary }} </div>