Images

Images may be added to your page using the image syntax described on this page.

Adding images

There are two key ways to point to which images you would like to add to your page, locally or globally. A local image is one that is stored within the websites own image folder. A global image is one that is accessible via the web (it could still be in your local image folder) and is accessed using the raw image URL.

Local images

To include images in your pages that are local to your own website, you must first add them to the images folder.

AutoNOTE/
├─ images/
   ├─ ...

After that, they can be added to your page with the command shown below. The ID must be unique for each image to allow referencing.

{% include image file="dog.jpeg" id="dog" caption="This is a custom caption for the image." %}

Global images

You can also point directly to a desired image using it’s address. For example, to point to this image we simply use the following code.

{% 
   include image 
   src="https://www.bath.ac.uk/lens/109/assets/university-of-bath/images/logo/uob-logo-standard.svg" 
   id="bath_logo" caption="This is a custom caption for the image." 
%}

Notice that the ‘file’ argument has been replaced with an argument named ‘src’ (short for source) to tell the system that it is now being passed a direct link.

Alt text

You can also add an image caption and alternative image text. If you do not give alternative text, this defaults to the image caption. Alt text can be used to provide extra context for screen readers, or in the event that the image fails to load for some reason.

{% include image file="non_existent.jpeg" id="a_unique_id" 
   caption="Image caption." alt="Image alternative text" 
%}

Size

By default, images are constrained to stay just slightly narrower than the full width of the text (2/3rds).

AutoNOTE support three alternative sizes for images. These may be chosen by setting the size parameter to sm, md or lg.

Small - sm (1/4 * text-width)

{% include image src = "https://via.placeholder.com/600x450" 
   id="small_image" size="sm" caption="Small (sm) image."
%}

Medium - md (1/2 * text-width)

{% include image src = "https://via.placeholder.com/600x450" 
   id="medium_image" size="md" caption="Medium (md) image."
%}

Large - lg (full text-width)

{% include image src = "https://via.placeholder.com/1024x768" 
   id="large_image" size="lg" caption="Large (lg) image."
%}

Custom Sizes

If these sizes aren’t right for you, then you can alternatively use the size-custom parameter. This parameter takes a value from 1-12, with 1 being 1/12 of the text-width and 12 being full text-width.

{% include image file="dog.jpeg" size-custom=2 caption="Custom size 2."%}

{% include image file="dog.jpeg" size-custom=5 caption="Custom size 5."%}

Position

AutoNOTE will centre images by default. To change this behavior for any image, simply set the position parameter to left or right. Here are some examples:

{% include image src="https://via.placeholder.com/600x450" id="left" 
   caption="Image placed on the left." position="left"
%}

{% include image src="https://via.placeholder.com/600x450" id="right" 
   caption="Image placed on the right." position="right" 
%}

Referencing

You can reference any image on the page so long as it has a unique id. This will produce a link with the number automatically populated by AutoNOTE. For example, . Clicking on these links will scroll the page to the referenced image.

This is achieved using the following code, simply replace the id in the arguments with the id of the image you wish to reference:

{% include ref id="bath_logo" %}