Moving from Wordpress to Hugo: some concerns

support
1

Hi all,

I recently used Hugo just for game and I realized how - even whith hard works - it could help me.
I’m a blogger using Wordpress, I customized it the better I could and I’m satisfied with that. The problem is that it is quite slow to render, it gets slow Performance score with Lighthouse but I reckon it’s related to the structure rather than the content (many images but lazy loaded).

This is the main reason I’m thinking about rewrite everything from zero - even though I’m in doubt to move to a static website as I use some dynamic functions that netlify-cms doesn’t provide smoothly (I want something that can help me blogging, not time consuming).

This are the function I require so far, do you know if it’s possible to get 'em somehow?

  1. share preview to send to be correct to some users before to publish
  2. writing online my posts
  3. lazy loading (I know I can get this with JS)
  4. automatically resize images according to device/screen resolution

Netlify-CSM looks powerful but it’s not complete at all, I messed up with some posts (unpublishing one) and it finished to Pull Request section in Github, I had to loose half an hour to get it back.
I’m using github because it allows me to place my files while sperimenting with Hugo, but I’m available to any configuration to use Hugo…netlify seems faster than my current hosting, anyway.

That’s why I’m a bit in doubt about moving…:frowning:

2

Several of your concerns are things that are not really anything specific to Hugo, and depend on the html/css/js that your site uses.

1 & 2 - This was just mentioned in a different thread, and is possible in some of the hosting environments.

3 - Lazy loading has nothing to do with generating a website, it has to do with how a website is served and consumed by clients, long after hugo has done its thing. So you are right, that’s up to JS that your site incorporates.

4 - Before you decide how you want to handle them in hugo, you need to decide how you want to handle them in your html/css.

The best overview of the issues with responsive images I’ve found

Then it’s fairly simple to use a shortcode or image render hook template to create your images that way. Hugo has a number of features that make it easy to do whatever you’d want with images:

A few Hugo specific links:

I’d agree I haven’t seen a generalized, common, responsive image shortcode or template that many people are reusing in their sites. No reason it couldn’t be done, but there are lots of things that are site specific like break points, use cases, etc.

1 Like
3

For writing online - I store my Hugo site source files in my iCloud storage so I can access the files anywhere. I can do things like write on my phone, but I can only publish from my laptop. I was stressed about losing this from my WordPress days, but I’m fine with it now - and usually appreciate having time to let a post stew through a few revisions before OMG THIS MUST BE ONLINE NOW! I also have an iOS Shortcut to photoblog - resizes a photo from Photos, creates the .md file with a title I give it, then saves them both in my iCloud directory for later publishing.

(Dropbox or Google Drive would probably work as well) - but be sure to set your publish directory outside of your cloud storage directory or it might freak out trying to sync if you republish the site a few times. Mine publishes to /tmp/public. I have a script that I run that runs hugo, generates the site at /tmp/public and then rsyncs that directory to my webserver. Generates and publishes a previously-WordPress website with 10,000 pages in under a minute.

4

That was my concern - Hugo wasn’t providing a “automatically build JS” for manage the various resolutions and the only thing I had to do was to upload the same image in different resolution and that’s all…

I have to write the image responsivness from my own in this way and as I’m not expert - I’m sure it won’t fint every case as I should :smiley:

1 Like
5

As I implied and that article covers in detail, there are a number of choices in implementing “responsive images”. But there is no need to use JS for them, HTML and CSS offer lots of functionality to handle many different use cases.

The base case you’re probably interested in is fairly straight forward, and probably the only decision you’d need to make is what the responsive breakpoints are, and then size your images appropriately.

6

I can’t get the solution yet, maybe because I’m not into these topics or maybe because I’m not asking the correct question because of my limited english.

In order to clarify myself I’ll make an example:
I’d like to post several pictures into my new post; these pictures are quite wide - 2560x1440 are they came from my mirrorless.

In wordpress I simply upload them and the system is charged for creating several other pictures with multiple resolutions (I don’t know according to which logic it decides the resolution, but it’s ok for me):
1024x819 and they are (I guess) serverd according to screen resolution.

My question is: how could I do (with hugo or with any other process or method, here included manually) to provide such different images?
Do I have to upload each time different resolutions saved one by one and then call them as shortcode using the html of the previous links or there’s something I can do to speed up the process with something “already done”?

I hope my question is more clear know, I do apologize if it’s not but my vocabulary is limited :frowning:

7

Hugo has a way to process images for you, explained at https://gohugo.io/content-management/image-processing/.

The idea is to run it on files and commit then to a repo, so you only process them once (as most people will).

8

Hey nipa, I’m Henk - the creator of the Hyas Hugo starter.

Hyas comes with an image shortcode with lazysizes and blur up plugin. This is how it works :point_down:

Install lazysizes as an npm plugin:

npm install lazysizes --save

The shortcode lets Hugo do the hard work (on build):

{{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) -}}
{{ $lqip := $image.Resize $.Site.Params.lqipWidth -}}

{{ $imgSrc := "" -}}
{{ $imgSrcSet := slice -}}

{{ $widths := $.Site.Params.landscapePhotoWidths -}}
{{ if gt $image.Height $image.Width -}}
  {{ $widths = $.Site.Params.portraitPhotoWidths -}}
{{ end -}}

{{ range $widths -}}
  {{ $srcUrl := (printf "%dx" . | $image.Resize).Permalink -}}
  {{ if eq $imgSrc "" -}}{{ $imgSrc = $srcUrl -}}{{ end -}}
  {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl .) -}}
{{ end -}}
{{ $imgSrcSet = (delimit $imgSrcSet ",") -}}

<figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
  <img class="figure-img img-fluid lazyload blur-up" data-sizes="auto" src="{{ $lqip.Permalink }}" data-srcset="{{ $imgSrcSet }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}>
  <noscript><img class="figure-img img-fluid" sizes="100vw" srcset="{{ $imgSrcSet }}" src="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" {{ with .Get "alt" }}alt="{{.}}"{{ end }}></noscript>
  {{ with .Get "caption" }}<figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>{{ end }}
</figure>

And takes a number of params:

quality = 85
bgColor = "#fff"
landscapePhotoWidths = [900, 700, 500]
portraitPhotoWidths = [1500, 1000, 750]
lqipWidth = "20x"

Add some styling for responsiveness+

Use the image shortcode in your content:

{{< img src="image-in-page-bundle.jpg" alt="Text description image" caption="Caption, optional" class="wide" >}}

Hope this helps get you started!

2 Likes
9

Hi @h-enk,

thanks for your reply, It looks interesting to me for the problem I’m facing but as a new-entry in this world I have to ask: is this plugin working on netlify?

10

[deleted] didn’t saw the npm part

11

Hey @nipa, absolutely. Hyas actually is optimized for deployment on Netlify. A working example: https://getvalidate.com/

12

This is my full-size and heavy image, isn’t it?
Looks grait, as soon as I can I’ll try it!

1 Like
13

Correct!

14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.