Add mvp HTML/CSS for media galleries

- Use proper semantic markup for s9y_gallery
- Add a few classes just in case
- Add basic CSS for image galleries
- Backport gallery styles to default

References #552

templates/2k11/admin/media_choose.tpl

@@ -3,14 +3,14 @@
 {else}
     {if $medias}
         <script>
-            block = '<div class="s9y_gallery">';
+            block = '<ul class="s9y_gallery plainList">';
             {foreach $medias as $media}
-                {* here generate the images of the gallery, with their markup *}
+                {* generate the images of the gallery with their markup *}
                 {serendipity_hookPlugin hookAll=true hook='frontend_image_add_unknown' eventData=$media}
-                block += '<img src="{$media.file.full_thumbHTTP|escape}" />';
+                block += '<li class="s9y_gallery_item"><img class="s9y_gallery_image" src="{$media.file.full_thumbHTTP|escape}" alt=""></li>';
             {/foreach}
-            block += '</div>';
-            
+            block += '</ul>';
+
             if (parent.self.opener == undefined) {
                 // in iframes, there is no opener, and the magnific popup is wrapped
                 parent.self = window.parent.parent.$.magnificPopup;

templates/2k11/style_fallback.css

@@ -9,23 +9,23 @@
 
 /* Images positioned normal/left/right */
 .serendipity_image_center {
-  border: 0;
-  padding-left: 5px;
-  padding-right: 5px;
+    border: 0;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .serendipity_image_left {
-  float: left;
-  border: 0;
-  padding-left: 5px;
-  padding-right: 5px;
+    float: left;
+    border: 0;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .serendipity_image_right {
-  float: right;
-  border: 0;
-  padding-left: 5px;
-  padding-right: 5px;
+    float: right;
+    border: 0;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 /* Images with captions and positioning */
@@ -67,6 +67,24 @@
     text-align: center;
 }
 
+/* Image gallery */
+.s9y_gallery {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.s9y_gallery_item {
+    box-sizing: border-box;
+    flex: 0 1 33.3333%;
+    padding: 0 5px 5px 0;
+}
+
+.s9y_gallery_image {
+    height: auto;
+    max-width: 100%;
+}
+
 /* Lists without bullets or numbers */
 .plainList {
     list-style: none;
@@ -88,5 +106,4 @@
 .serendipity_msg_notice {
     color: green;
 }
-
 /* END OF style_fallback.css */

templates/default/style_fallback.css

@@ -9,23 +9,23 @@
 
 /* Images positioned normal/left/right */
 .serendipity_image_center {
-  border: 0;
-  padding-left: 5px;
-  padding-right: 5px;
+    border: 0;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .serendipity_image_left {
-  float: left;
-  border: 0;
-  padding-left: 5px;
-  padding-right: 5px;
+    float: left;
+    border: 0;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .serendipity_image_right {
-  float: right;
-  border: 0;
-  padding-left: 5px;
-  padding-right: 5px;
+    float: right;
+    border: 0;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 /* Images with captions and positioning */
@@ -67,6 +67,24 @@
     text-align: center;
 }
 
+/* Image gallery */
+.s9y_gallery {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.s9y_gallery_item {
+    box-sizing: border-box;
+    flex: 0 1 33.3333%;
+    padding: 0 5px 5px 0;
+}
+
+.s9y_gallery_image {
+    height: auto;
+    max-width: 100%;
+}
+
 /* Lists without bullets or numbers */
 .plainList {
     list-style: none;
@@ -88,5 +106,4 @@
 .serendipity_msg_notice {
     color: green;
 }
-
 /* END OF style_fallback.css */