# VuePress Tutorial 18 - IndexPost Images

By: J the Code Monkey

•Posted: Nov 9, 2022 •Updated: Nov 1, 2024

# What We're Doing

In this tutorial we're going to continue the development of the IndexPost layout component by using the globally scoped $pagination variable to access pagination data related to images. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag like we did in the previous tutorial.

Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.

Be sure to add each block of code below one at a time to your project, then view the changes in the browser to get a better understanding of what each block is responsible for.

You can view all of the code in this tutorial by going to the tutorial-18 branch of the code-monkeys-blog-tutorials (opens new window) repository.

# Adding Post Images

Before we can access the pagination data related to images, we need to first add the images that we'll be displaying in the list of post pages. We're going to be adding three post images to the blog one for each post.

Each post image has a width of 155px and a height of 185px. Using the same width and height for the post images makes the list of post pages look consistent.

You can download all of the images below from your browser, and they're also available in the tutorial-18 branch of the code-monkeys-blog-tutorials (opens new window) repository.

The images were created using Canva (opens new window). The site offers a lot of features for free, but some features and images require payment after your free trial is expired. A good alternative to use is GIMP (opens new window).

Here are some other useful online image tools:

It's also important to reduce the file sizes of your images by using compression. This will help to optimize your site's bundle size, save bandwidth, and decrease the loading time for your images. Canva (opens new window) and GIMP (opens new window), and some of the other image tools mentioned above offer the ability to compress your images.

Here are some other useful online tools for image compression:

# Adding an Examples Directory

Let's start by creating an examples directory inside of the images directory. The examples directory will be used to store the post images for each example post.

The directory structure for your site should now look something like this:

.
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   │   ├── images
│   │   │   │   ├── code-monkeys-logos
│   │   │   │   └── examples
│   │   ├── theme
│   │   └── config.js

# Example Post 1

After adding the examples directory, we're now ready to add the post images for each example post. We'll be creating a directory for each example post inside of the examples directory. Then we'll add the post images to the directories of each example post.

We're going to start with the first example post by adding an example-post-1 directory inside of the examples directory. Then we'll add the image for the first example post which is named example-post-1.png inside of the example-post-1 directory.

The directory structure for your site should now look something like this:

.
├── examples
│   ├── example-post-1
│   │   └── example-post-1.png

Here's the example post 1 image:

# Example Post 2

For the second example post we'll be adding an example-post-2 directory inside of the examples directory. Then we'll add the image for the second example post which is named example-post-2.png inside of the example-post-2 directory.

The directory structure for your site should now look something like this:

.
├── examples
│   ├── example-post-1
│   ├── example-post-2
│   │   └── example-post-2.png

Here's the example post 2 image:

# Example Post 3

For the third example post we'll be adding an example-post-3 directory inside of the examples directory. Then we'll add the image for the third example post which is named example-post-3.png inside of the example-post-3 directory.

The directory structure for your site should now look something like this:

.
├── examples
│   ├── example-post-1
│   ├── example-post-2
│   ├── example-post-3
│   │   └── example-post-3.png

Here's the example post 3 image:

# Post Images

After adding the post images to the blog, we now need to add a way to access each image in the IndexPost layout component which we'll accomplish by adding a custom variable img to the YAML (opens new window) frontmatter blocks of each post file. The value of the img custom variable will be the path to the image in the project.

We're also going to add another custom variable of alt to the YAML (opens new window) frontmatter blocks of each post file. The value of the alt custom variable will be a description of the image.

If you have any questions or want to learn more about YAML (opens new window) frontmatter blocks in VuePress (opens new window) then check these resources:

# Adding Img and Alt to Post Files

Here's what the post files look like after adding the img and alt custom variables:

# Adding Img and Alt to $page Variables

As mentioned in the previous tutorial when VuePress (opens new window) encounters a YAML (opens new window) frontmatter block in a Markdown file it automatically adds each variable as a property to the globally scoped $page.frontmatter variable.

Since the page objects in the $pagination.pages property are the same as the $page variables used by the post pages, we will now have a frontmatter.img property and a frontmatter.alt property that we can access in the IndexPost layout component.

# Displaying Images

Now that we can access the values of the img and alt custom variables in the $pagination.pages property, we're ready to render the images on the pagination pages.

We're going to display the images using the img tag which we'll place in a div tag underneath the parent div tag of the p tag.

The img tag allows us to embed an image into the page. We'll be using the src and alt attributes provided by the img tag.

The src attribute is required, and it contains the path to the image you want to display which in our case are the post images we created earlier.

The alt attribute is optional and consists of a text description of the image which is useful for accessibility (opens new window) because screen readers will be able to read the description to the users. This allows the users to gain an understanding of what the image is. The description is also displayed on the page if the image is unable to be loaded.

If you want to learn more about the img tag, then check out <img>: The Image Embed element (opens new window).

We can access the img and alt properties on each page object in our loop by using post.frontmatter.img and post.frontmatter.alt, respectively.

The IndexPost.vue file should now look like this:

Here we're binding the src and alt attributes by placing a : before them which is shorthand for v-bind. This allows us to bind the JavaScript expressions to the HTML attributes.

Also, notice /images/ was added to the beginning of the path to the post images which we need to add since they're all located in the images directory. We don't need to include .vuepress/public in the path to the post images though because whenever you reference assets stored in the public directory that gets added automatically.

We also added an alternative value for the post image alt attribute in case the alt custom variable isn't present in the frontmatter of a post. This is done by using a logical OR operator, i.e., ||. Here, we're using "post.frontmatter.alt || 'Post Picture'" which means if the alt property evaluates to a falsy (opens new window) value, then we'll display the Post Picture text instead.

If you have any questions or want to learn more about v-bind or the logical OR operator, then check these resources:

# Entry Page HTML

After updating the IndexPost.vue file with the code above, if you navigate to the entry page http://localhost:8080/posts/ (opens new window) you should now see the images being displayed with some styling provided by the default theme (opens new window).

The HTML for the body tag for the entry page should now look something like this:

# Page 2 HTML

If you navigate to the second page http://localhost:8080/posts/page/2/ (opens new window) you should now see the image being displayed with some styling which again is being provided by the default theme (opens new window).

The HTML for the body tag for the second page should now look something like this:

# Next Steps

In the next tutorial we'll be continuing the development of the IndexPost layout component by beginning the process of adding the pagination buttons to the pagination pages.