TypeScript Tutorial: Creating a Simple Image Gallery

Written by

learnmodernjavascript

in

In today’s digital age, images are crucial for conveying information and engaging users. From personal blogs to e-commerce websites, showcasing images effectively is paramount. Building a dynamic and user-friendly image gallery can significantly enhance user experience and website appeal. This tutorial will guide you through creating a simple, yet functional, image gallery using TypeScript, focusing on clarity and practical application for both beginners and intermediate developers.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing and other advanced features to your projects. This allows for:

  • Improved Code Quality: Catching errors early during development.
  • Enhanced Readability: Making code easier to understand and maintain.
  • Better Tooling: Leveraging features like autocompletion and refactoring.

Using TypeScript ensures a more robust and scalable solution for your image gallery.

Project Setup

Before diving into the code, let’s set up the project environment. You’ll need Node.js and npm (Node Package Manager) installed. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: 
    mkdir image-gallery-ts
cd image-gallery-ts
  2. Initialize npm: 
    npm init -y

    This creates a package.json file to manage project dependencies.

  3. Install TypeScript: 
    npm install typescript --save-dev
  4. Create a TypeScript Configuration File: 
    npx tsc --init

    This generates a tsconfig.json file, which you’ll customize to configure TypeScript compilation.

Your directory structure should now look something like this:

image-gallery-ts/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└──

Configuring TypeScript

Open tsconfig.json and modify the following settings. These configurations are crucial for a smooth development process.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Here’s a breakdown of the key settings:

  • target: Specifies the JavaScript version to compile to (e.g., “es5”, “es6”).
  • module: Specifies the module system (e.g., “commonjs”, “esnext”).
  • outDir: Sets the output directory for compiled JavaScript files.
  • rootDir: Specifies the root directory of your TypeScript source files.
  • strict: Enables strict type-checking options.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files (.d.ts).
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • include: Specifies the files to include in the compilation.

Creating the Image Gallery Structure

Let’s create the basic HTML structure for our image gallery. Create an index.html file in your project’s root directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="gallery-container">
        <div class="gallery-images"></div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides a basic structure with a container for the gallery images and a link to a stylesheet (style.css) and the compiled JavaScript file (dist/index.js). We will create the style.css file later.

Writing the TypeScript Code

Now, let’s create the TypeScript file. Create a directory named src in your project’s root directory and create a file named index.ts inside it.

mkdir src
touch src/index.ts

Inside src/index.ts, we’ll write the core logic for our image gallery:

// Define an interface for image data
interface Image {
    url: string;
    alt: string;
}

// Sample image data (replace with your images)
const images: Image[] = [
    { url: 'image1.jpg', alt: 'Image 1' },
    { url: 'image2.jpg', alt: 'Image 2' },
    { url: 'image3.jpg', alt: 'Image 3' },
];

// Function to create an image element
function createImageElement(image: Image): HTMLImageElement {
    const img = document.createElement('img');
    img.src = image.url;
    img.alt = image.alt;
    img.classList.add('gallery-image'); // Add a class for styling
    return img;
}

// Function to render the image gallery
function renderGallery(): void {
    const galleryImagesContainer = document.querySelector('.gallery-images');

    if (!galleryImagesContainer) {
        console.error('Gallery container not found');
        return;
    }

    images.forEach(image => {
        const imgElement = createImageElement(image);
        galleryImagesContainer.appendChild(imgElement);
    });
}

// Call the render function when the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    renderGallery();
});

Let’s break down this code:

  • Image Interface: Defines the structure of our image data (url and alt).
  • Sample Image Data: An array of Image objects. Replace the placeholder URLs with your actual image paths.
  • createImageElement Function: Creates an <img> element for a given image, sets the src, alt, and adds a class for styling.
  • renderGallery Function: Retrieves the gallery container from the DOM, and iterates through the images array. For each image, it creates an image element using createImageElement and appends it to the gallery container.
  • DOMContentLoaded Event Listener: Ensures the renderGallery function is called after the HTML document has been completely loaded.

Compiling the TypeScript Code

Now, let’s compile the TypeScript code into JavaScript. Open your terminal and run the following command from your project’s root directory:

tsc

This command will compile the src/index.ts file and create a dist/index.js file, which is the JavaScript version of your code. If you encounter any errors, review the error messages and ensure your code matches the provided examples.

Styling the Image Gallery

To make our image gallery visually appealing, we’ll add some CSS styles. Create a file named style.css in your project’s root directory, and add the following styles:

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.gallery-image {
    width: 200px;
    height: 150px;
    object-fit: cover;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

These styles:

  • Set the gallery container to a flexbox layout.
  • Allow images to wrap onto multiple lines.
  • Center the images horizontally.
  • Set the image dimensions and use object-fit: cover; to ensure images fill the space without distortion.
  • Add some margin, border, and a subtle box shadow for visual appeal.

Running the Image Gallery

Open index.html in your web browser. You should see the images displayed in a grid layout. If you don’t see the images, check the following:

  • File Paths: Ensure the image file paths in src/index.ts are correct.
  • Browser Console: Open your browser’s developer console (usually by pressing F12) and check for any error messages.
  • File Structure: Make sure your project structure is correct, and that the dist/index.js file exists and is linked correctly in your HTML.

Adding More Features (Intermediate Level)

Once you have the basic image gallery working, you can add more advanced features. Here are a few ideas:

1. Image Preloading

To improve performance and user experience, you can preload images before they are displayed. This prevents a jarring effect as images load. Modify the createImageElement function to include preloading:

function createImageElement(image: Image): HTMLImageElement {
    const img = document.createElement('img');
    img.src = image.url;
    img.alt = image.alt;
    img.classList.add('gallery-image');

    // Preload the image
    const preloadImage = new Image();
    preloadImage.src = image.url;
    preloadImage.onload = () => {
        img.src = image.url; // Set the src after loading
        // Optionally, add a class to fade in the image
        img.classList.add('fade-in');
    };
    return img;
}

And add the following CSS to style.css:

.gallery-image {
    opacity: 0; /* Initially hide the image */
    transition: opacity 0.5s ease-in-out; /* Add a smooth transition */
}

.gallery-image.fade-in {
    opacity: 1; /* Make the image visible after loading */
}

2. Image Zoom/Lightbox

Implement a lightbox or zoom effect to allow users to view images in a larger size. This usually involves creating a modal or a larger container and displaying the selected image. The implementation requires adding event listeners and dynamically updating the modal’s content and visibility. This can be done by using JavaScript and CSS.

3. Image Filtering and Sorting

Add functionality to filter and sort images based on tags, categories, or other criteria. This involves modifying the images array, adding input fields or select elements, and using JavaScript to dynamically update the gallery display based on user input. This will require more complex logic, but it’s a great example of dynamic behavior in a web app.

4. Lazy Loading

For galleries with many images, implement lazy loading to improve performance. This involves loading images only when they are close to the viewport. This can be achieved using the Intersection Observer API or a library.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check the image file paths in your src/index.ts file and the paths to your CSS and JavaScript files in your index.html file.
  • Typos: Typos in your code can cause errors. Carefully review your code for any spelling mistakes or syntax errors. Use an IDE with TypeScript support to help catch these mistakes.
  • Missing or Incorrect Imports: Ensure that you have imported any necessary modules correctly.
  • Compilation Errors: If you encounter compilation errors, carefully read the error messages and fix the issues in your TypeScript code. The TypeScript compiler provides useful information to help you debug.
  • Browser Console Errors: Open the browser’s developer console (usually by pressing F12) and check for any error messages. These messages can provide clues about what’s going wrong.
  • CSS Conflicts: If your styles aren’t appearing correctly, check for CSS conflicts. Make sure your CSS selectors are specific enough and that there are no conflicting styles from other sources.
  • Incorrect DOM Manipulation: Ensure that you are correctly selecting DOM elements and manipulating them. Use console.log() to verify that you are selecting the right elements.

Key Takeaways

  • TypeScript for Robustness: Using TypeScript improves code quality, readability, and maintainability.
  • Clear Structure: Organize your code into logical functions and modules for better readability.
  • DOM Manipulation: Learn how to select and manipulate DOM elements to dynamically update your web page.
  • CSS Styling: Use CSS to create a visually appealing image gallery.
  • Error Handling: Implement error handling to provide a better user experience.

FAQ

Here are some frequently asked questions:

  1. How do I add more images to the gallery?

    Simply add more objects to the images array in src/index.ts, making sure to update the url and alt properties for each image.

  2. How can I change the image dimensions?

    Modify the width and height properties in the .gallery-image CSS rule in style.css.

  3. How do I deploy this gallery to a website?

    You’ll need a web server to host your files. Upload the index.html, dist/index.js, style.css, and your image files to your web server. Make sure the file paths in your HTML and TypeScript code are correct relative to the location of the files on the server.

  4. Can I use a different image format?

    Yes, you can use any image format supported by web browsers (e.g., JPG, PNG, GIF, SVG). Make sure the file paths in your code point to the correct image files.

  5. How do I handle errors during image loading?

    You can add an onerror event listener to your <img> elements to handle image loading errors. This can display a default image or show an error message. For example, add the following to the createImageElement function:

    img.onerror = () => {
    img.src = 'default-image.jpg'; // or a placeholder image
    img.alt = 'Error loading image';
};

Building a basic image gallery with TypeScript is a great first step towards creating more dynamic and interactive web applications. As you become more comfortable with TypeScript and web development concepts, you can explore more advanced features like image preloading, zoom effects, and filtering. The key is to break down complex tasks into smaller, manageable steps and to practice regularly. With each project, you will enhance your skills and deepen your understanding of web development principles. Remember to experiment, and don’t be afraid to try new things. The world of web development is constantly evolving, so continuous learning is essential for staying current and building innovative solutions.

More posts