Using Images

For regular images placed onto the page (by that, I mean images not placed into a gallery) we use the <figure> tag, with the addition of a class. The 3 classes available are... "center", "left", and "right".

Image Centered On The Page

The image below uses the following HTML...

If we want to use a standard caption below the image, then we add the <figcaption> tag like this...

If we want to use a styled overlapping caption below the image, then we add the class of "overlap" to the figcaption tag like this...

Image Floated left Or Right

We can of course float an image to the left or right of the content. To do this, we simply use the class of left or right in the figure tag. Class="right" is being used in the example image.

This actually does more than simply floating the picture. Have you ever had the experience of a floated image being just a tiny bit too wide when viewed on a mobile, meaning the text is restricted to a very narrow area? Often that can be lines of one word, all the way down the edge of the picture... very annoying isn't it?

We avoid this problem by having the image reduce in size as the screen size gets smaller. Until we get to the smallest regular smartphone resolution of 320px wide, at which point we change the floated image to display block. if you are viewing this page on a laptop, then try reducing the browser width to see this in action.

Opening A Single Image In A Lightbox

While we usually want to use a lightbox for galleries of images, there will be times you want to open a single image in this way. Perhaps you have a diagram picture floated to the left or right of your content, and you need people to see greater detail.

That is no problem, look at the image that accompanies this explanation, and click on it. The image will open up fullsized in a lightbox display.

Here is the HTML used to create this...

<figure class="right">
<a href="images-files/home-feature.jpg"data-lightbox="example" data-title="An example picture title">
<img src="images-files/home-feature.jpg">
<figcaption> Click to view larger </figcaption>
</figure>

It is worth noting that as we only want to display a single image, we don't need to put in data-lightbox="Our Gallery Name" in our a href tag, as we do with a multi image gallery.