v1.0.09

Stream/CHANGEDB.php

@@ -50,3 +50,8 @@
 $sql[$count][0] = '1.0.08';
 $sql[$count][1] = "
 ";
+
+//v1.0.09
+$sql[$count][0] = '1.0.09';
+$sql[$count][1] = "
+";

Stream/CHANGELOG.txt

@@ -1,5 +1,9 @@
 CHANGELOG
 =========
+v1.0.09
+-------
+Changed the images in posts to a masonry-style layout
+
 v1.0.08
 -------
 Tweaked the aspect ratio of images so less of the image is cropped

Stream/css/module.css

@@ -16,9 +16,22 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 */
+.columns-1 {
+    columns: 1;
+}
 
 @media (min-width:640px){
-    .sm\:h-80 {
-        height: 20rem;
+    .sm\:columns-2 {
+        columns: 2;
+    }
+}
+
+@media (min-width:1000px){
+    .lg\:columns-3 {
+        columns: 3;
+    }
+
+    .lg\:columns-4 {
+        columns: 4;
     }
 }

Stream/manifest.php

@@ -25,7 +25,7 @@
 $entryURL = 'stream.php';
 $type = 'Additional';
 $category = 'Other';
-$version = '1.0.08';
+$version = '1.0.09';
 $author = 'Sanda Kuipers, Harry Merrett & Ross Parker';
 $url = 'https://gibbonedu.org';
 

Stream/templates/streamPosts.twig.html

@@ -6,6 +6,7 @@
 For info about editing, see: https://twig.symfony.com/doc/2.x/
 -->#}
 {% for post in stream %}
+
     <div class="flex bg-white p-4 sm:px-5 sm:py-6 font-sans border-b }}">
 
         <aside class="w-8 sm:w-12 mr-3 sm:mr-4 ">
@@ -30,14 +31,25 @@
             </div>
 
             {% if post.attachments %}
-                <div class="image-container flex flex-wrap justify-start  mt-2 -m-1">
+
+                {% if post.attachments|length == 1 %}
+                    {% set postClass = 'columns-1' %}
+                {% elseif post.attachments|length % 2 == 0 %}
+                    {% set postClass = post.attachments|length > 6 ? 'columns-1 sm:columns-2 lg:columns-4' : 'columns-1 sm:columns-2' %}
+                {% else %}
+                    {% set postClass = post.attachments|length > 6 ? 'columns-1 sm:columns-2 lg:columns-3' : 'columns-1 sm:columns-2' %}
+                {% endif %}
+
+                <div class="image-container mt-6 {{ postClass }}" style="column-fill: balance;">
                 {% for attachment in post.attachments %}
-                    <figure class="{{ loop.length % 3 == 0 ? 'w-1/3 h-32 sm:h-56' : loop.length % 2 == 1 and loop.index == 1 ? 'w-full h-40 sm:h-80' : 'w-1/2 h-32 sm:h-56' }} p-1" style="line-height: 0;">
+
                     {% if attachment.type == 'Image' %}
-                        <a class="block w-full h-full rounded-sm overflow-hidden bg-no-repeat bg-cover bg-center" href="{{ absoluteURL }}/{{ attachment.attachment }}" data-caption="{{ post.post|striptags }}" style="background-image:url('{{ absoluteURL }}/{{ attachment.thumbnail }}')">
-                        </a>
+                    <a class="block w-full h-full" href="{{ absoluteURL }}/{{ attachment.attachment }}" data-caption="{{ post.post|striptags }}">
+
+                        <img class="image-item w-full rounded-sm mb-3" src="{{ absoluteURL }}/{{ attachment.attachment }}" data-caption="{{ post.post|striptags }}" style="break-inside: avoid;">
+                    </a>
                     {% endif %}
-                    </figure>
+
                 {% endfor %}
 
                 </div>
@@ -49,9 +61,24 @@
     </div>
 {% endfor %}
 <style>
+    .columns-1 {
+        columns: 1;
+    }
+
     @media (min-width:640px){
-        .sm\:h-80 {
-            height: 20rem;
+        .sm\:columns-2 {
+            columns: 2;
         }
     }
+
+    @media (min-width:1000px){
+        .lg\:columns-3 {
+            columns: 3;
+        }
+
+        .lg\:columns-4 {
+            columns: 4;
+        }
+    }
+
 </style>

Stream/version.php

@@ -20,4 +20,4 @@
 /**
  * Sets version information.
  */
-$moduleVersion = '1.0.08';
+$moduleVersion = '1.0.09';