We're going to continue our journey using Gridsome - A static Website generator with VueJS, to develop our fledgling website and new potential business by introducing the ability to add Feature Images for our blog posts.
What is a Feature Image ?
A featured Image is an image that is used to support a blog post or web page, sometimes also referred to as the primary image. It is usually found at the top of the Content Pages.
Feature images act similar to covers on books, and they try to capture a readers attention. Bloggers use feature images to entice users into reading your stories, boost up the visual quality of your blog, and they can even play a notable role in social media sharing.
We can also use feature images to to create a visual representation of the blog post and include Company Logos and imagery etc. to help re-enforce the Brand . This will become vitally important over the next few months and years as we attempt to create and enforce a brand with our user base.
I know it might sound a little early to be thinking about this at this stage of our development cycle, given that the website at this stage is still in its infancy, but in reality there is a lot of work that is taking place in the background and branding is vitally important for the forthcoming Digital Marketing initiatives.
Featured images are also vitally important when it comes to Social Media sharing. For example, a tweet that contains an image can receive almost 150% more retweets. Which for us could prove quite vital in helping to spread the word. Especially in the early days when we are going to hustling and scraping for attention and eye balls. We haven't got a big advertising budget, so we are going to counting on people sharing our content with others.
In order to facilitate this we have to ensure our content is super valuable and great quality and it is visually appealing. One way we can do this is ensure our posts have a great feature image.
Using Netlify CMS to include Feature Images
In Gridsome - Using Markdown Files we configured our Gridsome website to make use of the Free Netlify CMS in order to create a very basic Blog post template and Markdown files. In this post we, are going to explore a few more features we can add to really enrich and enhance our blog posts and articles.
We are also going to take this opportunity to also build upon the work we did Configuring basic SEO and additional SEO , because organic SEO is still a great way to gain traction to a website and we really need to ensure we're implementing as much as we can to leverage SEO opportunities.
When we initially configured our Netlify CMS in Gridsome - Explore plugins to make life easy we already enabled the ability to load up Media files to a folder. We are also able to use this functionality to store our Featured Images.
We just need to make an edit to our netlify CMS configuration to.src/admin/config.yml to include the option to upload an image file.
We simply added 2 new fields to capture and Image and to supply it with a textual description that will be used to populate the alt tag on the image attribute.
That's the first bit complete - I have to admit that for me personally getting in the most simple things done is YAML ends up taking ages primarily because dealing with all the indentations and quirkiness just drives me up the wall!
Now we can do the fun part!
Update Blog.Vue to include Feature Image
The first step we are going to do is include a Feature Image in our Article list page. It currently looks quite bland and boring and merely displays a list and some description of our articles. We are going to liven this up a bit now and include some cool images to help provide a graphical representation of what our post is about.
To enable this functionality we are just going to edit two files. The first file we will edit will be ./src/pages/Blog.vue . We first edit the page-query GraphQL query to include our new featureImage element and the two new properties we added. We will also stipulate that we only want to get the image size with a width of 400 pixels
We don't need to edit out Post Item Component to include an additional property which will be used to pass through the the feature Image, because it will already be available on the post property we created in Gridsome - Explore plugins to make life easy
We simply need to edit the HTML markup to add a Gridsome Image component and make use of the two properties that will be available on the feature property we will be passing in on the post property. We will first implement a conditional check to see if the feature property exists.
All we need to do now is make one final edit to the Blog.vue again to pass in the feature to Post Item component
If we run our application now and view the Articles page we will see that pages that have had feature images assigned to them will now display the feature images.
Conclusion
We have now concluded adding a feature image to the blog post overview page. This gives our Article list page a nice aesthetic.
This was all made very easy with the power of Gridsome, Netlify CMS and GraphQL.
- What is this Directory.Packages.props file all about? - January 25, 2024
- How to add Tailwind CSS to Blazor website - November 20, 2023
- How to deploy a Blazor site to Netlify - November 17, 2023