add image optimization to event images

tehlug · Jan 1, 2025 · 848a5e9 · 848a5e9
1 parent 54879f8
commit 848a5e9
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/layouts/_default/event.html b/layouts/_default/event.html
@@ -31,7 +31,7 @@ <h1 class="title">{{ .Title }}</h1>
 		</div>
 
 		{{ if .File.Dir }}
-			{{ if (fileExists (print "./static/events/images/" .Params.eventNumber)) }}
+			{{ if (fileExists (print "./assets/events/images/" .Params.eventNumber)) }}
 				<br>
 				<a href="/events/{{ .Params.eventNumber }}/gallery/">تصاویر</a>
 				<br>
@@ -65,10 +65,15 @@ <h1 class="title">{{ .Title }}</h1>
 		<div class="poster">
 			{{ if .File.Dir }}
 				{{ $basename := (print "/events/poster/" .Params.eventNumber "/") }}
-				{{ if (fileExists (print "./static" $basename)) }}
-					{{ range (readDir (print "./static" $basename )) }}
+				{{ if (fileExists (print "./assets" $basename)) }}
+					{{ range (readDir (print "./assets" $basename )) }}
 						<a href="{{ $basename | relURL }}{{ .Name }}" target="_blank">
-							<img src="{{ $basename | relURL }}{{ .Name }}"/>
+							{{ $image := (resources.Get (print ($basename | relURL) .Name)).Resize "300x" }}
+
+							{{ with $image}}
+								<img src="{{ .RelPermalink }}" />
+							{{ end }}
+
 							{{ index (split .Name ".") 0 }}
 						</a>
 

diff --git a/layouts/_default/gallery.html b/layouts/_default/gallery.html
@@ -13,11 +13,16 @@ <h1 class="title">{{ .Title }}</h1>
 		<div class="gallery">
 			{{ if .File.Dir }}
 				{{ $basename := (print "/events/images/" .Params.eventNumber "/") }}
-				{{ if (fileExists (print "./static" $basename)) }}
-					{{ range (readDir (print "./static" $basename )) }}
+				{{ if (fileExists (print "./assets" $basename)) }}
+					{{ range (readDir (print "./assets" $basename )) }}
 						<div class="gallery-column">
 							<a href="{{ $basename | relURL }}{{ .Name }}" target="_blank">
-								<img src="{{ $basename | relURL }}{{ .Name }}"/>
+								{{ $image := (resources.Get (print ($basename | relURL) .Name)).Resize "300x" }}
+
+								{{ with $image}}
+									<img src="{{ .RelPermalink }}" height="150" />
+								{{ end }}
+
 								{{ index (split .Name ".") 0 }}
 							</a>
 						</div>

diff --git a/layouts/_default/images.html b/layouts/_default/images.html
@@ -8,8 +8,8 @@
 
 		<ul class="posts">
 			{{ if .File.Dir }}
-				{{ if (fileExists (print "./static/events/images/")) }}
-					{{ range (readDir (print "./static/events/images")) }}
+				{{ if (fileExists (print "./assets/events/images/")) }}
+					{{ range (readDir (print "./assets/events/images")) }}
 						<li class="post-summary">
 							<a href="/events/{{.Name}}/gallery">جلسه {{partial "persianNumber.html" .Name}}</a>
 						</li>

diff --git a/static/css/main.css b/static/css/main.css
@@ -483,34 +483,45 @@ table th, table td {
 }
 
 .poster {
-    margin: 0 auto;
-    width: 200px;
+  margin: 0 auto;
+  width: 300px;
+}
+
+.gallery,
+.gallery * {
+  box-sizing: border-box;
 }
 
 .gallery {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0 4px;
-    text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  margin-top: -8px;
+  margin-inline: -4px;
+  width: 100%;
 }
 
 .gallery-column {
-    flex: 25%;
+  flex: 0 0 auto;
+  width: 25%;
+  margin-top: 8px;
+  padding-inline: 4px;
 }
 
 .gallery-column img {
-    margin-top: 8px;
-    width: 100%;
+  margin-block: 8px;
+  width: 100%;
+  object-fit: cover;
 }
 
 @media screen and (max-width: 800px) {
-    .gallery-column {
-        flex: 50%;
-    }
+  .gallery-column {
+    width: 50%;
+  }
 }
 
 @media screen and (max-width: 600px) {
-    .gallery-column {
-        flex: 100%;
-    }
-}
+  .gallery-column {
+    width: 100%;
+  }
+}