Part 55: Enhancing Our HomePage with Real Product Images

[Pages] Responsive Design and Image Optimisation

[Pages] Responsive Design and Image Optimisation

In our ongoing project to improve the user interface of our HomePage, we've successfully implemented a responsive grid that adapts to different screen sizes. This ensures our product cards display in either one or three columns, depending on the device. Now, it's time to replace the placeholder images with real product pictures fetched from our content management system (CMS).

Fetching and Displaying Real Product Images

Step 1: Understanding the Image URL Structure

When we retrieve product data from our CMS, the JSON response includes a "picture" field. This field is an object containing various properties, but for our needs, we only require the "url" property to display the image.

The "url" provided by the CMS is a path, not a complete URL. To construct the full URL, we need to prepend the path with the server address where our CMS is hosted.

Step 2: Modifying the Product Data

To make the image accessible in our frontend, we'll enhance our getProduct function to include a pictureUrl property in the product object. This property will combine the server address and the image path.

// lib/products.js

const CMS_URL = 'https://your-cms-url.com'; // Replace with your actual CMS URL

function stripProduct(product) {
  return {
    id: product.id,
    title: product.title,
    description: product.description,
    price: '$' + product.price.toFixed(2),
    pictureUrl: CMS_URL + product.picture.url,
  };
}

By adding pictureUrl, we ensure our frontend has direct access to the correct image location.

Step 3: Updating the ProductCard Component

With the pictureUrl now available, we can replace the placeholder image in our ProductCard component with the real product image.

// components/ProductCard.js

import Link from 'next/link';

function ProductCard({ product }) {
  return (
    <div className="border w-80 shadow hover:shadow-xl">
      <Link href={`/products/${product.id}`}>
        <img src={product.pictureUrl} alt={product.title} />
        <div className="p-2 flex justify-between items-baseline">
          <h2 className="text-lg font-bold">
            {product.title}
          </h2>
          <span>
            {product.price}
          </span>
        </div>
      </Link>
    </div>
  );
}

export default ProductCard;

Now, when you load the page, the real product images should display, enhancing the visual appeal of our product cards.

Optimizing Image Loading

While our current implementation successfully displays images, they are not optimized for the size at which they are displayed. For instance, an image with an original size of 960x720 pixels is displayed at a much smaller size on the page, leading to unnecessary loading time.

Image Optimization with Next.js

In the next phase, we'll explore how Next.js can automatically optimize these images for us. This includes resizing images to the appropriate dimensions, converting them to more efficient formats, and implementing lazy loading to improve performance.

Conclusion

By fetching and displaying real product images from our CMS, we've significantly enhanced the user interface of our HomePage. However, optimizing these images is crucial for maintaining fast loading times and a smooth user experience. Stay tuned for more on how Next.js can streamline this process, making our application even more efficient and user-friendly.