Image optimisation

[WKaz]

Lightbi theme currently uses the full resolution image when showing post preview. For this reason main page loads slowly, if the images has not been saved in cache yet.

I'm doing some experiments with using Hugo's image processing. The implementation seems to be quite simple, but the images need to be placed in /assets directory (instead of content), which would require to modify all layouts showing the images.

Example of working implementation:

• copy all images to /assets
• modify /layouts/partial/post_preview.html:

             {{ if .Params.image }}
-            <img src="{{ .Params.image }}" alt="{{ .Title }}" class="card-img-top img-fluid">
+                {{ with resources.Get (printf "images%s" .Params.image) }}
+                    {{ with .Err }}
+                        {{ warnf "%s" . }}
+                    {{ else }}
+                        <img src="{{ ( .Resize "400x" ).RelPermalink }}" alt="{{ .Title }}" class="card-img-top img-fluid lazyload" >
+                    {{ end }}
+                {{ end }}
             {{ end }}

I'll appreciate your comments.

[binokochumolvarghese]

Hi, thanks for the above. I will check the same and come back to you.

[binokochumolvarghese]

Hi, I added the image processing in the blog listing and you can check the same in the demo link.

Thank you for your contribution and support.