Skip to content

A gallery library for vuejs with a modern design and automatic image optimisation

License

Notifications You must be signed in to change notification settings

JonathanTreffler/nuxt-gallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm npm bundle size npm Lint Library Workflow Status Lint Demo Workflow Status GitHub CodeQL Workflow Status GitHub Demo Deploy Workflow Status GitHub GitHub last commit Maintenance

Nuxt Gallery

A gallery library for nuxt with a modern design and automatic image optimisation.

How it works:

On compile time the images of the gallery get automatically resized and reencoded.

It encodes the images in webp, the modern image standard for the web, and jpg, so everything works on old browsers too. It also creates multiple resolution of the image (in both webp and jpg).

When the client loads the gallery the browser decides wich image resolution best fits.
Brosers decide this by factors like: Screen Resolution, Network Speed, Baterry Level, Data Saving Mode, Data Caps ...

Because of these optimisations the images will look great on PCs, Tablets and Phones regardless of the resolution.

When a image gets clicked the full resolution version gets loaded and displayed as big as possible (depends on the screen size).

If you have to include the author of the image, because of the license you can do that with the data-source parameter.
It will show the author on the bottom of the screen when the user clicks on the image.

Installation:

Run:

npm install nuxt-gallery

And integrate this into your nuxt.config.js:

buildModules: [
  '@aceforth/nuxt-optimized-images'
],

Usage:

<script>
  import Gallery from 'nuxt-gallery/src/Gallery.vue'
  import GalleryImage from 'nuxt-gallery/src/GalleryImage.vue'
  
  export default {
    components: {
      Gallery,
      GalleryImage
    }
  }
</script>
<template>
  <gallery>
    <galleryImage src="demo_1.jpg" alt="Forest" data-source="Made by: ___" />
    <galleryImage src="demo_2.jpg" alt="Flowers" />
  </gallery>
</template>

Screenshots: