Scroll to the top of the page
Strath Union logo Strath Union logo

News Article

Image galleries

Make lots of photos look good instead of cluttered.

contentsports unionStrath Union

What does it look like?

  • This is a placeholder image
  • This is a placeholder image
  • This is a placeholder image
  • This is a placeholder image
  • This is a placeholder image
  • This is a placeholder image
<ul class="image-gallery">
     <li>
          <img alt="This is a placeholder image" src="/pageassets/strath-metadata-1920x1080.jpg" />
     </li>
     <li>
          <img alt="This is a placeholder image" src="/pageassets/strath-metadata-1920x1080.jpg" />
     </li>
     <li>
          <img alt="This is a placeholder image" src="/pageassets/strath-metadata-1920x1080.jpg" />
     </li>
     <li>
          <img alt="This is a placeholder image" src="/pageassets/strath-metadata-1920x1080.jpg" />
     </li>
     <li>
          <img alt="This is a placeholder image" src="/pageassets/strath-metadata-1920x1080.jpg" />
     </li>
     <li>
          <img alt="This is a placeholder image" src="/pageassets/strath-metadata-1920x1080.jpg" />
     </li>
</ul>

How does it work?

Copy the code and replace the images with your gallery photos. Make sure to update the alt text on each of your photos, and make sure it's something descriptive.

You can use photos of any size but avoid using images that show text or data, as some images will stretch and crop to fit the space available, leaving the information cut off.

Compress your images before uploading

Lots of images on the page will slow it down. Make sure each image is a really low file size - under 100kb, if not smaller. Under 50kb is even better! You don't want to slow your site down to the point where people aren't bothering to stick around and wait.

Published: 01 Nov 2022 14:52 , Last updated: 01 Nov 2022 15:56