New `photogrid` component (#1338)

build/download-images.js

+#!/usr/bin/env node
+
+'use strict'
+
+const YAML = require('yaml')
+const fs = require('node:fs')
+const path = require('node:path')
+const request = require('request')
+const filePath = path.join(__dirname, '../src/pages/_data/photos.yml')
+
+const photos = YAML.parse(fs.readFileSync(filePath, 'utf8'))
+
+const urlTitle = (str) => {
+  str = str
+		.toLowerCase()
+		.replaceAll('&', 'and')
+		.replace(/[^[a-z0-9-]/g, '-')
+		.replace(/-+/g, '-')
+
+  return str
+}
+
+const download = function(uri, filename, callback, error) {
+  request.head(uri, function(err, res, body) {
+	 request(uri).pipe(fs.createWriteStream(filename))
+		  .on('close', callback)
+		  .on('error', error)
+  })
+}
+
+async function downloadPhotos() {
+  for (const key in photos) {
+	 const photo = photos[key]
+
+	 let filename, i = 1;
+
+	 do {
+		filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
+		i++
+	 } while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
+
+	 await new Promise((resolve, reject) => {
+		download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function(){
+		  resolve()
+		}, function() {
+		  reject()
+		});
+	 })
+
+	 photos[key]['file'] = filename
+	 photos[key]['horizontal'] = photo['width'] > photo['height']
+  }
+
+  fs.writeFileSync(filePath, YAML.stringify(photos))
+}
+
+downloadPhotos();
+

package.json

@@ -17,7 +17,9 @@
     "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "storybook": "start-storybook -p 6006",
     "changelog": "gulp changelog",
-    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push"
+    "icons": "ncu -u @tabler/icons && npm install && gulp svg-icons && git add . && git commit -am \"update icons to v`npm info @tabler/icons version`\" && git push",
+    "download-images": "node build/download-images.js",
+    "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done"
   },
   "repository": {
     "type": "git",
@@ -147,6 +149,7 @@
     "gulp-rtlcss": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-terser": "^2.1.0",
+    "imageoptim-cli": "^3.0.7",
     "imask": "^6.4.3",
     "jsvectormap": "^1.5.1",
     "list.js": "^2.3.1",
@@ -155,6 +158,7 @@
     "plyr": "^3.7.2",
     "postcss": "^8.4.18",
     "release-it": "^15.5.0",
+    "request": "^2.88.2",
     "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",

src/pages/_data/menu.yml

@@ -206,6 +206,10 @@ extra:
     music:
       title: Music
       url: music.html
+    photogrid:
+      title: Photogrid
+      url: photogrid.html
+      badge: New
     tasks:
       title: Tasks
       url: tasks.html

src/pages/_docs/browser-support.md

@@ -11,11 +11,11 @@ For instance, Tabler no longer uses **vendor prefixes** in styles that are known
 
 Browser|Version
 ---|----------
-<img src="/static/browsers/edge.svg" width="24" height="24" class="me-2" /> Edge|last 3 versions
-<img src="/static/browsers/firefox.svg" width="24" height="24" class="me-2" /> Firefox|last 3 versions, ESR
-<img src="/static/browsers/chrome.svg" width="24" height="24" class="me-2" /> Chrome|last 3 versions
-<img src="/static/browsers/safari.svg" width="24" height="24" class="me-2" /> Safari|last 3 versions
-<img src="/static/browsers/opera.svg" width="24" height="24" class="me-2" /> Opera|last 3 versions
-<img src="/static/browsers/electron.svg" width="24" height="24" class="me-2" /> Electron|last 3 versions
-<img src="/static/browsers/brave.svg" width="24" height="24" class="me-2" /> Brave|last 3 versions
-<img src="/static/browsers/vivaldi.svg" width="24" height="24" class="me-2" /> Vivaldi|last 3 versions
\ No newline at end of file
+<img src="{{ site.base }}/static/browsers/edge.svg" width="24" height="24" class="me-2" /> Edge|last 3 versions
+<img src="{{ site.base }}/static/browsers/firefox.svg" width="24" height="24" class="me-2" /> Firefox|last 3 versions, ESR
+<img src="{{ site.base }}/static/browsers/chrome.svg" width="24" height="24" class="me-2" /> Chrome|last 3 versions
+<img src="{{ site.base }}/static/browsers/safari.svg" width="24" height="24" class="me-2" /> Safari|last 3 versions
+<img src="{{ site.base }}/static/browsers/opera.svg" width="24" height="24" class="me-2" /> Opera|last 3 versions
+<img src="{{ site.base }}/static/browsers/electron.svg" width="24" height="24" class="me-2" /> Electron|last 3 versions
+<img src="{{ site.base }}/static/browsers/brave.svg" width="24" height="24" class="me-2" /> Brave|last 3 versions
+<img src="{{ site.base }}/static/browsers/vivaldi.svg" width="24" height="24" class="me-2" /> Vivaldi|last 3 versions
\ No newline at end of file

src/pages/_includes/cards/card-image.html

+{% assign img-id = include.img-id | default: 1 %}
 <div class="card">
-   <div class="row row-0">
-      <div class="col-3{% if include.right %} order-md-last{% endif %}">
-         <img src="{{ site.base }}/static/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover card-img-{% if include.right %}end{% else %}start{% endif %}" alt="{{ include.img-alt | default: 'Card side image' }}">
-      </div>
-      <div class="col">
-         <div class="card-body">
-            {% if include.title %}
-            <h3 class="card-title">{{ include.title }}</h3>
-            {% endif %}
-            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-               neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-         </div>
-      </div>
-   </div>
+	<div class="row row-0">
+		<div class="col-3{% if include.right %} order-md-last{% endif %}">
+			{% assign class = "w-100 h-100 object-cover" %}
+			{% if include.right %}{% assign class = class | append: " card-img-end" %}{% else %}{% assign class = class | append: " card-img-start" %}{% endif %}
+			{% include ui/photo.html id=img-id class=class %}
+		</div>
+		<div class="col">
+			<div class="card-body">
+				{% if include.title %}
+				<h3 class="card-title">{{ include.title }}</h3>
+				{% endif %}
+				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit
+					incidunt, iste, itaque minima
+					neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+			</div>
+		</div>
+	</div>
 </div>

src/pages/_includes/cards/card.html

@@ -8,7 +8,7 @@
 	{% else %}
 
 		{% if include.img-top %}
-		<div class="card-img-top img-responsive img-responsive-21x9" style="background-image: url({{ site.base }}/static/photos/9f36332564ca271d.jpg)"></div>
+		{% include ui/photo.html id=img-id class="card-img-top" ratio="21x9" id=7 %}
 		{% endif %}
 
 		{% if include.status-top %}
@@ -104,7 +104,8 @@
 		{% endif %}
 
 		{% if include.img-bottom %}
-		<div class="card-img-bottom img-responsive img-responsive-21x9" style="background-image: url({{ site.base }}/static/photos/56614e12b2a7bd68.jpg)"></div>
+
+		{% include ui/photo.html id=img-id class="card-img-bottom" ratio="21x9" id=11 %}
 		{% endif %}
 
 		{% if include.progress %}

src/pages/_includes/cards/company-employees.html

@@ -23,7 +23,7 @@
 					<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
 				</div>
 			</td>
-			<td><a href="" class="text-muted">{% include ui/icon.html icon="dots" %}</a></td>
+			<td><a href="{{ site.base }}" class="text-muted">{% include ui/icon.html icon="dots" %}</a></td>
 		</tr>
 		{% endfor %}
 	</table>

src/pages/_includes/ui/photo.html

+<!-- Photo -->
+{% if include.id %}
+{% assign id = include.id | default: 1 %}
+{% if include.horizontal %}
+{% assign photos = site.data.photos | where: 'horizontal', true %}
+{% else %}
+{% assign photos = site.data.photos %}
+{% endif %}
+{% assign photo = photos[id] %}
+
+{% if include.background %}
+<div{% if include.class %} class="{{ include.class }}"{% endif %} style="background-image: url({{ site.base }}/static/photos/{{ photo.file }})"></div>
+{% elsif include.ratio %}
+<div class="img-responsive img-responsive-{{ include.ratio }}{% if include.class %} {{ include.class }}{% endif %}" style="background-image: url({{ site.base }}/static/photos/{{ photo.file }})"></div>
+{% else %}
+<img src="{{ site.base }}/static/photos/{{ photo.file }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="{{ photo.title }}" />
+{% endif %}
+
+{% else %}
+{% include ui/svg.html width=640 height=480 border=true class=include.class %}
+{% endif %}
\ No newline at end of file

src/pages/cards.html

@@ -156,7 +156,7 @@ menu: base.cards.base
 		{% include cards/card-image.html title="Card with left side image" %}
 	</div>
 	<div class="col-lg-6">
-		{% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
+		{% include cards/card-image.html title="Card with right side image" right=true img-id=3 %}
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include cards/card.html img-top=true title="Card with top image" %}

src/pages/lightbox.html

@@ -10,8 +10,8 @@ menu: base.lightbox
 <div class="row row-cols-6 g-3">
 	{% for photo in photos %}
 	<div class="col">
-		<a data-fslightbox="gallery" href="/static/photos/{{ photo.file }}">
-			<img src="/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="rounded">
+		<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ photo.file }}">
+			{% include ui/photo.html id=forloop.index0 class="rounded border" ratio="1x1" %}
 		</a>
 	</div>
 	{% endfor %}

src/pages/photogrid.html

+---
+title: Photogrid
+page-header: Photogrid
+menu: extra.photogrid
+libs: fslightbox
+---
+
+{% capture svg %}
+{% include ui/svg.html width=640 height=480 border=true %}
+{% endcapture %}
+
+<div class="row g-2 g-md-3">
+	<div class="col-lg-6">
+		<div class="row g-2 g-md-3">
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[5].file }}">
+					{% include ui/photo.html id=5 class="rounded-3 border" ratio="3x1" %}
+				</a>
+			</div>
+			<div class="col-6">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[6].file }}">
+					{% include ui/photo.html id=6 class="rounded-3 border" ratio="1x1" %}
+				</a>
+			</div>
+			<div class="col-6">
+				<div class="row g-2 g-md-3">
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[7].file }}">
+							{% include ui/photo.html id=7 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[8].file }}">
+							{% include ui/photo.html id=8 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[9].file }}">
+							{% include ui/photo.html id=9 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[10].file }}">
+							{% include ui/photo.html id=10 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[16].file }}">
+					{% include ui/photo.html id=16 class="rounded-3 border" ratio="4x1" %}
+				</a>
+			</div>
+		</div>
+	</div>
+	<div class="col-lg-6">
+		<div class="row g-2 g-md-3">
+			<div class="col-6">
+				<div class="row g-2 g-md-3">
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[14].file }}">
+							{% include ui/photo.html id=14 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[15].file }}">
+							{% include ui/photo.html id=15 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[12].file }}">
+							{% include ui/photo.html id=12 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+					<div class="col-6">
+						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[13].file }}">
+							{% include ui/photo.html id=13 class="rounded-3 border" ratio="1x1" %}
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="col-6">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[1].file }}">
+					{% include ui/photo.html id=1 class="rounded-3 border" ratio="1x1" %}
+				</a>
+			</div>
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[4].file }}">
+					{% include ui/photo.html id=4 class="rounded-3 border" ratio="4x1" %}
+				</a>
+			</div>
+			<div class="col-12">
+				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[17].file }}">
+					{% include ui/photo.html id=17 class="rounded-3 border" ratio="3x1" %}
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/pages/sign-in-cover.html

@@ -23,6 +23,6 @@ body-class: d-flex flex-column bg-white
 		</div>
 	</div>
 	<div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
-		<div class="bg-cover h-100 min-vh-100" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file}})"></div>
+		{% include ui/photo.html id=11 class="bg-cover h-100 min-vh-100" background=true %}
 	</div>
 </div>
\ No newline at end of file

src/scss/_variables.scss

@@ -8,6 +8,7 @@ $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
 $enable-negative-margins: false !default;
 $enable-rfs: false !default;
+$enable-cssgrid: true !default;
 
 // ASSETS BASE
 $assets-base: ".." !default;
@@ -369,6 +370,10 @@ $size-values: map-merge($spacers, (
 // Aspect ratios
 $aspect-ratios: (
   "1x1": 100%,
+  "2x1": calc(1 / 2 * 100%),
+  "1x2": calc(2 / 1 * 100%),
+  "3x1": calc(1 / 3 * 100%),
+  "1x3": calc(3 / 1 * 100%),
   "4x3": calc(3 / 4 * 100%),
   "3x4": calc(4 / 3 * 100%),
   "16x9": calc(9 / 16 * 100%),

src/scss/ui/_images.scss

 .img-responsive {
+  --#{$prefix}img-responsive-ratio: #{percentage(.75)};
   background: no-repeat center/cover;
-  padding-top: percentage(.75);
+  padding-top: var(--#{$prefix}img-responsive-ratio);
+}
+
+.img-responsive-grid {
+  padding-top: calc(var(--#{$prefix}img-responsive-ratio) - calc(var(--#{$prefix}gutter-y) / 2));
 }
 
 @each $key, $ratio in $aspect-ratios {
   .img-responsive-#{$key} {
-    padding-top: $ratio;
+    --#{$prefix}img-responsive-ratio: #{$ratio};
   }
 }