From c64fd175505e02204d32b0837dcdab8b981f8da1 Mon Sep 17 00:00:00 2001
From: Matthias Mees <mm@yellowled.de>
Date: Sat, 16 Jun 2018 15:47:29 +0200
Subject: [PATCH] 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 | 10 +++----
templates/2k11/style_fallback.css | 41 +++++++++++++++++++--------
templates/default/style_fallback.css | 41 +++++++++++++++++++--------
3 files changed, 63 insertions(+), 29 deletions(-)
diff --git a/templates/2k11/admin/media_choose.tpl b/templates/2k11/admin/media_choose.tpl
index 0853682d..0f0f1a2a 100644
--- a/templates/2k11/admin/media_choose.tpl
+++ b/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;
diff --git a/templates/2k11/style_fallback.css b/templates/2k11/style_fallback.css
index 232d229e..92516d00 100644
--- a/templates/2k11/style_fallback.css
+++ b/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 */
diff --git a/templates/default/style_fallback.css b/templates/default/style_fallback.css
index 232d229e..92516d00 100644
--- a/templates/default/style_fallback.css
+++ b/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 */