Eleventy Photo Gallery

screenshot of Eleventy Photo Gallery

Eleventy Photo Gallery

Starter site for creating a responsive image gallery using the Eleventy static site generator


The Eleventy Photo Gallery is a starter site that allows users to create their own photo or art gallery using the Eleventy static site generator. The site is highly performant and optimized for responsive images. Users can easily add images to the gallery and featured image pages by editing the provided metadata file. The site also supports build-time image transformations, removing the need for users to resize images on their own.


  • Responsive and optimized images: The gallery uses the <picture> element to ensure that images are responsive and optimized for different screen sizes.
  • CSS Grid: The home page showcases the gallery of images using CSS Grid, allowing for a visually appealing layout.
  • Featured image page: Each image has its own featured image page, allowing users to view an enlarged version of the image along with its metadata.
  • About me page: The site includes an "About me" page where users can provide information about themselves or their gallery.


To install the Eleventy Photo Gallery theme, follow these steps:

  1. Clone the repository: git clone https://github.com/tannerdolby/eleventy-photo-gallery.git
  2. Navigate to the local copy of the project: cd eleventy-photo-gallery
  3. Install dependencies: npm install
  4. Build the project: npm run build
  5. Serve the project locally: npm run start or npm run dev


The Eleventy Photo Gallery is a great option for anyone looking to create their own photo or art gallery website. The theme provides a responsive and optimized design, making it visually appealing on different devices. Additionally, the inclusion of build-time image transformations streamlines the process of incorporating images into the gallery. Overall, this theme offers a user-friendly solution for showcasing and managing a photo or art collection.


11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.