Using Vue Template Syntax to Build A Photo Gallery

If you don’t have the Vue CLI installed already, start by running either of these commands in your terminal, depending on if you prefer using npm or Yarn:

$ npm install -g @vue/cli

or

$ yarn global add @vue/cli

Now you’ll be able to run the vue command from the command line. Let’s create a Vue app called alligator-zest

$ vue create alligator-zest
$ cd alligator-zest
$ npm run build
$ npm run serve

Next, we’re going to change HelloWorld.vue to be PhotoGallery.vue. App.vue should look something like this:

<template>
  <div id="app">
    <PhotoGallery/>
  </div>
</template>

<script>
import PhotoGallery from './components/PhotoGallery.vue'

export default {
  name: 'App',
  components: {
    PhotoGallery
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

PhotoGallery.vue is where we’re about to get fancy while keeping things simple at the same time. 🌈

Let’s assume we have 5 photo files in the assets/photos folder named 1.jpeg through 5.jpeg. Use any images you want.

<template>
  <div>
    <ul class="gallery">
      <li v-for="n in 5" :key="n">
        <img
          :src="require('@/assets/photos/' + n + '.jpeg')"
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PhotoGallery'
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.gallery {
  display: flex;
  justify-content: space-around;
}
img {
  width: 20%;
}
</style>

Note the display: flex on "gallery" as well as the v-for in the <li> tag. You should be able to see the app in your browser at localhost:8080.

Let’s update this code so that when we click on a photo it’s enlarged.

<template>
  <div>
    <ul class="gallery">
      <li v-for="n in 5" :key="n">
        <img
             @click="highlight"
          :src="require('@/assets/photos/beijing/' + n + '.jpeg')"
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'PhotoGallery'
},
methods: {
  highlight() {
    event.target.id = "theater";
    let eventIterator = event.target.parentNode;
    while (eventIterator.previousElementSibling != null) {
      eventIterator.previousElementSibling.getElementsByTagName('img')[0].id = "";
      eventIterator = eventIterator.previousElementSibling;
    }
    eventIterator = event.target.parentNode;
    while (eventIterator.nextElementSibling != null) {
      eventIterator.nextElementSibling.getElementsByTagName('img')[0].id = "";
      eventIterator = eventIterator.nextElementSibling;
    }
  }
}
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.gallery {
  display: flex;
  justify-content: space-around;
}
img {
  width: 20%;
}
#theater {
  width: 40%;
}
</style>

We added a v-on:click to each image that sets off the highlight() method. This method makes the image that is clicked-on become larger while ensuring that the others are thumbnail-sized.

It sets the id of the clicked image to “theater” which has a larger width. Then, it gets the sibling nodes of the parent node off of the image, the li with the v-for in it. It goes into all of these li tags and sets their respective img tag’s id to a null string to make sure that only one img has the “theater” id at any given time.

This is cool but it’s still not what we see on the web; how can we get the enlarged image to be a big display, say, under the 5 thumbnails? The end result would be a roll of thumbnails with the selected image enlarged to a real theater size right below. Sounds good, right?

We’re going to add the following:

<div id="frame">
  <img
    :src="this.theatrical"
  >
</div>

data() {
  return {
    theatrical: ""
  }
},
methods: {
  highlight() {
    event.target.id = "theater";
    this.theatrical = event.target.src;

And finally, add the following to your CSS.

#frame img {
  width: 80%;
}

The big frame is filled up by the photo that you clicked-on since its src attribute gets set when you click. Now you have a nice gallery view of your photos!

All with some nifty use of Vue’s reactivity system, data properties, and template syntax. 🧪