Transcripts
1. Intro: Hi, my name is Sean. I'm a web developer and
static site specialist. This course is all
about generating responsive images with Hugo, the static site generator. Hugo has powerful image
processing capabilities built in, but managing and generating responsive images becomes time
consuming and repetitive. I've written a module to
automate this process, and this course is
all about guiding you through the process of
setting it up and using it. In the course, we're looking at fixed and responsive
width images. Looking at the HTML tags for images, pictures
and figures. We'll be using lazy sizes to lazy load images
across all browsers and automatically generate the sizes property
responsive with images. We'll be creating image
load placeholders to speed up page load times. We'll be smart cropping images to different aspect ratios. We'll be using short
codes and render hooks to generate
images in markdown. And we're looking at
configuration in line and via front matter page resource metadata and site configuration. Remember, if you need any help, you can always send me a
message Seem in the course.
2. Project Setup: The first thing
you need to do is download the start of template. I've left a link for this. If you go to the
green code button, you can download it as a zip. That is the easiest
way to do it. Grab a copy of that zip
file and extract it, and then we'll get started. Once you've opened that
up in visual studio code, you'll have to go
to the terminal. We're going to initialize it as a Git repository so you
can save your progress. You can also copy and paste a link to your Git repository. If you need any help, use the command git in it that will initialize
it as a repository. And you'll see the dot
git folder appear. Then on the left, we have a list of files that need
to be committed to get. There is a dot git ignore file. That's very important
because that tells git what files not to commit to
the Git repository, for example, node modules. If you were to import
some packages, for example, lazy sizes is one
we're going to talk about. You don't want to commit
that to your Git repository because it will increase the
size of it substantially. Then what we do is I use Github Desktop for
the next step, when Github Desktop and
it's available Nos Mac, I go to file and add local repository and then you choose the path
of the repository. Then once you've
clicked on the folder where your project lives, you hit Select folder and it
will be able to be added to Github Desktop because you've already run git init command. I think it's much
easier this way. You then have to make your first commit in the summary box, we can write project
template commit. Then you need to publish it. If you like, you can
keep it private. I'm going to make mine public
so you guys can see it. If you have multiple, if you have organizations
configured for that matter, if you choose your organization, you probably don't
have organizations, you probably won't have
that option there. You can put a description. I'm going to call mine
Skillshare course on Hugo responsive images you publish. Now if you go to the repository
menu and view on Github, we can see what it
looks like and we can also access the link and you can paste that
in if you need any help. And there's the repository
seeing on Github, and I'll also put
that link below. You can get help every
step of the way. You can see what
progress I was up to. I'm going to put the progress
in the branches section. I'm not going to
personally show you how to commit to
branches each time, but I will remind
you at the end of every lesson to do a commit and I'll show
you how that works. I need to go about adding the
responsive images module. And this is going to speed
up things a lot because I've already personally written
all the code for you. All you have to do
is implement it. I've left the link below to
the image processing module. Before you get started, make sure you hit
that star button. It helps me keep track of how many people are
actually using it. What it is, it's a Hugo module, and if you add it
to your project, it will do all of the
processing for you. And it'll even
print out the tags. What it does when you pass
to the images that you want to place on your website and you tell what
widths you want, it'll actually generate
multiple widths for different screen widths. Or if the images are fixed with, it will generate the image
at different densities. For high density screen, say you're using a retina
display on a mobile device, you want that to be at
least two times density, a double the size, because screen resolution
is much larger. If you scroll down, we've got the installation
instructions here. Before we do that, we
have to initialize our project to
accept Hugo modules. We're going to use Hugo mod it. You then have to
provide the path to your project where it's stored on Github or
another Git provider. We're going to the
terminal and hugo mood in my project stored
at Github.com slash future hugo responsive images module. After that's run, you'll see
we now have a good file. The top, it has the address of the repository
for this project. And then it specifies
which version of Go you have installed. You do have to have
Golang installed. Now, easiest way to install that on Windows, I would
use chocolate. And the command is
chocolate install. If you're on Linux or Mac, I would brew install Go. You'll need to have
chocolate installed on Windows and
you'll need to have brew installed on Linux
or Mac for that to work. I also recommend that
method for hugo. If you get my introduction
to hugo course, you'll see how that works. Now that we've got our
go mod file set up, we have to go about
importing the module. We'll add the module
to the configuration. We've got that example
there of how to add it. If you've got other modules, you'll have to make
sure you don't double up and you just have
to add the extra path, That last line because we haven't got module
and import set up, we're going to add that
to our config dot amel. We'll paste that in. Save it. The last step is we need to install the module
with Hugo mod Get. If you want to
update your modules, you can put a dash U on the end. We'll run that and
it will go and fetch the module out of the config
file that's been installed. If you go to go, you'll see there the version
of the package. It's also referencing
another package called Image in common, which is something that I've used inside responsive images. If you're wondering why
there's an extra package there, new God, you'll see we've only got the
one module being required. Next thing you have to do is get some placeholder images for the website we're
about to create. I'd recommend
getting most of them in the landscape orientation. I recommend Unsplash.com
or there are other providers out there
when you go to download them, your best option is if
you're on unsplash, click on the image and then you can specify the
actual size you want. I would say medium or large, but definitely don't do
original and don't do small. If you do small, it's
not going to be out of resize down in your
project with what we're doing Then once you've
downloaded all your images, pop them in the static
and IMG folder. That's not what we're going to actually be getting them from, but it's a place that you
can temporarily store them now that
everything's set up, including our placehold images, We're going to go to the
source control button. That's third one
down on my screen. That's included by default
with Visual Studio code. Last time we did a commit
via Github desktop. Now we're going to use
Visual Studio code because it's a lot faster. Make sure everything is under the changes and then we
can put it in a message. First one we'll do is
initialize and add module. What we'll do is we'll hold down the shift key and click on the
first three items. That's the got wild dots and convict right click
and will stage. Now only the items in the stage are actually
going to be committed. The message for
those three, it's important that you make sure
the message is accurate. We'll commit that. Now we
are changes here we add placeholder images,
we'll commit those. Then when we're done
for the lesson, you do have to hit
sync changes though, so that uploads to Github, otherwise it will just
stay on your computer. That's fine. But it's good to back it up
to Github and also if you need to send me
a link to your work to get some help, that's how
you're going to do it.
3. Fixed width images: This lessons about
fixed with images. That's images which
don't resize, as you resize the screen
or if you view the page on a smaller screen to
generate a fixed image. We're in the Read me from the Github page just to remind of the link
is to that below. We'll draw it on to the quick
start and we're looking at the fixed width and
page resources example. The first one is more
of a reference only. You can generate just an
image tag if you want. But generally speaking,
the pitch tag is going to be more useful to you because it's a lot easier to provide multiple formats, and I'll get into
that in a moment. What we're going to do is we can copy that
code if you like. We're going to go
into our project. We'll go into content and about. What we'll do is we'll
rename that folder to Fixed. And then we'll go into the
actual file and we'll rename the title to Fixed with Image. We'll take out the content, we'll give it a type of fixed. What that means
is we are telling Hugo to look for the
layout called fixed. We're going to layouts folder, make a new folder called fixed. We're go into default
and we'll copy the single HL into fixed. Now he goes going to
look for this file. We'll go back into our
index M D for fixed, you need to copy an image. We go into static and
IMG and pick an image. Copy it, don't cut it,
you'll need it for another example,
paste it into fixed. Then what we can do is
a few ways you can do it will go into our
single HTML for fixed. And we'll start with our code
back on the Github page. Scroll down to the
usage examples, also known as Quick Start. We're going to look at the
fixed width partial example. Now we're not going to do
the IMG tag generation with the IMG only partial. We're going to go
for the picture partial because we
want to picture tag, we'll copy that example. Then underneath content,
we'll paste it in. And you can hire the text and tab it across to format
it nicely if you wish. Currently, the source is set to image that says temporary thing. If you hit two or right
click and rename, we can copy the file name. And then we'll paste
that into the source. We've got our width
set to 300 pixels. Don't put double
quotes around it, or it won't work, that
becomes a string. It needs to be a
number. We've got our Alt text set. You
need to have Alt text. And I'll show you an
alternative way to do that when we look at
Global Resources. Because currently we're looking
at Page Resources because the image sits in the
same folder as your page. Ctx stands for context. You'll notice we've got title. The title is coming
from the page, and that's whittle because it's this page, it's
not somewhere else. We also got content and we need to provide that
dot to the partial. If for example, you had a range and you're
ranging over something, what you'd have to do to get the page context
inside of that range, you'd have to change
that to $1 sign, because dollar sign goes to
the top level of the page, it gets out of the range or the W or any other way of
modifying context. But we're not doing
that right now. Say that down in NPM scripts, I've written a script
for you called dev. It'll start up the Hugo server. Make sure you've
got Hugo installed. Hugo has not been
installed with NPM. You've got installed
globally on your system. After the Dev server starts, you can control click,
open it up in the browser. Once you've opened in the
browser fixed with image, then you can right click
on it and inspect you as a picture tag
automatically generated for us. We've got
our source there. And the first one,
web, the reason it's web is because web is much
smaller and faster load. Most browsers nowadays
actually support it. But we've got a
second format there, an alternate format,
which is JP, which is the original format that's a lot larger
and a lot slower load. But we've put that in
there as a fallback just in case the browser
doesn't support it. If you look back at the top
or any of the examples, you'll notice we've
got a one x example and then a two X example. If you look at the size,
you'll notice we've got 300 on the first one and the
second size, we've got 600. If you put your mouse
over the image tag, which is another four back for browsers that don't
support picture, you'll notice the actual size, if you look at intrinsic, is 600 by 400. That's double the size.
That's the two x. That's because my screen
has a 1.5 times density. The way my screen displays, it's a slightly higher
resolution than standard. It's way most devices are going. It is quite important that if you're providing
a fixed width image, that you do provide
these other densities. Some screens do go up to 2.5 but It is arguable that
there's no point adding a three X because you're just increasing the file
size substantially. Even if it was a 2.5 or a three
times display resolution, it might not be noticeable
to the naked eye. Then we'll put a
heading on that, Wrap it in a dip just so it forces it into a new line because it becomes
a block element. We'll put here page resource, text set with 300. We can copy that
and paste it below. This time it's going to
be a global resource. We're going to set
the title text. We're going to get auto text. The way that works is
we change old to title, we'll just call it placeholder. Then we have to reference it, the source back on
the Github page. For a global resource, you have to write assets
before the acts will path. What we're going to
do is we'll go into our images and we'll
copy another image. Go into Assets, we'll make
a new folder called Images. You can call whatever you
like pasted in there. Assets wasn't generated by default before when you
created a new Hugo project, but now it's placeholder two. Our will be assets,
Images, placeholder two. We'll add some
paragraphs for the text, again to make ten
into a block element. So we get a new line. We'll do it for
the next one too. And tab. We'll save that and have
a look in the browser. We've got our two
images coming up. If we inspect the second one as we have image of placeholder, the image is generated
automatically, whereas the title is what
we actually provided. If you think image
is going to be a suitable alt text for you,
you can go and use that. That's fine. And you can actually generate
a title as well. If you put your mouse over it, you'll see that the placeholder
comes up as the title. That's what title text is for. You can't rely on title
text because a lot of mobile devices it isn't possible for the user to
access the title text. And same with assistive
technologies, they're going to be
going for the old text. Let's put a little
reminder in here for auto old text image of. Before we move on
to the next lesson, you have to go to
your source control. You can put a comment in
there lesson to complete. Then you can do a commit. I personally put it on a
branch for less than two. But if we would leave it all on one branch and makes you hit
the sink button as well. A little side note, just so
there's no confusion here, if you're trying to manually
process images with Hugo, if you're getting it out
of the assets folder, use a path relative to the
assets folder is the example. Here we've got assets,
images sunset. You got a call for
images sunset. In our case, we're
using at sunset. That's the way that the
module has been set up. It's easy to differentiate
between local and global. Whereas for a local
resource, an image, a page resource, again, it's relative to
the pages folder. In that case, you're
just referencing sunset jpg if it's
in the pages folder. It is slightly different if
you're doing this manually, but obviously right now you're learning how
with the module, I just don't want
any confusion there.
4. Responsive width images: This lessons about
responsive images. And there are images
that change size as you resize the screen or you view the image on
a smaller screen. Back in visual studio code, what you'll have to do is
in the content folder, you can copy and paste fixed. And then we'll rename that
folder to responsive. Go into index and change
fixed to responsive. Then the type, we'll change to responsive because you're
using a different layout. Then go into the layouts
and you can copy and paste fixed and rename
that to responsive. We'll open up that single HTML. The basics of responsive
images with this module is if you get rid of the
width specification, it's going to default
to a responsive width. And I'll just show you
that on the Github page. We've got an example here
of responsive width. And you don't have to provide the actual width if you want, you can overwrite
it and you can put the widths in that
you wish to use. If you scroll down, there's an example of the
site configuration. By default, we're generating widths of 600,900.1300 pixels. That may or may not suit you. You definitely have
to keep that in mind. You can set the defaults, and I'll show you
that in a minute. Once we get everything
set up, what we'll do, we've deleted the
width directive out, now we're looking at
a responsive image. I'm going to wrap this
first image in a column. Put Bootstrap here,
it's cold six. In Bootstrap, there
are 12 columns on the screen because
we've already got our container
and set up column, there's 12 columns
on the screen. We're using six columns only half if the width is above
the medium size or larger. And I'll show that in a second. I'm going to delete
that second image. We don't need that for now. We'll change our
description here. I'm not worried to worry
about page resources anymore. It's a responsive image
and we do cold six. We'll save that, we'll have
a look in the browser. Here's Mach's, approximately
half the page wide. There is some
spacing either side. And that's because we're
using a container, not a fluid container. Let's have a look what happens when we start off really wide. It's about half the width. There is some
padding either side. As we narrow it
down, the padding does increase when
we get down to the next breakpoint
that would have gone from Excel
breakpoint to a large. Then we get down to medium, you'll see it'll snap to a full screen image that's
down there below medium. Now on the small
viewpoint viewport, as we keep going down,
you're going to see the image will keep
shrinking with the screen. And that's down
near a phone size. If you've got an
image like that, you may want it full
width on a phone, maybe on a small tablet. But then as a point we don't
want it getting too big. And that's why we're setting it to the column width there. That's MD or larger half. And then from there it
starts snapping down. Theres one why you
can change this. That's if you change
from container to container fluid, we'll
have a look at that. It's going to be fully fluid, so we're going for a half width and then
when we get below MD, we've just got the
responsive image there. One thing you've got
to consider is if we look at our image
and we inspect it, we look at the image itself, you know it has a class of IMG fluid that's a
bootstrap class. And that's been added by
default by the module. It says the max width
of the image is 100% The image isn't going to go any larger
than it should be, but it will shrink
down if it has to. That's the max width. It
doesn't say it's the width, it's the maximum width. And the height auto means
the height will just scale, will maintain the aspect
ratio as you scale it. Now there is an
option that is under class in the configure. Currently it said IMG fluid. You might have your own CSS, you might use a
different CSS framework. You'll have to set up the class. But in the meantime, we'll
have a look at changing the width back to our web page. We can see that if we go to the maximum
point before it snaps, we'll see it's currently
sitting at 06:40 wide. We'll go back into
our config and we'll set up some defaults, and we'll set the
first one to 640. We will copy params, image and wits go
into the config. We'll change it to 640
for our example here. Keeping in mind that my
screen in particular, we'll try and load one that's 1.5 times larger that we've got. The 900, 1,300 you might want to up your
13001400, for example. Then we'll go back and
we'll have a look. I've swapped the image out to something wider because the
way this plugging works, if the image is too narrow, it doesn't actually
generate the image that is any wider than what the
image itself is originally. We'll have a look. Let's see. We've got 64,900.1400 that are being generated
as we asked for. But the only problem is, are at this point where the image
is only half the width, the browser actually doesn't understand how
wide the image is. If you have a look
at the image tag, we don't have a
property called sizes. We need to specify how
wide the image is. If you don't
specify, the browser assumes it's the full
width of the screen. Right now, the browser is able
to choose the right image. When we get to this point here, the browser is probably
going to choose an image that's the full
width of the screen. Even though the image
is only half the width, you're downloading
an image that's double the size of
what it should be. Let's go ahead and
we'll have a go at setting up the sizes. In order to do that you have to know how your CSS functions. We used a Col Md six that
snaps at 768 pixels. Now we know that
once we get to 768, it's going to be half the width. We'll go and we'll put in sizes. We write up like
this with 768 x, we're looking at 50 for view width, that's
half of the screen. Otherwise it's 100 width. 100 view width is the default. If you don't specify, we'll say that I'll look
in the browser. One thing to note is if you're
refreshing the browser, it's going to use the image
that it's already downloaded. If you're testing
out at this width, then you want to test
out at that width. You're not going
to see the result, you're still going to see
a really large image. For example, if I refresh now, it's still going to download
the 1,400 pixel wide image, but because I've gone to
network and I've disabled case, it will actually grab the
correct image when I reload. Right now the image is 224 wide and it's
grabbing the image at 06:40 If we bring that
to say 370 and reload, you'll see it's
still grabbing there 640 because it's 1.5
pixel density my screen. But then as we get
to a wider width, you'll see it's now at 04:48 and it's grabbing the
1,400 wide image. You can see there
in our source set, we've got the three widths coming up in our two
different formats. To finish up for the lesson, make sure you do a Git commit. You got a record of
what you're up to, and make sure you sync it.
5. Lazysizes support: This lesson is about installing
and using the lazy sizes Java script module to automatically generate
our sizes attribute. And also help with
the lazy loading of images back
individuals. Go code. The first thing we'll
do for our example, we've got a weight
of 20 for the menu. We'll change that to 30 because we've also
got our home screen. We'll then copy our
responsive content, and we'll rename the
folder to Lazy Sizes. Then we'll go into the markdown file and we'll change the
title to Lazy Sizes, And type will be Lazy Sizes. We also to change the weight
to 40, there's no clash. And so that Lazy sizes will
appear to the right of the other two image types on our menu can go
into your layouts. And we'll copy the
responsive layout and we'll rename
it to Lay Sizes. I've left the link to
this website below. It's a plug in
called Lazy Sizes. We're looking at the
Github page for. Easiest way for us to
run it is from a CDN. And I'll show you where to get a link for
that in a moment. Reason we got this
page up is so that we can look at the instructions
of how to use it. First of all, we'll go
and grab it from a CDN on the Github page for the
responsive images Hugo module. If you scroll down to
the bottom section, we've got some instructions for lazy sizes and we've
got a CDN link there. Since there isn't
one on the Lazy sizes page, we'll copy that. Then back in our project, we'll go into layouts and then
partials and script foot. We'll pop it in above all the other scripts,
so it loads first. We'll save that, then
we'll copy the CSS. It's also on the
lazy sizer page, but it's easier to grab it off the responsive
images give hub page because it's very concise. Then in your project
we'll just close some folders if we're go
into static and then CSS, there's a CSS file and
you can paste that in. Just like before, we set
a property on our image. By adding this CSS, it ensures that your CSS is
compatible with lazy sizer. Lazy sizes can detect
how wide your image is. This last line is just
four bootstrap figures, which we're going to get
to later in the course. We'll save that. The next thing we have to do is set
up the configuration. We're going to change
loading to laser sizes. We'll copy that. We've already got params and image set up. Then we'll go into
configure Amel perms and image we'll paste in
loading is laser sizes. That's actually a default that's going to change for
every single image. What we'll do now
before we continue, we're going to go back
into our layouts. We'll start with
fixed in our image. We put in a property of loading
and we'll put in eager. And that means it's not
going to use lazy sizes, and it's not going to lazy
load with the browser either. Then for the next one, we'll put in loading and we'll try, and we'll go into
our responsive. This one we'll do eager
because it's high on the page. And I'll show you
how that works. Loading eager. If we go to the fixed width, we resize our screen to the
bottom image is hidden, we will get a bit shorter. We'll go to network. Change your throttling to slow three G and hit control
or command to reload. You'll notice that
the second image won't load until the
page has fully loaded. That second image is
popped up, is pending. The blue line is where
the page is fully loaded. The browser is loading it
anyway because it's quite close to the bottom
of what's viewable. If we scroll down, the
image is quite close. The browser is loading
it automatically for us. But the browser has fully loaded all of the content
at that blue line, and then it's chosen to load it. That's how the browser
lazy loading is working. And if it was a bigger image, and it was much further down, the browser wouldn't load at all until you start to scroll. Now that's browser lazy loading, and that's not compatible
with all browsers, compatible with most
current browsers. But not all browsers.
And we're going to set up lazy sizes to handle
that loading for us. One of the pluses of doing
that is it can help us with loading a placeholder
image before the image loads. On our Lazy Sizes tab, we write, click and
inspect the image. We can see it's got
a data SRC source. What happens is Lazy Sizes grabs that and then it
generates a source with Java Script on the fly when
the page is first loaded. If we go and view
the actual source and have a look at the images, you'll notice that there
is no source file. Image is just data source. That's for both the source set in the source and
also in the IMG. You'll see there's no source, there's just data source. It's not actually possible
for the browser to load any images at that time until the Lazy sizes Java
Script plug in comes in and swaps it over. And it won't do that until
the image comes into view. What we'll do is we'll
put a few more images on the screen and we'll set the top one to eager because
that's good practice. You don't want to lazy load images that
are above the fold. Above the fold is
all about images that are visible when
the page first loads. You got to consider
both mobile devices and desktops at the same time. We'll go into layouts
and lacy sizes. We'll copy that div, we'll have to make
a new row for it. Do row, and you paste
in your column. Otherwise, it will
be side by side. We don't want that. We'll
put in a second placeholder. We'll make a placeholder two. Then we'll do another row,
make that placeholder three. Then we'll go into our static, and we'll grab 2.3 whatever
you've named them, and pop them into your
lazy sizes folder. Then back to your lazy lay out. We need to set up our loading. So for this first
image placeholder one, we will set loading to eager. This is best practice
because it's above the fold. You have to have a
sizes property there. And that's one of the
downsides to not using lazy sizes is you have
to manually set that up. But then for the other two, we can remove sizes because we've default loading of lazy
loading over in config yaml. You'll see we've set
it to lazy sizes. That's going to automatically configure lazy sizes for us. We'll save that, and we'll jump in the browser and
we'll have a look. We've got our three
images coming in here. We'll right click and inspect, and we'll have a
quick look at them. First, we've got our first
one here, loading eager. And you check your second one. We haven't got a
loading property on there because the browser
doesn't actually handle it, It just comes in
as a data source. And then lazy sizes
switches it over. The reason it does
that is it's actually a class of lazy
sizes put on the. And that will flick
over if we go to view page source and go
down to the third image, you'll see we've
got the lazy load class that then changes as sizes modifies the
properties of that image. We'll make the screen
not as high anymore. We'll go to network,
we'll throttle it to slow three G. Remember
we've got placeholder one, placeholder two, and
placeholder three. Do control or command to refresh and we'll only get
placeholder one loading. But then once the
page fully loads, you'll see placeholder
two will come on board because lazy
sizes is loading it, because is now idle,
the browsers idling. If we scroll it down slightly, you'll see placeholder
three will pop up the bottom of the screen. That's going to drastically
increase the low time. One of the biggest increases we've got is the fact
that we're using a web image and there
are only 32 kilobytes. That's one of the
best performance games we've got is the web. And that's something
that's handled by default with this plug in. Let's this lesson, make
sure you do a commit. Lesson five, complete and control Enter that will save
everything from this lesson. And make sure you sync it up.
6. Placeholders: Now we're looking
at how to generate placeholders that will
load very quickly while your large images
are still waiting to fully download on the responsive
module Github page. Again, I've scrolled down
to the placeholder section. We can set up the
placeholder configure. In the configure ammo file, you must have loading as
lazy sizes for this to work. So you've got to
have the laser sizes Javascript module also installed, which
you've already done. The first option we're
going to look at is P, which stands for a low
quality image placeholder. A very low quality version
of the image will load. To start with, it's actually
lined into the HTML, it's encoded as text. Then when the image
is ready to load, it will load on top of it. There's a couple of options
we can set with that, two, but for now we'll
just have to go at loading up some low quality
image placeholders. We'll copy that
configuration there. We'll open up the configured. We've got QIP set. Then we'll run the Dev server. If you haven't already
got it running, then we will inspect. We'll turn our network on
slow three G and refresh. You'll see if there are low
quality image placeholders there and then the image
will load on top of them. There is some further
configuration we can do. I'm just going to
copy it all in, make sure it's all in
line with the rest. So we've got the blur amount, and that's the amount of blur
that's applied to the file. Then we've got the
factor looking at how much smaller
the LQ IP images than the smallest image
in the sour St. Be careful you don't
increase the size too much because then your
file sizes will increase and then you'll lose the
positive factor of doing this. You'll end up slowing your page down by owing to many images. Next we can look at
is a dominant color. If we set it to dominant, what that's going to do is
Hugo is going to extract the dominant color out
of the image itself. It's going to insert a small gift which
will be scaled up. We'll save that and we'll
have a look. It's reloading. See how dominant
colors are coming in there and the images is about to load on top. That's
another way to do it. There's one more way we
can do it that is actually specifying a color if you want to use the same color throughout
your whole site. The way that works currently, I've set up these
colors already, and they're based on the
bootstrap gray colors. If you want, you can actually
create your own color. And you've got to place
it in this folder, and it's going to be a gift. It's going to be a ten
by ten pixel gift. I wouldn't recommend any
smaller because I've had some trouble with
them scaling up properly. And I wouldn't recommend any
bigger because you'll be loading large files,
which is unnecessary. If you're wondering
how that works, we've got that folder, asset
images, placeholder images. If you look up in the source
of the actual module, that's the folder there,
the images are there. But you can actually put the images in the same location in your Hugo project and
they will be added. We'll look at using
one of the defaults. All you have to do is
just name the file. I've already got a
list of names there. Say you want to
make all of yours. Gray 300, for example. You don't need the gift.
We'll comment out Dominant. We put in gray 300, Save that. And then we'll watch it load. They're currently
coming in as gray 300. And the image loads on top, that's quite commonly
used on websites. I've seen a lot load like that. So we go at changing the different placeholder types and see which one
you like the best. Before you forget, make
sure you do a Git commit. I'll see you in the next lesson.
7. Aspect Ratio: So now we're going to
look at how to create images which conform
to an aspect ratio. They're going to drop down to
a particular aspect ratio. You might just have one image
you want to set to a ratio. Or you might have
multiple images. For example, a
gallery where we want the ratio to be the same
for all of the items. We might have some product
cards for example. What we'll do first
is we'll go to our Lazy sizes example. We'll copy that, we'll paste it, and we'll rename it to ratio. We'll go in and we'll
change our weight to 50. This is the fifth
item we call ratio. And we'll change
the type to ratio. We'll then make a
layout for ratio. Copy our lazy sizes
layout, call it ratio. I open it up then we'll go back to the read me
document at the top. In the examples,
there's an example for cropping an image
to an aspect ratio. This is the basic example,
It's in the Quickstart. What we'll do is we'll go and copy the aspect
ratio property. Then we'll go into the first
picture. We'll add that in. We'll make it, for
example, a square. So we'll do one y one. We'll save that and
we'll check it out. We've gone to the ratio, you'll see how the first
image is now a square, whereas the rest are still in their original aspect ratio. Next thing I'll show
you is how to create multiple images with
the same ratio. We can do that quite
quickly with Hugo. We'll do, we'll go
back up to the page. We've got three placeholders. We'll get more placeholders
out of the static folder. We should have
them lying around, so we'll grab 45.6 as well. We've got six images there. Then in the content file
for the ratio page, we're going to add some Am to the front matter and
we'll call it gallery. Then we use a dash. So
we're creating an array. And we'll do RC for
source placeholder one G. Then we'll do a title one,
then we'll copy that. Then we'll go through and change the images
and the titles. I'll show you a shortcut
method after this to a few ways to speed
up this process. But this is the way you can
get custom text and title. The old text will be generated
automatically for us. What we'll do now is we'll
get rid of the third one, then we'll make a new row. Make sure you have
a div at the end, that's your container,
the last closing div. So we do row, we'll cut and paste in what we're going to do
it slightly different. Instead of specifying
the column width, we'll just make it a column. But then we'll use a factory and bootstrap called a row column. We'll do coal. We want to have
three for example, but then maybe you want
to have that M D above. So in that case you make it
row Coles one and then roles M two and then cold three. We have to do some
iteration. We'll use range. We're going to range
over Pm gallery. And we'll end the range
after our column, we're reproducing the
column and the image. Each time we'll get rid of
that paragraph and we'll put it above the a new onecall. Custom holds title text. Now we need to change the context to $1 sign because
they're inside of a range. We want to use the
page top level context in this file which is dollar
sign that I'll give us. The page source will be C because they're working
off working Tide Gallery. That's what the context is. Instead of old, we'll use title, title, then we'll set
the aspect ratio. For example, we can go Slice 11 if you want a square gallery. And then we'll check that out in the browser. It's looking great. We've just got to add some
spacing between the images. The bootstrap
columns already got some padding on the
left and right. We want to override that because
it's not a round number. We can go two and I'll add a set amount
all the way around. That's looking much better. I have a look now at responsiveness when
we resize it down. Then goes to two, we
bring it down to extra small within on one size wise. Let's have a look at what
sizes we might require. If we bring that up, you'll notice they're
quite small there. We'll look at how
big they get at their largest point
when it snaps to two. That's displaying at a
rendered size of 356. We might go for 360. Then we'll put in some
wider variations. Example here we're looking
at about 06:50 when it snaps down 523, we'll put in widths slice, put in say 36550. We'll put a larger one in
for high density screens, say 700 and then maybe
1,000 We'll check that out. You have to get to network
and disabled case. You can disable the
throttling indole case. When you reload it, if you
want the new size to appear, you can see it's 357, but it's pulling in the 550 because of the picked
density of the screen. If you look up,
you'll see we've got the different size images
being pulled in there, which are being
generated automatically. Now I'll show you some
short cut methods of generating a gallery. The first one will do is we'll simplify this
process slightly. We will call it gallery two, but this time instead of creating an array
inside the array, we've got objects, we'll
just create an array. So we do that the
easy way to do it. You can do multi line, but
we can go a single line. We've got placeholder one, we'll just copy and paste it
to make it simple, 23456. And then you close with
the square bracket, change your file names. Then after this, I'll show
you an even quicker method. You've got all the photos in one folder, Delete all of that. Let me go back to our layout. Copy these two rows. This one is gallery from array, no title set range
over gallery two. The source will just be because each time we go
through this array, it's only returning one item. And it's not named decay. It's just a single item
becomes dot title. There's a few ways
you could do it. You could just set
a generic image if you wanted them
to be numbered. For example, we could
use the index from each iteration where it says
dot params gallery two. We can put in dollar sine, dollar sine colon equals. If you're new to this,
you could actually use the full name index element. We could name element
whatever you like. You could call it
photo, for example. Got the context there.
That still works. If you want, you can change it to photo, it doesn't matter. But for our title,
we've now got an index. But index starts at zero. We want our first
image to be image one. What we'll do is dollar
sine t colon equals. We'll use print and
we'll make a template. Template will be product
percent V in brackets. We're going to add index, and we're going to add one to it starts at one instead of zero. For our title, we use
dollar sine title. So we'll save that and we'll
have a look in the browser. There's our second set. Now we mouse obviously
has product one, product two, product three. If we inspect and you
look at the alt text, it says image of product
three which is set for us. If you wanted, you
could override it. Make another template. Let's have a look at a
few more ways to do it. I'm on the page resources Hugo docs page. I'll
leave a link to that. If you scroll down and look
at the different methods, there's a couple of different
methods will explore. The first one is by type, you can get all the
images from a page. And the second one
is a little bit more granular and that's
matching using globe, that's what that stars force. We've got our path
and the star is. For any image, we'll
look at the glob, match first with match,
we'll copy that. I'll paste that in
below what we've done, and we'll copy what we've got. Paste it in, we use this
call it gallery from folder. We'll copy that dot
resources match. Get rid of the brackets
instead of params. Gallery two, we'll paste in
our dot resources images, and then we'll change
images to gallery or whatever folder you wish
to source images from. And we'll make that folder, I'll call it gallery, And I'll copy and paste
some images into it, preferably some
different images. If you've got them available, we'll save that and we'll
have a look in the browser. There's our gallery coming
up from the folder. It's displaying every
image in the folder. The other method is by type. We'll copy that. We'll paste that in temporarily. Copy the two rows. Replace what we've already got. Gallery from page resource. Say that we'll have a look. There's our gallery from
all page resource images. And as you can see, we've
got doubles mean images because the images were
duplicated as page resources. That's it for aspect ratios. Also thrown in a bit
of extra information there that you can use
for implementing it. Remember to do a commit
before you go any further, I'll see you in the next lesson.
8. Shortcodes: We're going to look
at using short codes in markdown files. We'll make a new page. We'll copy the lazy sizes page. We'll call it markdown because
we're going to use it for not only shortcodes but also render hooks which is coming up. Change our title to markdown, then we'll get rid of
the type because we can just use our
default template. If you're wondering how
that works in layouts, under default we've
got our single HTML rather than a single HL in
one of the named files. Because we're going
to use Markdown to control everything that's happening and we'll
change our weight to 50 being the fifth item. Save that, then what we
can do is start with short codes when they get our page for the
responsive images module. If you go down to short codes, we've got an example here
for the aspect ratio. The reason it's one
of the examples is because it just shows you how you don't have to
use arrays or slices, which is putting in commas
to separate multiple values. We'll copy that example, then back in our markdown, we'll paste it in. We got our width set up there, we'll put it in a larger one. Again, if you don't
specify widths, it'll go for defaults. So we'll put in 300 for example. We've got our aspect
ratio and we have to have an image source. We'll put it in say,
placeholder six. Pop that into our markdown,
something different. We can even put it in
a folder if we like, because we haven't
done that yet. We'll make a folder called
images, we'll drag those in. The source will be images,
placeholder six Jpg. If you do have a space in one of these
parameters, say example, the old has a space
in the string, you need to use double. But if there's no ******,
they're not required. Then we'll put a heading
on to say heading two. We're heading one with our markdown title
based on our template. We're heading two,
short code and ratio 423 and with 900, 1,300 pixels. Save that and we'll
check it out. There's our image now. You may not want it
to be that wide. In say, a blog post. Let's have a look at how
we can restrict the width. If we go to inspect, you'll see we've got MG
wrapper wrapping it. We can actually
change that. If we look at our configure example, you'll let that we've got the short code wrapper class
and it's currently set to IMG wrapper but you could change that she Rapper if you want. But I'm leaving at IMG wrapper
because it's useful for both the render hook and the short code which we're
working on at the moment. Then back in your project, the CSS setup is really simple. For this one we have to target IMG rapper There's many
ways you can do this. One way would be display block, then margin left auto and margin right
auto that centers. But we also need to look at to make sure that the width is somewhat less
than the full page. With when we're at
a wider screen, we can do at media and
this is just like when you're providing the
sizes min width, we'll do 768x inside there, rep width and we'll say
do 75% of the view width. We'll save that and then
we'll have a look in the browser that's still
a little bit wide. We'll go back and we'll
reduce it down to more. I think that's a better
width for a blog, but I might change the
aspect ratio to be a little bit wider because
it's a little bit too high. We'll go back to our ratio, We'll say, for example, 169. We'll save that,
we'll have a look. That's probably a good
ratio for a blog post. There is one of the way
you use a short code that is with a single
positional parameter. Over here we've got
name parameters. We've got, so we've got
aspect ratio and so on. Here we haven't got a name for the parameter,
It's positional. You could have multiple
positional parameters. Picture and also the
image only short code. They only work with
just single parameters. The only thing is
if you don't set up your additional parameters using either page parameters
or resource metadata, which I'm getting to lesson, it's probably not
going to display the way you want it
using the defaults. For example, you won't
have any old text, I'm not going to
bother covering that. But in a future lesson, when we do look at
pagemeters and metadata, I'll pop that in and
show you this lesson. Make sure you do a commit
before you finish. I'll see you in the next lesson.
9. Render Hooks: We're going to look
at how we can use standard markdown
syntax to display responsive images
behind the scenes. That's called a render hook, where Hugo uses the modules code to modify the way that the
markdown images behave. Let's get started on the
responsive images module read. We're down at the
render hook section. First thing you'll
notice is we've got an example of how you include
an image with markdown. Nothing special happening there, but we do have to include the configuration
for that to work. As it will break images
that you've already got set up when you
install the module. So it's something you
have to opt into. The configuration item
is render hook true. Let's go ahead and
we'll just add the image to start with and
we'll look how it displays. And then we'll go ahead
and then we'll add the configuration and we'll see how it changes on that page. We're just working on
the markdown page. We'll add another heading, we'll add heading two, we'll do render hook using
markdown image syntax, all the faults used. Then we'll grab that example, we'll paste it in,
we'll grab an image. We'll go placeholder five. This time we'll add into the images folder,
placeholder five. We'll have to set up our image. It'll be images
placeholder five, because we're using
standard markdown syntax. It actually has the
Intellisense working there. We can set image text, we'll set that up later. We'll save that when we'll
look in the browser. That's the default
markdown image. Here's our default
image coming in. It's actually larger
than the page because we haven't
got any CSS supplied. It's not a responsive image. If we go and inspect, it's the standard image tag with the source at the
old and the title, That's just the fault
that works with Hugo. You'd have to set up some CSS for your standard image tag. You might want to have some
CSS on the page as well. Maybe easy not affecting
all your images. But let's go ahead and let's
do it much better with Hugo. We'll get our config which
is render hook true. We'll copy that.
We'll open up config. Yeah, we'll pop that in, then we'll save it and we'll check it out in
the browser again. Now it's coming in
with the wrapper, and that's also a
responsive image. The only downside
is we cannot set any parameters because we can't do that with
the render hook. And that's what we're going
to get into next lesson. But if you check it
out, you'll notice it's a picture tag and it's got everything
there that you need. That's it for this lesson.
That was a short one, but we are going to be
expanding on that quite a bit. Next lesson with how we're
going to add settings. Make sure you to commit
before you continue. And I'll see you in
the next lesson.
10. Page Params: Now looking at page
parameters that so we can set configuration at
a page level and it affects all the
images on the page. We've got page, the markdown
page we're working on. And we used a render hook, but we couldn't actually
set anything other than the old text and the title text. What we can do is if we bring up our config yaml inside params, we've got the image
property there. And then we go in
and set our config. For example, if
you wanted to set all the widths on one
page, we could copy that. It's the same syntax. You don't need to
use params because this already comes up as params. Then we can change all the
widths for the whole page. Let's say we got rid
of the widths in here because we know we're doing three
quarters of the page, because it's like a blog post. We could then do 640, maybe 900, and set it at 1,300
We'll set that to 950. So we'll save that. We'll check if that's working
in the browser, we'll check out our
red hook image. And we're pulling in
some width there, 64,950.300 And that's
going to affect all the images
unless we set it at an image level or
a metadata level. Now, you can't set an
image level for red hook, you can with the short code. The next thing we're going
to look at is how to set parameters at a metadata level which is a bit higher than page. If you look down here, we've got all the different parameters
that you can set. And there's a table right
at the end and lets you know where you can
and can't set them. For example, Source, you
can only set that in line. But then we go down to aspect ratio and we
can set that in line. We can set that at the metadata level which we're
about to look at. You can set it at a page level, but you can't set aspect
ratio at the site level. You can actually
see where you can set these different
parameters at what level. Now we're about to move
on to the next lesson, which is setting
up our metadata. Make sure you do a commit. And I'll see you in
the next lesson.
11. Meta Data: Now we're looking at setting parameters at a resource level. And that's for page
resources only, and it's using metadata. I'm back on the Hugo page
resources page that we're using earlier and I'll put a link
to it for this lesson below. If we go down to page Resources
Metadata at the bottom, it shows us how
we can set it up. This is inside your actual, your page and you have to
put in a property resources. Then from there we can
go about setting it up. The easiest way to do it is to use the source to start with. That's where you
target the image. You can target multiple files, but for now we'll just
look at targeting the one we'll put in resources, then we'll put in the source. You can rename it using name, but I generally
don't get into that. You can set title there or
you can set title in params, we'll go about popping that in. Then up in our front matter, what we'll do is set that up
and we'll get rid of name, because I don't
like renaming them, it just adds an extra level
of complexity source. We'll look at targeting
placeholder five, then we've got to set up the Pm. It's just like working with
regular page parameters. We have to work in
the image name space. In theory you could
actually just copy that in, but you must in your one
tab space across underarms, we'll have to go at first. We'll set the aspect ratio
to make that obvious. We'll set it to a square 11
in the bottom of the bing. We've got a long list of parameters and actually
tells you where you can set them as casts
in the last lesson. So you have to look
down lists for example. We want to change the loading
of that image because what a fault it's going
to be using lazy sizes. So we want to just
set it to eager. Then from there we'll
have to set the sizes. We'll start with loading. We'll set that to eg, uses the browser default. And then we have to set
our sizes manually. Because we are using a
responsive image we use, we don't end up
with any conflict. We'll start with mean width, looking at 768 pixels due to the width of our
bits strap column. And we'll set it to
60% of the view width. Otherwise, if we're below 768, look at 100% of the view width, we actually wrap that in quotes. We'll save that,
we'll have a look. It's coming in a square. And if we inspect,
you can see we've got loading is eager. And then we've got
our sizes property coming in there that we've set. The browser will know
which image to grab. You can use that for
any type of image, whether it is coming
through as a render hook, whether you're
using a short code or whether it's an image that you've used in
a HTML template. It's it for this
lesson. Make sure you do a commit
before you continue. And I'll see you in
the next lesson.
12. Figures: So now we're looking
at how to generate figures using the
responsive images module. We'll go into the content and
we'll copy the ratio page. We'll rename it to Figure. Then we'll go into the page and we'll
name the title figure. The type will change to figure, we get rid of the rest of that front matter and
we'll delete the gallery. And we'll just stick with
maybe three images for now. And then we'll
change the weight to 70 because it's a
seventh menu item. We'll then go into the layouts. We'll grab the ratio layout, for example, rename
it to figure. Then we'll go in and
we'll get rid of all those extra rows
keeping the container. Then we'll go back to our docs. We'll scroll down to
the figure example. We'll copy that text.
You square calling the partial called figure
this time instead of picture. Then we'll delete
the picture partial. We'll paste it in.
We'll just fix up the formatting
with the tab key. We just check which image
we're going to target. So we'll go for
placeholder three Jpg. Then caption title. It's going to follow the
image, call it mountains. And then the caption is
the text under the title. I'll change it to taken during my holiday link is for
linking the actual image. Because it's hard to link
the image that's inside a figure because you
can't access that in your template link that for now. If you want, you can
delete the alt text. The alt default to the caption, the image title will default
to the figure title. We'll save that and we'll
have a look in the browser. We've got our figure coming
in here, There's the title, and then there's the caption
we write, click and inspect. We've got our two image types
coming in, which is great. We've got a figure. The class is Figure, and
that's set up for Bootstrap. We've got our figure caption with a class of figure caption. And that's again, set
up for Bootstrap. We've got our heading, it's
the folding at a level four. And I'll show you how to
change that in a minute. And then we've got our
caption coming in there. There are some more
options we can set. For example, if you want to
change the heading level, you can use that property there, figure caption,
title for the level. You can also add an attribution with an
author's name and then a page. Let's have a go at adding the
attribution and the level. Paste it in. We'll get rid of caption because
it's doubling up. We'll either author
name for now. This is all inspired by the
Hugo official figure partial, but it obviously isn't
responsive like this one. Now we've got the author name, you've got the author link
coming up there as well. Then we'll change our
level to say three, for example, I'll do an inspect, now it's coming up as a H three. Now show you how you can use a render hook to
generate a figure. We'll go back to our
render hook page, which is marked down. We'll copy that
render hook example. We'll paste it in and we'll
grab placeholder two. This time we've got a
figure coming in there. The width is restricted
because we've got our image wrapper class set to it because we're
using a render hook. And we set up our CSS earlier. We've got our title and caption
coming in via meta data. That's how you use a
figure with a render hook. That's the first lesson.
Make sure you do a Git commit before you move on. And I'll see you in
the next lesson.
13. noscript support: In this lesson, we look
at what happens if the user's browser
either doesn't have Javascript or
Javascript is disabled. And that can be common also for users with
assistive technologies. On the read me file again for the responsive images
module and look for the section for no script thing. We have to do is we
have to turn it on. It's something you have to
opt in for because there is some Javascript and
CSS that's required. First of all, we'll set up the configuration,
we'll turn it on, we'll go into configured
Doyal, we'll turn it on. The next thing is we have to add the Javascript or go into
Layouts and Default, and baso go to the top of the head and then
we'll copy the script. What that does is
it adds a JS tag. If the browser
supports Javascript, you could have a no JS tag
as a HTML class if you wish. If it's there, it
will be removed and it will be replaced with JS. But if it's not present, that's fine, it's not a requirement. You will end up with a
JS class in your HTML. And we'll see how that
works in a minute. I'll copy that,
We'll paste that in. Then we've got some CSS. Now you can load it
as a style there, or we can copy it and we
can pop it in the CSS file, which is probably a better idea. We'll go down into
static and CSS, We'll put in a comment, we know what it is,
we'll paste that in, and we'll save the script. Then we'll have a
look in the browser. If we click and inspect, you'll see we've now got
the class of JS appearing. Whereas if we view the source, you'll see there's no
class there of JS. Now, what's happening here, as we worked at before, when the image is
loaded, If we just view, so get into the images, you'll notice the source itself is the placeholder
that we've generated. Then we've got the data source, which lazy sizes will grab
and overwrite that source. With the same with our sources. With our source set,
the data source set will be used to create a source set at the right time. The problem is if
there's no Java script, that's not going to happen. That's why we're now
generating the no script. If there is no Javascript, no script will actually work. But we will have an image
with the placeholder and below it we'll
have the actual image. Let's go ahead and check
how that CSS works. Because the CSS will actually
disable this image and it will enable the
image with no script. If there is no JS up the top, we'll go into run command
and type in Java and then you can disable
Javascript and then reload. We'll scroll down because the top image is actually
not using lazy sizes. We set that to eager,
right click on one of the images in the
gallery and you'll see by default the script is
actually being highlighted. That's because that
is the image that we're looking at
right now, is this. No script images we've just turned on with
the configuration. Look up into picture image, you'll see that the source is some data and that's actually the placeholder that's
being encoded into text. It loads really quickly. In line. Image has
to be downloaded. That it's already
part of the HTML, but there's no image there
because we don't have a JS class up the
top in our HTML tag. Because that's not
there. The CSS is hiding that placeholder. That way we can
see our no script. If we were to disable the
CSS, we'll see what happens. We'll go in and we'll
control K C to ed out. Then we'll refresh
and you'll see there we've got our placeholders and the no script images
we've turned on our no script setting, but we haven't included the CSS or you could forget to
the JS, for example. You'll end up with doubles.
We don't want that. We'll put our CSS back on. That's it for the lesson. Make sure you do a commit.
Sean Emerson, Web Developer and Static Site Specialist
