further optimized loading times via reducing image sizes

DanielTheCoder · DanielTheCoder · commit 4b68ef4f1c70 · 2025-04-27T02:18:59.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 .hugo_build.lock
 .idea
 public/
+# directory of generated images with reduzed size
+resources/_gen/
diff --git a/content/hero/comocamp-smaller.png b/content/hero/comocamp-smaller.png
diff --git a/layouts/page/camp.html b/layouts/page/camp.html
@@ -10,7 +10,9 @@ <h2 class="mb-5">{{ .Title }}</h2>
 
       <div class="row">
         <div class="col-lg-12 mt-0">
-          {{ with $.Resources.Get "image-1.jpg" }}
+          {{ $image := $.Resources.Get "image-1.jpg"}}
+          {{ $image := $image.Process "resize width 1296x" }}
+          {{ with $image }}
           <img src="{{ .RelPermalink }}" class="img-fluid rounded-4 mb-4" alt="">
           {{ end }}
         </div>
@@ -30,7 +32,9 @@ <h2 class="mb-5">{{ .Title }}</h2>
               {{ end }}
             </ul>
             <div class="position-relative m-0 mb-lg-3">
-              {{ with $.Resources.Get "image-2.jpg" }}
+              {{ $image := $.Resources.Get "image-2.jpg"}}
+              {{ $image := $image.Process "resize width 628x" }}
+              {{ with $image }}
               <img src="{{ .RelPermalink }}" class="img-fluid rounded-4" alt="">
               {{ end }}
             </div>
@@ -40,7 +44,9 @@ <h2 class="mb-5">{{ .Title }}</h2>
           <div class="content ps-0 ps-lg-4">
             <p>{{ $.Params.text2 | markdownify }}</p>
             <div class="position-relative mt-4 m-0">
-              {{ with $.Resources.Get "image-3.jpg" }}
+              {{ $image := $.Resources.Get "image-3.jpg"}}
+              {{ $image := $image.Process "resize width 612x" }}
+              {{ with $image }}
               <img src="{{ .RelPermalink }}" class="img-fluid rounded-4" alt="">
               {{ end }}
             </div>
diff --git a/layouts/page/community.html b/layouts/page/community.html
@@ -15,7 +15,9 @@ <h2>{{ .Title }}</h2>
             <div class="testimonial-wrap">
               <div class="testimonial-item">
                 <div class="d-flex align-items-center">
-                  {{ with $.Resources.Get .image }}
+                  {{ $image := $.Resources.Get .image }}
+                  {{ $image := $image.Process "resize width 200x" }}
+                  {{ with $image }}
                   <img src="{{ .RelPermalink }}" class="testimonial-img flex-shrink-0" alt="">
                   {{ end }}
                   <div>
diff --git a/layouts/page/hero.html b/layouts/page/hero.html
@@ -8,7 +8,9 @@ <h2>{{ .Params.conference | safeHTML }}</h2>
       </div>
       <div class="row gy-5" data-aos="fade-in">
         <div class="col-lg-9 order-1 order-lg-2 offset-lg-3 offset-xs-0">
-          {{ with .Resources.Get "comocamp-smaller.png" }}
+          {{ $image := .Resources.Get "comocamp.png"}}
+          {{ $image := $image.Process "resize width 966x" }}
+          {{ with $image }}
             <img src="{{ .RelPermalink }}" class="img-fluid" alt="" data-aos="zoom-out" data-aos-delay="100">
           {{ end }}
         </div>
diff --git a/layouts/page/location.html b/layouts/page/location.html
@@ -14,7 +14,9 @@ <h2>{{ .Title }}</h2>
             <article style="padding: 0px; margin: 0px;">
 
                 <div class="post-img">
-                    {{ with $.Resources.Get (printf "%d.png" .) }}
+                    {{ $image := $.Resources.Get (printf "%d.png" .)}}
+                    {{ $image := $image.Process "resize width 416x" }}
+                    {{ with $image }}
                     <img src="{{ .RelPermalink }}" class="img-fluid" alt="">
                     {{ end }}
                 </div>
diff --git a/layouts/page/media-partners.html b/layouts/page/media-partners.html
@@ -12,8 +12,10 @@
                 <div class="post-img align-items-center" style="vertical-align: middle; text-align: center;">
                   {{ $link := .link }}
                   {{ $logo := .logo }}
-                  {{ with $.Resources.Get (print .logo ".png") }}
-                    <a href="{{ $link }}"><img src="{{ .RelPermalink }}" class="mx-auto d-block {{ $logo }}"></a>
+                  {{ $image := $.Resources.Get (print .logo ".png") }}
+                  {{ $image := $image.Process "resize width 400x" }}
+                  {{ with $image }}
+                    <a href="{{ $link }}"><img src="{{ .RelPermalink }}" alt="Logo {{ $link }}" class="mx-auto d-block {{ $logo }}"></a>
                   {{ end }}
                 </div>
                 <p class="post-category centered">{{ .text | markdownify }}</p>  
diff --git a/layouts/page/participation.html b/layouts/page/participation.html
@@ -22,7 +22,13 @@ <h3 {{ if .soldout }}class="soldout"{{ end }}>{{ .title | safeHTML }}</h3>
   
                 <div class="icon {{ if .soldout }}soldout{{ end }}">
                   <i class="bi bi-{{ .icon }} {{ if .soldout }}soldout{{ end }}"></i>
-                  {{ if .soldout }}<img width="200" height="200" class="soldout-image" src="participation/sold-out.png"></img>{{ end }}
+                  {{ if .soldout }}
+                    {{ $image := $.Resources.Get "sold-out.png" }}
+                    {{ $image := $image.Process "resize width 200x" }}
+                    {{ with $image }}
+                      <img width="200" height="200" class="soldout-image" src="{{ .RelPermalink }}">
+                    {{ end }}
+                  {{ end }}
                 </div>
                 {{ if eq .style "hotel" }}<p>Prices start from</p>{{ end }}
                 <h4 {{ if .soldout }}class="soldout"{{ end }}><sup>€ </sup>{{ .price }}{{ if eq .style "hotel" }}<span> per night</span>{{ end }}</h4>
diff --git a/layouts/page/supporters-2.html b/layouts/page/supporters-2.html
@@ -23,8 +23,10 @@ <h2>{{ .Title }}</h2>
   
                 <div class="post-img align-items-center" style="vertical-align: middle; text-align: center;">
                   {{ $link := .link }}
-                  {{ with $.Resources.Get (print .logo ".png") }}
-                    <a href="{{ $link }}" style="text-align: center"><img style="height:100%" src="{{ .RelPermalink }}" class="mx-auto d-block"></a>
+                  {{ $image := $.Resources.Get (print .logo ".png") }}
+                  {{ $image := $image.Process "resize width 400x" }}
+                  {{ with $image }}
+                    <a href="{{ $link }}" style="text-align: center"><img style="height:100%" src="{{ .RelPermalink }}" alt="Logo {{ $link }}" class="mx-auto d-block"></a>
                   {{ end }}
                 </div>
 
diff --git a/layouts/page/supporters.html b/layouts/page/supporters.html
@@ -19,8 +19,10 @@ <h2>{{ .Title }}</h2>
   
                 <div class="post-img align-items-center" style="vertical-align: middle; text-align: center;">
                   {{ $link := .link }}
-                  {{ with $.Resources.Get (print .logo ".png") }}
-                    <a href="{{ $link }}" style="text-align: center"><img style="height:100%" src="{{ .RelPermalink }}" class="mx-auto d-block"></a>
+                  {{ $image := $.Resources.Get (print .logo ".png") }}
+                  {{ $image := $image.Process "resize width 400x" }}
+                  {{ with $image }}
+                    <a href="{{ $link }}" style="text-align: center"><img style="height:100%" src="{{ .RelPermalink }}" alt="Logo {{ $link }}" class="mx-auto d-block"></a>
                   {{ end }}
                 </div>
 
diff --git a/layouts/page/team.html b/layouts/page/team.html
@@ -13,7 +13,9 @@ <h2>{{ .Title }}</h2>
             {{ range .Params.organizer }}
             <div class="col-xl-3 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">
               <div class="member">
-                {{ with $.Resources.Get .image }}
+                {{ $image := $.Resources.Get .image }}
+                {{ $image := $image.Process "resize width 500x" }}
+                {{ with $image }}
                   <img src="{{ .RelPermalink }}" class="img-fluid" alt="">
                 {{ end }}
                 <h4>{{ .name }}</h4>
@@ -37,7 +39,9 @@ <h4>{{ .name }}</h4>
             {{ range .Params.helpingHand }}
             <div class="col-xl-2 col-md-4 d-flex" data-aos="fade-up" data-aos-delay="100" style="justify-content: center;">
               <div class="member">
-                {{ with $.Resources.Get .image }}
+                {{ $image := $.Resources.Get .image }}
+                {{ $image := $image.Process "resize width 280x" }}
+                {{ with $image }}
                   <img src="{{ .RelPermalink }}" class="img-fluid" alt="">
                 {{ end }}
                 <h4>{{ .name | replaceRE "\\s+" "<br>" | safeHTML }}</h4>
diff --git a/layouts/page/we-are-looking-forward.html b/layouts/page/we-are-looking-forward.html
@@ -6,7 +6,9 @@ <h2>{{ .Title }}</h2>
 
       <div class="row">
         <div class="col-lg-12">
-          {{ with $.Resources.GetMatch "*" }}
+          {{ $image := $.Resources.GetMatch "*" }}
+          {{/*  {{ $image := $image.Process "resize width 936x" }}  */}}
+          {{ with $image }}
           <img src="{{ .RelPermalink }}" class="img-fluid rounded-4 mb-4" alt="">
           {{ end }}
         </div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -6,7 +6,12 @@
         <div class="col-lg-4 col-12 footer-info text-center text-lg-start mb-3">
           <span class="logo d-flex align-items-center justify-content-center justify-content-lg-start">
             <span>About the&nbsp;</span>
-            <img src="hero/comocamp-smaller.png">
+            {{ $p := site.GetPage "hero" }}
+            {{ $image := $p.Resources.Get "comocamp.png"}}
+            {{ $image := $image.Process "resize width 107x" }}
+            {{ with $image }}
+              <img src="{{ .RelPermalink }}" alt="ComoCamp Logo" >
+            {{ end }}
           </span>
           <p>{{ $.Params.description }}</p>
           <div class="social-links d-flex mt-4 justify-content-center justify-content-lg-start">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -2,7 +2,10 @@
 
     <div class="container-fluid container-xl d-flex align-items-center justify-content-between">
       <a href="." class="logo d-flex align-items-center">
-        {{ with .Resources.Get "comocamp-smaller.png" }}
+        {{ $p := site.GetPage "hero" }}
+        {{ $image := $p.Resources.Get "comocamp.png"}}
+        {{ $image := $image.Process "resize width 107x" }}
+        {{ with $image }}
           <img src="{{ .RelPermalink }}" alt="{{ site.Title }}" title="{{ site.Title }}">
         {{ end }} 
       </a>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,77 @@
+# ComoCamp Website
+
+This repository contains the source code for the **ComoCamp** website, built using the [Hugo](https://gohugo.io/) static site generator. The website serves as the central hub for information about the Collaborative Modeling Camp, including event details, participation, sponsors, and more.
+
+## Project Structure
+
+- **`archetypes/`**: Default content templates for Hugo.
+- **`content/`**: Markdown files for the website's content, organized by sections such as `community`, `camp`, `participation`, etc.
+- **`layouts/`**: Custom HTML templates for rendering the website, including partials like `header.html` and `footer.html`.
+- **`static/`**: Static assets like images, CSS, and JavaScript files.
+- **`resources/`**: Generated resources, such as resized images.
+- **`config.toml`**: Hugo configuration file for site settings.
+- **`.editorconfig`**: Editor configuration for consistent coding styles.
+- **`.gitignore`**: Specifies files and directories to ignore in version control.
+
+## Key Features
+
+- **Dynamic Sections**: The website is modular, with sections like "Community," "Sponsors," and "FAQs" dynamically rendered based on Hugo's configuration.
+- **Responsive Design**: Built with Bootstrap for mobile-friendly layouts.
+- **Custom Styling**: Includes custom CSS for branding and design consistency.
+- **SEO-Friendly**: Automatically generates `robots.txt` and supports metadata for social sharing.
+
+## Prerequisites
+
+- [Hugo](https://gohugo.io/) (version 0.142.0, not yet compatible with 0.1.46.0 or higher)
+- Node.js (optional, for managing additional dependencies)
+
+## Getting Started
+
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/your-repo/comocamp.git
+    cd comocamp
+    ```
+
+2. Install Hugo:
+    Follow the [Hugo installation guide](https://gohugo.io/getting-started/installing/).
+
+3. Run the development server:
+    ```bash
+    hugo server
+
+    # command to rebuild all, open browser and navigate to changed
+    # https://gohugo.io/commands/hugo_server/
+    hugo server -D --cleanDestinationDir --printPathWarnings --disableFastRender -O --navigateToChanged
+    ```
+
+4. Open your browser and navigate to `http://localhost:1313`.
+
+## Deployment
+
+The website is configured for deployment to `https://comocamp.org/`. To build the site for production, run:
+
+```bash
+hugo
+```
+
+The generated files will be located in the `public/` directory.
+
+## Contributing
+
+Contributions are welcome! Please follow these steps:
+
+1. Fork the repository.
+2. Create a new branch for your feature or bugfix.
+3. Submit a pull request with a detailed description of your changes.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
+
+## Acknowledgments
+
+- **[BootstrapMade](https://bootstrapmade.com/)**: For the design template.
+- **[Hugo](https://gohugo.io/)**: For the static site generator.
+
+For questions or feedback, contact us at [hello@comocamp.org](mailto:hello@comocamp.org).  
