Getting Started with Vue.js: Lesson 17 of 25

Styling Gifs and Author Overlays

Up Next

Searching Gifs

Autoplaying in 7 seconds!

Cancel

Now that we are able to show our gifs, let's add some formatting and styling so that they look nice in a grid. We'll be working in the 11 - Gif Overlays folder.

The HTML

Let's upgrade our template so that we are able to:

  • link to the gif
  • show gif author
  • link to gif author
 <!-- our template -->
  <section id="app" class="section container">    

   <!-- create our grid -->
    <div class="columns is-multiline" v-if="gifs">
      <div class="column is-one-quarter" v-for="gif in gifs">

        <!-- the gif box -->
        <div class="gif-box">
       <!-- gif image and link -->
          <a :href="gif.url">
            <img class="gif-image" :src="gif.images.original.url">
          </a>

      <!-- gifs author -->
          <a 
            class="gif-user" 
            v-if="gif.user" 
            :href="gif.user.profile_url">
              <img :src="gif.user.avatar_url" height="40" width="40">
              {{ gif.user.display_name }}
          </a>
        </div>

      </div>
    </div>

  </section>

A lot of this is for Bulma classes to get us our nice grid. The main thing we are looking at is the gif-box where we generate a nice box for each gif.

Table of Contents

    You can also see gif-user is where we will show the gif's author and their profile link.

    The CSS

    Next, let's add some CSS so we can overlay the gif-user over the image.

    <style>
        .gif-box {
            position: relative;
            background: #333;
        }
        .gif-user   {
            display: flex;
            align-items: center;
            position: absolute;
            left: 15px;
            bottom: 15px;
        }
        .gif-user img {
            margin-right: 8px;
        }
    </style>

    Now our gifs have author overlays and are in a grid!

    Chris Sevilleja

    173 posts

    Co-founder of Scotch.io. Slapping the keyboard until something good happens.