NodeJS: Displaying images and links in Pug templates

Overview

Node.js paired with Pug templates offer a powerful combination for web development, enabling you to build dynamic web pages with ease. Pug, formerly known as Jade, is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. In this tutorial, we focus specifically on how to handle images and links within Pug templates, an essential aspect of creating engaging and interactive web pages.

Before we dive into the creative part, let’s ensure you have Node.js and Pug set up. If you haven’t yet, start by initializing a new Node.js project and installing Pug:

$ mkdir my-pug-project
$ cd my-pug-project
$ npm init -y
$ npm install pug express

For this tutorial, we’ll also use Express.js, a minimal and flexible Node.js web application framework, to serve our Pug templates:

const express = require('express');
const app = express();

app.set('view engine', 'pug');
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000, () => console.log('Server running on port 3000'));

In the code above, we’re telling Express to use Pug as the view engine and to serve static files from the ‘public’ directory. This is crucial for handling images and links correctly.

Displaying Images in Pug

To display an image in a Pug template, you can use the img tag similar to how you would in HTML. However, Pug offers a more concise syntax. Ensure your images are stored in the ‘public’ folder or a subfolder within it. Here’s a simple example:

img(src='/images/my-picture.jpg' alt='My Picture')

You can control the image’s appearance further by adding CSS classes or inline styles directly in the Pug syntax:

img(src='/images/my-picture.jpg' alt='My Picture' class='img-responsive' style='border: 1px solid #ccc;')

Handling Links in Pug

Links in Pug are created with the ‘a’ tag, just like in HTML. The syntax is straightforward and elegant:

a(href='/about') About Us

This code creates a simple link to the ‘/about’ page of your site. To add attributes such as a title or target, you can include them right within the parentheses:

a(href='/about' title='Learn more about us' target='_blank') Learn More

Combining Images and Links

Quite often, you’ll want an image to be a clickable link. In Pug, you can nest the img tag within an a tag similar to how you would in HTML. Here’s how:

a(href='https://example.com')
  img(src='/images/logo.png' alt='logo')

This makes the entire image act as a link to the specified URL. It’s a common technique used for logos and other navigational images.

Advanced Techniques

Now that you’ve grasped the basics, let’s briefly touch on some more advanced concepts that can elevate your Node.js and Pug templates to the next level:

1. Dynamic Images and Links: You can dynamically generate images and links based on data passed to templates. Here’s an example of displaying multiple images stored in an array:

each val in images
  img(src=val.url alt=val.description)

2. Using Filters for Links: Pug supports filters that allow you to manipulate text before outputting it. For example, you could use a Markdown filter to render links:

a: markdown-it
  | [Go to Google](https://www.google.com/)

3. Inline SVG: With Pug, you can directly embed SVG code into your templates, making it easier to work with vector graphics:

// Example of inline SVG
svg(width='100' height='100')
  circle(cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red')

By understanding these fundamental and advanced techniques, you’re well on your way to building richer, more dynamic web pages with Node.js and Pug. Remember, practice makes perfect, so don’t hesitate to experiment with different ways to incorporate images and links into your projects for maximum effect.

In conclusion, working with images and links in Pug templates within a Node.js environment opens a plethora of opportunities for creating interactive and visually appealing web applications. With a little creativity and the power of Pug’s concise syntax, you can easily elevate your web development projects to new heights.