Skip to content

General Best Practices

Jump to bottom
Nathan Hui edited this page Sep 18, 2024 · 2 revisions

Images

Images MUST be placed in the following location: /assets/{project}/

Images SHOULD be named YYYY-MM-DD_description_of_image.ext. If a date is not relevant (for example, a logo), then the date may be omitted.

Images SHOULD be placed in the markdown using the following: {{ relative_path_to_image_from_assets | resize: final_size,webp,80 | absolute_url }}. See https://imagemagick.org/script/command-line-processing.php#geometry for a full description of the resize argument.

Images with Caption

Up to 3 images can be place in a row with a caption below the image with text centered. The number of images placed depends on number of src paramters passed. Note if you are using only 2 images, src3 will have no effect and if you are only using 1 image, src2 and src3 will have no effect.

Params:

  • src: The path of the frist image. Should always be used.
  • src2: The path of the second image. Should only be used if user wants 2 or more images
  • src2: The path of the thrid image. Should only be used if user wants 3 images
  • caption: Text to put under all images

Format: {% include img_caption.html src="/abs/path/to/source/1" src2="/abs/path/to/source/2" src3="/abs/path/to/source/3" caption="Text to include" %}

Galleries

Creates a photo gallery in the page. This can be either in a grid format where all images are set to 200 by 200 photos with cropping, or not grid where the images attempt to maintain thier full size and aspect ratios.

Gallaries require passing in a list of images. Liquid doesn't allow for directly creating the list in the includes statement. To make a list of images you can put the list into the yaml section of the markdown file and access the files through there. For example

---
layout: gallery
permalink: /acoustic-species-identification/media
title: Acoustic Species Identification
category: acoustic-species-identification
enable_nav: true
grid: true
media: 
 - assets/acoustic_species_id/white_winged_becard_vocalization.png
 - assets/acoustic_species_id/2021-08-04_scripps_coastal_reserve_trail.jpg
 - assets/acoustic_species_id/2021-08-10_audiomoth.jpg
 - assets/acoustic_species_id/2021-08-10_mugen_blue_looking_at_audiomoth.jpg
 - assets/acoustic_species_id/2021-08-10_jacob_placing_audiomoth.jpg
 - assets/acoustic_species_id/2021-08-10_expedition_team.jpg
 - assets/acoustic_species_id/2021-08-04_jacob_searching.jpg
 - assets/acoustic_species_id/audiomoth_acoustic_array.png
---

The images will be accessed through page.media

Params:

  • media: Array of file paths
  • grid: true for grid, false or none for not grid.

Format: {% include gallery_component.html media=page.media grid=true %}

Clone this wiki locally