Merge pull request #32 from OpenRailAssociation/images-improvements

Improve some technical aspects of images and resources

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "themes/hugomods-images"]
+	path = themes/hugomods-images
+	url = https://github.com/hugomods/images.git

config.yaml

@@ -2,7 +2,7 @@
 ## Basic Configuration
 ## -----------------------------------------------
 
-theme: openrail
+theme: ["openrail", "hugomods-images"]
 title: OpenRail Association
 copyright: "{year}"
 
@@ -36,5 +36,18 @@ Params:
       - css/fontawesome-all.min.css
     fontawesome_js:
       - js/fontawesome-all.min.js
+
+  # hugomods-images config
+  hugomods:
+    images:
+      # Disable WebP
+      modern_format:
 permalinks:
   news: "/news/:2006/:title/"
+
+# Modules
+module:
+  mounts:
+  # Make all static content available as assets by default
+  - source: static/
+    target: assets/

content/news/2024-01-29-openrail-association-founded.md

@@ -17,4 +17,4 @@ With our official incorporation, we are now ready to accept project proposals an
 
 To ensure the success of these endeavors, we will establish routines and guidelines to support the hosting of professional Open Source projects. This framework will enable all OpenRail projects to thrive, benefit from synergies and collaboration, and ultimately contribute to the advancement of the entire railway sector.
 
-Interested in finding out more? Discover how you can join the [OpenRail Association and its community]({{< relref "/about" >}}) and become a part of this transformative initiative.
+Interested in finding out more? Discover how you can join the [OpenRail Association and its community]({{% relref "/about" %}}) and become a part of this transformative initiative.

content/news/2024-06-26-open-transport-meetup.md

@@ -7,7 +7,7 @@ image:
   class: image-position-center
 ---
 
-Cornelius Schumacher, chair of the Technical Committee of the OpenRail Association, was a guest at the Open Transport Meetup to present the OpenRail Association. He talked about how the organization operates, looking back at the first couple of months since its formal foundation in January 2024, about the first projects, which were onboarded, and what the OpenRail Association strives for in the future. See the [slides](/presentations/2024-06-26-OpenTransport-OpenRail.pdf) to get an impression of the presentation.
+Cornelius Schumacher, chair of the Technical Committee of the OpenRail Association, was a guest at the Open Transport Meetup to present the OpenRail Association. He talked about how the organization operates, looking back at the first couple of months since its formal foundation in January 2024, about the first projects, which were onboarded, and what the OpenRail Association strives for in the future. See the [slides]({{< relurl "/presentations/2024-06-26-OpenTransport-OpenRail.pdf" >}}) to get an impression of the presentation.
 
 ### About the Open Transport Meetup
 

data/members.yml

@@ -7,34 +7,26 @@ introduction: |
   founded and joined the OpenRail Association, and firmly believe that Open
   Source is a great opportunity for this industry.
 
-listclass: style1 medium less-bottom-margin less-top-margin
+listclass: less-bottom-margin less-top-margin flex-cards
+base_img_size: 200px
 
 members:
   - name: UIC
     link: https://uic.org
     imgsrc: images/members/uic.jpg
-    imgheight: 100
-    imgmargin: 25
   - name: Deutsche Bahn
     link: https://deutschebahn.com
     imgsrc: images/members/db.png
-    imgheight: 80
-    imgmargin: 35
+    resize: -30px
   - name: SNCF
     link: https://sncf.com
     imgsrc: images/members/sncf.png
-    imgheight: 80
-    imgmargin: 35
   - name: SBB CFF FFS
     link: https://www.sbb.ch
     imgsrc: images/members/sbb.png
-    imgheight: 90
-    imgmargin: 30
   - name: Entur
     link: https://developer.entur.org
     imgsrc: images/members/entur.png
-    imgheight: 50
-    imgmargin: 50
 
 join_title: And how about you?
 join_text: |

themes/openrail/assets/sass/custom/openrail.scss

@@ -100,11 +100,45 @@ section.news-list:first-of-type {
 // -----------------------------------------------------------------------------
 // MEMBERSHIP
 
-#members-overview section {
-  border: 0;
+.flex-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center; // Center images vertically
+  gap: 10px 50px;
+
+  div.card.flex-4-per-row {
+    // Size of the image container. Default: 200px
+    $base_img_size: var(--base_img_size, 200px);
+    // Resize the image when --resize is set. Usually a minus value to make logos the felt same size
+    // Default: $base_img_size
+    $img_square: calc(#{$base_img_size} + (var(--resize, 0px)));
+
+    display: flex;
+    flex-basis: 21%;
+    flex-direction: column;
+    align-items: center; // Ensure the content (image and text) is centered within each div
+    flex-grow: 1;
+    min-width: $base_img_size;
+    min-height: $base_img_size;
+
+    .image-wrapper {
+      display: flex;
+      align-items: center; // Ensure the content (image and text) is centered within each div
+      height: $base_img_size;
+      margin-bottom: 5px; // Space between image and text
+
+      img {
+        max-width: $img_square;
+        max-height: $img_square;
+        object-fit: contain;
+      }
+    }
 
-  @media screen and (min-width: 981px) {
-    width: 25%;
+    p {
+      margin-top: 0px;
+      font-size: 1.3rem;
+    }
   }
 }
 
@@ -173,12 +207,36 @@ div.people-gallery {
       }
     }
 
-  @media screen and (max-width: 767px) {
-    min-width: $person-width-small !important;
-    img {
-      height: $person-width-small;
-      width: $person-width-small;
+    @media screen and (max-width: 767px) {
+      min-width: $person-width-small !important;
+
+      img {
+        height: $person-width-small;
+        width: $person-width-small;
+      }
     }
   }
+}
+
+// -----------------------------------------------------------------------------
+// IMAGES, especially hugomods-image related (like Bootstrap)
+
+picture {
+  @media screen and (min-width: 768px) {
+    &.float-start {
+      float: left;
+      margin-top: 10px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      margin-left: 0px;
+    }
+
+    &.float-end {
+      float: right;
+      margin-top: 10px;
+      margin-left: 20px;
+      margin-bottom: 10px;
+      margin-right: 0px;
+    }
   }
 }

themes/openrail/layouts/news/list.html

@@ -30,8 +30,9 @@ <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
       </div>
       {{ if .Params.image }}
       <div class="image">
-        <img src="{{ relURL .Params.image.src }}"
-            alt="{{ .Params.image.alt }}" />
+        {{- with (resources.Get .Params.image.src).Resize "x300" }}
+        <img src="{{ .RelPermalink }}" alt="{{ .Params.image.alt }}" />
+        {{- end }}
       </div>
       {{ end }}
       </section>

themes/openrail/layouts/news/single.html

@@ -25,8 +25,9 @@ <h2>{{ .Title }}</h2>
       </div>
       {{ if .Params.image }}
       <div class="image">
-        <img src="{{ relURL .Params.image.src }}"
-            alt="{{ .Params.image.alt }}" />
+        {{- with (resources.Get .Params.image.src).Resize "x600" }}
+        <img src="{{ .RelPermalink }}" alt="{{ .Params.image.alt }}" />
+        {{- end }}
       </div>
       {{ end }}
       </section>

themes/openrail/layouts/partials/members.html

@@ -5,14 +5,17 @@ <h2>{{ .title }}</h2>
     <p>
       {{ with .introduction }}{{ . | safeHTML }}{{ end }}
     </p>
-    <div class="items {{ .listclass }}" id="members-overview">
+    <div class="{{ .listclass }}" id="members-overview" style="--base_img_size: {{ .base_img_size }}">
       {{ range .members }}
-      <section>
-        <a href="{{ .link }}" target="_blank">
-          <img src="{{ .imgsrc }}" height="{{ .imgheight }}" style="margin: {{ .imgmargin }}px;" alt="{{ .name }} logo" />
-        </a>
-        <h3>{{ .name }}</h3>
-      </section>
+      <div class="card flex-4-per-row" {{ with .resize }}style="--resize:{{ . }};" {{ end }}>
+        <div class="image-wrapper">
+          <a href="{{ .link }}" target="_blank">
+            {{- $img_resized := (resources.Get .imgsrc).Resize "300x" }}
+            <img src="{{ $img_resized.RelPermalink }}" alt="{{ .name }} logo" />
+          </a>
+        </div>
+        <p>{{ .name }}</p>
+      </div>
       {{ end }}
     </div>
     <div class="index align-left">

themes/openrail/layouts/shortcodes/people/person.html

@@ -1,6 +1,11 @@
 {{ $data := (index .Site.Data.people .Params.id) -}}
 <section class="person" id="{{ .Params.id }}">
-  <img src="/images/people/{{ with $data.img }}{{ . }}{{ else }}default.jpg{{ end }}" alt="Picture of {{ $data.name }}">
+  {{- $img := "images/people/default.jpg" }}
+  {{- with $data.img }}
+  {{- $img = path.Join "images/people" . }}
+  {{- end }}
+  {{- $img_resized := (resources.Get $img).Fill "300x300 Center" }}
+  <img src="{{ $img_resized.RelPermalink }}" alt="Picture of {{ $data.name }}">
   <h5>{{ $data.name }}</h5>
   {{ with $data.openrail_role -}}
   <p><em>{{ . }}</em></p>

themes/openrail/layouts/shortcodes/relurl.html

@@ -0,0 +1 @@
+{{ relURL (.Get 0) }}