image - freeCodeCamp.org

How to Build and Deploy an Image Hosting Service on Sevalla

Manish Shivanandhan — Fri, 26 Sep 2025 13:15:09 +0000

When most people think of image hosting, they imagine uploading photos to a cloud service and getting back a simple link.

It feels seamless, but behind that experience sits a powerful set of technologies. At the core is something called object storage, which is a different way of handling files compared to traditional databases or file systems.

In this article, we’ll build a complete image hosting service using Node.js and Express, connect it to object storage, and finally, deploy the whole project to Sevalla.

By the end, you will have a working application that lets users upload images and retrieve them through hosted URLs, all running live on the cloud.

What is Object Storage?
What We Will Be Building
How to Set Up the Project
How to Create Your Object Storage
How to Deploy Your Project on Sevalla
Why This Project Matters
Conclusion

What is Object Storage?

To understand why our project is designed the way it is, we need to first understand object storage.

Traditional file storage systems save files in a hierarchy of folders, like your computer’s file explorer. Block storage systems, often used in databases, split data into chunks and manage them for speed and reliability.

Object storage is different. It treats each file, whether an image, video, or document, as a single object. Each object is stored with its metadata and a unique identifier inside a flat structure, usually called a bucket.

This flat architecture makes object storage scalable almost without limit. Instead of worrying about file paths or directories, you simply place an object in a bucket and get back an identifier.

Amazon S3 is the industry standard for object storage, offering massive scale, global replication, and advanced features, but it comes with added complexity and often unpredictable costs. Sevalla’s object storage, on the other hand, is designed for developers who want the same durability and scalability without the steep learning curve.

It provides a simpler setup, and is compatible with S3, so interacting with it is same as using a S3 bucket without the additional setup and complexity. While S3 is ideal for enterprises with petabytes of data, Sevalla’s solution is perfect for projects like image hosting, blogs, or mobile apps where ease of use and speed matter most.

What We Will Be Building

We will create a simple yet practical image hosting service. At its core, the service allows a user to send an image through an HTTP request. The server will accept this image, process it, and store it in object storage.

The usefulness of such a project goes far beyond a coding exercise. If you are building a blog, you could use this service to store images for your posts without worrying about file management on your web server.

If you are developing a mobile app that requires profile pictures or image sharing, this backend can serve as your foundation. Even if you simply want to understand how cloud-native applications handle file uploads, this project gives you a clear, hands-on experience.

By the end, you will not just have code running locally. We will deploy the application on Sevalla, meaning your image hosting service will be live, scalable, and accessible to anyone with a link.

How to Set Up the Project

Let us start by setting up a Node.js project. You can clone this repository if you don’t want to setup the project from scratch.

Create a new project directory, initialize it with npm, and install the required dependencies.

npm init -y
npm i express multer dotenv @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

We will use Express for our web server, Multer for handling file uploads, and the AWS SDK to connect to object storage. Multer acts as middleware, giving us easy access to uploaded files. The AWS SDK gives us programmatic access to object storage, allowing us to upload files and generate links.

Let’s write a quick index.html and put it inside the public/ directory to serve as the UI for file upload.

html>
<html lang="en">
<head>
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1" /> 
  <title>Pic Hosttitle>

  
  <style>
    :root { color-scheme: light dark; } /* Support dark/light themes */
    body { 
      font-family: system-ui, sans-serif; 
      max-width: 560px; 
      margin: 4rem auto; 
      padding: 0 1rem; 
    }
    h1 { font-size: 1.25rem; margin-bottom: 1rem; }
    form, .card { 
      border: 1px solid #9993; 
      padding: 1rem; 
      border-radius: 12px; 
    }
    input[type="file"] { margin: .5rem 0 1rem; }
    button { 
      padding: .6rem 1rem; 
      border-radius: 10px; 
      border: 1px solid #9995; 
      background: #0000FF; 
      cursor: pointer; 
    }
    #result { margin-top: 1rem; display: none; }
    #result a { word-break: break-all; } /* Break long URLs nicely */
  style>
head>
<body>
  
  <h1>Simple Image Hosth1>

  
  <form id="uploadForm" class="card">
    <label for="file">Choose imagelabel><br/>
    <input id="file" name="file" type="file" accept="image/*" required />
    <br/>
    <button type="submit">Uploadbutton>
    
    <div id="status" aria-live="polite" style="margin-top:.75rem;">div>
  form>

  
  <div id="result" class="card">
    <div>
      <strong>Share this page:strong> 
      <a id="pageUrl" href="#" target="_blank" rel="noopener">a>
    div>
  div>

  
  <script>
    const form = document.getElementById('uploadForm');   // Form element
    const statusEl = document.getElementById('status');   // Upload status
    const result = document.getElementById('result');     // Result box
    const pageUrlEl = document.getElementById('pageUrl'); // Share link
    const directUrlEl = document.getElementById('directUrl'); // (unused here)

    // Event listener for form submission
    form.addEventListener('submit', async (e) => {
      e.preventDefault(); // Prevent full-page reload
      statusEl.textContent = 'Uploading...'; 
      result.style.display = 'none';

      const fd = new FormData(); // FormData object for sending file
      const file = document.getElementById('file').files[0];
      if (!file) {
        statusEl.textContent = 'Pick a file first.';
        return;
      }
      fd.append('file', file); // Attach file to request

      try {
        // Send file to backend /upload route
        const res = await fetch('/upload', { method: 'POST', body: fd });
        if (!res.ok) throw new Error('Upload failed');
        const data = await res.json();

        // Show returned page URL
        pageUrlEl.textContent = data.pageUrl;
        pageUrlEl.href = data.pageUrl;

        // Display result card and reset form
        result.style.display = 'block';
        statusEl.textContent = 'Done!';
        form.reset();
      } catch (err) {
        // Handle error
        statusEl.textContent = 'Error: ' + err.message;
      }
    });
  script>
body>
html>

When a user visits the page, they’ll see a simple upload form with a file picker. They can select an image from their computer and click Upload. Then JavaScript intercepts the form submission using addEventListener('submit'), prevents the browser from doing a full page refresh, and instead, packages the selected file into a FormData object.

That file is then sent to the server with a fetch call to the /upload route. If the server responds successfully, the JSON returned contains a pageUrl. This URL is displayed inside the result card, which was initially hidden. The user can now copy this link and share it with others.

If something goes wrong, like no file being selected, the server erroring out, or the upload failing, the script updates the status message to inform the user.

Here’s how it looks to the user.

Now let’s create the backend using server.js file.

import path from "path"; // For working with file paths
import express from "express"; // Web framework to handle HTTP routes
import multer from "multer"; // Middleware for handling file uploads
import crypto from "crypto"; // Used to generate random unique IDs
import dotenv from "dotenv"; // Loads environment variables from .env file
import { fileURLToPath } from "url"; // For handling ES module file paths
import {
  S3Client,
  PutObjectCommand,
  HeadObjectCommand,
  GetObjectCommand,
} from "@aws-sdk/client-s3"; // AWS SDK commands for S3 operations
import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; // To generate temporary signed URLs

dotenv.config(); // Load environment variables

// Setup paths for __dirname and __filename in ES modules
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// Bucket name from environment
const S3_BUCKET = process.env.S3_BUCKET;

// Create an S3 client (works with Sevalla-compatible storage as well)
const s3 = new S3Client({
  region: "auto", // Auto-region for Sevalla
  endpoint: process.env.ENDPOINT, // Custom endpoint for object storage
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID, // From .env
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY, // From .env
  },
});

// Initialize Express app
const app = express();

// Serve static files (like index.html, CSS, JS) from "public" folder
app.use(express.static(path.join(__dirname, "public")));

// Multer setup: store uploaded files in memory (not on disk)
// Limit file size to 10MB
const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 10 * 1024 * 1024 },
});

// ---------- ROUTE 1: GET / ----------
// Serves the main HTML file (upload form)
app.get("/", (req, res) => {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

// ---------- ROUTE 2: POST /upload ----------
// Handles image uploads and stores them in object storage
app.post("/upload", upload.single("file"), async (req, res) => {
  try {
    // Check if file exists
    if (!req.file) return res.status(400).json({ error: "file is required" });

    // Generate a random ID for the file
    const id = crypto.randomUUID().replace(/-/g, "");
    const key = id;

    // Create a PutObjectCommand to upload file to S3/Sevalla
    const put = new PutObjectCommand({
      Bucket: S3_BUCKET,
      Key: key,
      Body: req.file.buffer,
      ContentType: req.file.mimetype,
      Metadata: {
        originalname: req.file.originalname || "",
      },
    });

    // Upload the file
    await s3.send(put);

    // Build a page URL for retrieving the image later
    const baseUrl = `${req.protocol}://${req.get("host")}`;
    const pageUrl = `${baseUrl}/i/${id}`;

    // Respond with the page URL
    res.json({ id, pageUrl });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: "upload_failed" });
  }
});

// ---------- ROUTE 3: GET /i/:id ----------
// Redirects to a signed URL for secure access to the uploaded file
app.get("/i/:id", async (req, res) => {
  const { id } = req.params;
  const key = id;

  try {
    // Ensure the object exists in storage
    await s3.send(new HeadObjectCommand({ Bucket: S3_BUCKET, Key: key }));

    // Create a signed URL valid for 1 hour
    const command = new GetObjectCommand({ Bucket: S3_BUCKET, Key: key });
    const signedUrl = await getSignedUrl(s3, command, { expiresIn: 3600 });

    // Redirect user to the signed URL
    return res.redirect(302, signedUrl);
  } catch (err) {
    console.error(err);
    return res.status(404).send("Not found");
  }
});

// ---------- Boot the Server ----------
app.listen(process.env.PORT || 3000, () => {
  console.log(`Image host server listening for requests...`);
});

Route 1: `GET /`

This is the entry point of the app. When you open the browser and go to the root URL, it serves the index.html file from the public folder. That file contains the upload form where the user can select an image and submit it.

Route 2: `POST /upload`

This is where the magic happens. When a user selects an image and clicks “Upload,” the file is sent to this endpoint. Multer handles the file upload in memory, and then the file is pushed to object storage using the PutObjectCommand. A random unique ID is generated as the key for the file. Once uploaded, the server responds with a pageUrl that can be used to view the uploaded image later.

Route 3: `GET /i/:id`

This route retrieves an uploaded image. Instead of serving the file directly, it generates a signed URL valid for one hour using getSignedUrl. This signed URL gives temporary access to the file stored in object storage. The server then redirects the user to that signed URL. If the file doesn’t exist, it returns a 404 error.

Before you run this code, we need access to the object storage and add the value in an environment file. The code you see process.env fetches these values and helps us authenticate with the object storage to read and write files.

How to Create Your Object Storage

Once created, click “Settings” and you will see the access key and secret key. We need these four values

Bucket name
Endpoint URL
Access Key
Secret Key

Copy them into a file named .env within your project.

AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY_ID_HERE
AWS_SECRET_ACCESS_KEY=YOUR_SECRET_ACCESS_KEY_HERE
S3_BUCKET=YOUR_BUCKET_NAME_HERE
ENDPOINT=YOUR_ENDPOINT_URL_HERE

Additionally, enable public access in the settings so that you can push files from your local environment.

Testing the Application Locally

Let’s make sure our code works locally.

node server.js

Go to http://localhost:3000/ and try uploading a file. It should give you the URL to view the file after a successful upload.

You can visit the URL to see your uploaded file. You can also double check if it has been uploaded using the Object Storage UI.

Great. We have built a simple image hosting and sharing service. Now let’s get this into the cloud.

How to Deploy Your Project on Sevalla

First, push your project to GitHub or fork my repository. Then log in to your Sevalla dashboard and create a new application.

Connect your GitHub account, choose the repository that contains your image hosting service, and select the branch you want to deploy. Sevalla will automatically detect that it is a Node.js project and install dependencies. It will also run the application on the specified port.

To configure AWS credentials and bucket information, go to the environment variables section in your app and add your AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_REGION, and S3_BUCKET_NAME. These values will be injected into your application at runtime, ensuring that sensitive data is not hardcoded into your source code.

Once environment variables are added, go to “Overview” and click “Deploy”.

Wait for a few minutes. Once the deployment is complete, Sevalla will give you a live URL. Click “Visit APP” to go to your application’s page.

Congratulations! Your app is now live. You can share the URL with others or even add a custom domain to your app to have your own image hosting solution.

Why This Project Matters

This project is more than just a coding exercise. It teaches you how modern applications manage files at scale, introduces you to object storage, and shows how to integrate cloud services into your own projects.

With Sevalla, you also learned how to deploy production-ready applications, giving you the full cycle from local prototype to live cloud service.

For developers building blogs, mobile apps, or even internal tools, the ability to host images reliably and at scale is invaluable. With object storage and a simple Node.js service, you can avoid reinventing the wheel and rely on proven cloud infrastructure.

Conclusion

We began by exploring object storage and why it is ideal for handling files like images. We then built a Node.js application that accepts uploads, stores them in Sevalla’s Object Storage, and returns accessible URLs. Finally, we deployed the application on Sevalla, turning a local project into a live image hosting service. Along the way, you gained not only working code but also a deeper understanding of how to build cloud-native services.

By completing this project, you now have a working image hosting service you can extend and adapt. You could add features like authentication, image resizing, or even a better front-end interface with drag-and-drop UI. Most importantly, you have experienced how development and deployment fit together in modern software.

SVG Tutorial – How to Code Images with 12 Examples

Hunor Márton Borbély — Mon, 04 Dec 2023 12:29:00 +0000

Have you ever needed an icon for your website, but you couldn't quite find the right one? Or perhaps you wanted to have a simple diagram, but didn't want to learn a whole new library just for that?

Well, good news – you can do all that and more without ever leaving your favorite code editor or using any third party tools or libraries.

Since HTML5, we can include the code of an SVG image inside an HTML document. We don’t even need to use the image tag that refers to a separate file. We can inline the code of an image right inside the HTML. We can do this because SVGs have a very similar syntax to HTML.

This opens up a lot of cool options. Suddenly we can access parts of an image from JavaScript or set the style from CSS. We can animate parts of an image from JavaScript or make it interactive. Or we can turn things around and generate graphics from code.

For more complicated images, you will still use a designer tool. But the next time you need a simple icon, a diagram, or animation, maybe you can code it yourself.

So how do SVGs look like under the surface? In this tutorial, we go through the source code of a few SVGs to cover the foundations.

The following examples are from svg-tutorial.com. You can also watch this article as a video with even more fun examples.

The SVG tag

First, we have to talk about the svg tag itself. This tag contains the image elements and defines the frame of our image. It sets the inner size and the outer size of the image.

The width and height property define how much space the image takes up in the browser. There’s often a viewBox property as well. This defines a coordinate system for the elements inside the image. These two can be confusing because they both define a size.

You can think of the width and height of an SVG as an external size and the viewBox as an internal size.

The size defined by width and height is how the rest of HTML thinks of the image and how big it appears in the browser. The size defined by viewBox is how the image elements think of the image when they position themselves inside of it.

In the next example we have three SVGs that have the very same content. A circle element with the same center coordinate and same radius. They appear quite different, though.

The very same circle can appear different based on the size of the image and the viewBox property

At the example in the middle, the size defined by width and height matches the one defined by the viewbox. In the first example we see what happens if the width and height are smaller. The image simply shrinks down as all the coordinates and sizes defined within the image still align to the viewbox.

In the last example we see what happens if the viewbox is focusing on only part of the image. Things appear bigger in this case, but the actual size of the image is still defined by the width and height property.

The viewBox also defines the center of the coordinate system in which the image items place themselves.

The first two numbers define which coordinate should be at the top left corner of the image. Coordinates grow to the right and downwards. In this article, we will center the coordinate systems. The 0,0 coordinate will always be in the middle of the image.

One note before we start: while we can inline SVG images in an HTML file, that doesn’t mean we can freely combine any SVG tag with any HTML tag.

The SVG tag represents the frame of the image and every SVG element has to come within an SVG tag. The same is true in the opposite direction. HTML tags can’t be within an SVG tag, so we can’t have a div or a header tag inside an SVG. But don’t worry, there are similar tags available.

How to Make a Christmas Ornament with SVG

Let’s start with a simple Christmas tree ornament. Here we'll only use simple shapes. A rectangle, and two circles.

We'll position and style these elements with attributes. For the circle, we define the center position and for the rectangle, we define the top left corner. These positions are always related to the coordinate system defined by the viewBox.

Christmas Ornament made out of circles and a rectangle. On the right you can see the coordinates we use in this example.

<html>
  <svg width="200" height="200" viewBox="-100 -100 200 200”>
    0" cy="20" r="70" fill="#D1495B" />

    <circle
      cx="0"
      cy="-75"
      r="12"
      fill="none"
      stroke="#F79257"
      stroke-width="2"
    />

    <rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
  svg>
html>

Remember, we moved the center of the coordinate system to the middle of the image and the X-axis grows to the right and the Y-axis grows towards the bottom.

We also have presentational attributes that style our shapes. Unlike in HTML, we do not use background-color to set a color for a shape but we use the fill attribute.

And to set a border for a shape we use stroke and stroke-width. Note how we use the circle element both to draw a ring and a ball with different attributes.

How to Build a Christmas Tree with SVG

Let’s move on to a Christmas tree. We can’t always use basic shapes to assemble our image. A polygon is the simplest way to draw a freeform shape. Here we set a list of points that are connected with straight lines.

Christmas Tree made out of polygons and a rectangle

<html>
  <svg width="200" height="200" viewBox="-100 -100 200 200">
    <polygon points="0,0 80,120 -80,120" fill="#234236" />
    <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
    <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
    <rect x="-20" y="120" width="40" height="30" fill="brown" />
  svg>
html>

You might be wondering how we know before starting to code where our coordinates should be.

To be honest, this requires a bit of imagination. You can start with pen and paper and draw a draft first to get an estimate. Or you can just make a guess then adjust your values until it looks good.

How to Make a Gingerbread Figure with SVG

Let’s move on with a gingerbread figure. Since our SVG is living inside an HTML file now, we can assign CSS classes to each tag and move some attributes to CSS.

We can only move the presentation attributes, though. Position attributes and attributes that define the shape still have to stay in the HTML. But we can move colors, stroke, and font attributes to CSS.

Gingerbread figure example. On the right you can see how would it look if the stroke-width were one

<svg class="gingerbread" width="200" height="200" viewBox="-100 -100 200 200">
  <circle class="body" cx="0" cy="-50" r="30" />

  <circle class="eye" cx="-12" cy="-55" r="3" />
  <circle class="eye" cx="12" cy="-55" r="3" />
  <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />

  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class="limb" x1="25" y1="50" x2="0" y2="-15" />

  <circle class="button" cx="0" cy="-10" r="5" />
  <circle class="button" cx="0" cy="10" r="5" />
svg>

.gingerbread .body {
  fill: #cd803d;
}

.gingerbread .eye {
  fill: white;
}

.gingerbread .mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

.gingerbread .limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

We already saw the fill and some of the stroke properties, but here’s another one – the stroke-linecap. This can make our line cap round.

Note that the legs and the arms are simple lines here. If we remove the line cap and set a smaller stroke-width, then we can see that these are simple lines. But by setting a thick stroke width and a round line cap we can shape legs and arms for our figure.

Also note the rx property at the rectangle defining the mouth. This will make the edges round. You can think of it as border-radius if you like.

How to Make a Star with SVG

Let’s move on to a star. A star is a simple shape, so we can define it as a bunch of polygons and set each point individually. But then we would need to know each coordinate.

Instead of that, we can just define one wing as a group, then repeat it five times with a rotation to get the star's shape. We use the transform attribute to set a rotation.

Star shape made out of transformed polygons. On the right we can see the coordianates of one arm of the star

<svg width="200" height="200" viewBox="-100 -100 200 200">      
  <g transform="translate(0 5)">
    <g>
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(-72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
    <g transform="rotate(-144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    g>
  g>
svg>

In this example, each wing consists of two polygons. They need to be rotated the same way, so we can group them with a g tag and rotate them together.

You can think of the g tag as the div tag in HTML. On its own, it does not represent anything. But it can contain other elements and attributes defined on the group tag apply to its children.

Groups can be embedded. With the outer group we translate the whole star downwards by 5 units.

How to Make a Snowflake with SVG

Grouping elements is a nice trick, but we had to repeat the same code for each wing five times.

Instead of repeating the same code over and over again, we can also create a definition for a shape and reuse it by id. Here we define a branch of a snowflake then use it six times with different rotations.

Snowflake made out of reused image elements. On the right we can see the coordainates use for an arm

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path
      id="branch"
      d="
        M 0 0 L 0 -90
        M 0 -20 L 20 -34
        M 0 -20 L -20 -34
        M 0 -40 L 20 -54
        M 0 -40 L -20 -54
        M 0 -60 L 20 -74
        M 0 -60 L -20 -74"
      stroke="#E5C39C"
      stroke-width="5"
    />
  defs>

  <use href="#branch" />
  <use href="#branch" transform="rotate(60)" />
  <use href="#branch" transform="rotate(120)" />
  <use href="#branch" transform="rotate(180)" />
  <use href="#branch" transform="rotate(240)" />
  <use href="#branch" transform="rotate(300)" />
svg>

The branch is defined as a path. The path is the most powerful SVG tag. We can define pretty much anything with paths, and if you open any SVG file, you will see mostly paths.

The shape of the path is defined by the d attribute. Here we define several drawing commands. A command always starts with a letter defining the command type and ends with a coordinate.

Here we only have the two most simple commands, move to (M) and line to (L). The move to command moves the cursor to a point without drawing a line and the line to command draws a straight line from the previous point.

A command always continues the previous command, so when we draw a line we only define the endpoint. The starting point will be the previous command’s endpoint.

This path is a bit unusual because there are several move to commands in it to draw the main branch and each side branch with the same path.

How to Draw a Forest with SVG

Rotation is not the only way we can generate images from simple shapes. In this example, we define a tree shape and then place it at various positions in different sizes to draw a forest.

Forest made out of reused image elements

First, we create a background out of a rectangle and a circle. Then we define a tree shape from a simple polygon and a line.

Then we can reuse it in a similar way as we did in the snowflake example. We move it to the defs section, wrap it into a group element, set an ID for it, and then reuse it with the use element.

Here we also position the reused elements by setting an x and y coordinate and to add some perspective to the image we use the scale transformation.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <g id="tree">
      <polygon points="-10,0 10,0 0 -50" fill="#38755b" />
      <line x1="0" y1="0" x2="0" y2="10" stroke="#778074" stroke-width="2" />
    g>
  defs>

  <rect x="-100" y="-100" width="200" height="200" fill="#F1DBC3" />
  <circle cx="0" cy="380" r="350" fill="#F8F4E8" />

  <use href="#tree" x="-30" y="25" transform="scale(2)" />
  <use href="#tree" x="-20" y="40" transform="scale(1.2)" />
  <use href="#tree" x="40" y="40" />
  <use href="#tree" x="50" y="30" transform="scale(1.5)" />
svg>

How to Make a Curvy Tree with SVG

The path element becomes really powerful when we start using curves. One of them is the quadratic Bézier curve that not only defines an endpoint for a segment but also has a control point. The control point is an invisible coordinate towards which the line is bending, but not touching it.

Christmas Tree made using Quadratic Bézier curves

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <path
    d="
      M 0 -80
      Q 5 -75 0 -70
      Q -10 -65 0 -60
      Q 15 -55 0 -50
      Q -20 -45 0 -40
      Q 25 -35 0 -30
      Q -30 -25 0 -20
      Q 35 -15 0 -10
      Q -40 -5 0 0
      Q 45 5 0 10
      Q -50 15 0 20
      Q 55 25 0 30
      Q -60 35 0 40
      Q 65 45 0 50
      Q -70 55 0 60
      Q 75 65 0 70
      Q -80 75 0 80
      Q 85 85 0 90
      Q -90 95 0 100
      Q 95 105 0 110
      Q -100 115 0 120
      L 0 140
      L 20 140
      L -20 140"
    fill="none"
    stroke="#0C5C4C"
    stroke-width="5"
  />
svg>

Here we have a series of quadratic Béziers curves (Q) where the control points get further and further away from the center of the tree as the path goes down.

How to Make a Bell with SVG

While the quadratic bezier curve (Q) is great when we want to bend a line, often it’s not flexible enough.

With a cubic Bezier (C), we not only one have one control point but two. The first control point sets the initial direction of the curve and the second one defines from which direction the curve should arrive to its endpoint.

If these directions match the directions of the line before and the line after the curve, then we have a smooth transition between the path segments.

With Cubic Bézier curves we can set two control points

The next example uses both quadratic and cubic Béziers to form a bell. Here the bottom of this bell is defined with straight lines. Then a quadratic Béziers starts the bell cloak. Next a cubic Bezier smoothly continues the quadratic bezier as it forms the top of the bell. Then we reach the bottom part with another quadratic bezier.

Bell example made out of different curves and straight lines

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <g stroke="black" stroke-width="2">
    <circle cx="0" cy="-45" r="7" fill="#4F6D7A" />
    <circle cx="0" cy="50" r="10" fill="#F79257" />
    <path
      d="
        M -50 40
        L -50 50
        L 50 50
        L 50 40
        Q 40 40 40 10
        C 40 -60 -40 -60 -40 10   
        Q -40 40 -50 40"
      fill="#FDEA96"
    />
 g>
svg>

How to Write Text Along a Path

Drawing shapes is not the only use case for paths. We can also use them to render text along an invisible path. We can define a path in the definitions section and use it in a textPath element to make the text go around the circle. Here we use arc again, but you can use any other path and the text will follow the stroke.

With the text-path property we can make a text follow a path

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <path id="text-arc" d="M 0, 50 A 50 50 0 1 1 1,50" />
  defs>

  <text
    fill="#0c5c4c"
    font-family="Tahoma"
    font-size="0.77em"
    font-weight="bold"
  >
    <textPath href="#text-arc">
      Happy Holidays! Happy Holidays! Happy Holidays!
    textPath>
  text>
svg>

How to Animate an SVG with CSS

To continue our forest example, we can add a snowing effect with a similar animation. We can animate the transform property from CSS.

Animation effect made with SVG and CSS

We extend our forest example with simple reusable snowflakes and add a bunch of them to the scene with various CSS classes to set some variation in speed and appearance. Then we add animation in CSS to make them look like falling snow. It’s a bit glitchy and not the most sophisticated animation, but you get the idea.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <defs>
    <g id="tree">
      <polygon points="-10,0 10,0 0 -50" fill="#38755b" />
      <line x2="0" y2="10" stroke="#778074" stroke-width="2" />
    g>
    <circle id="big" cx="0" cy="0" r="5" fill="white" />
    <circle id="small" cx="0" cy="0" r="3" fill="white" />
  defs>

  <rect x="-100" y="-100" width="200" height="200" fill="#F1DBC3" />
  <circle cx="0" cy="380" r="350" fill="#F8F4E8" />

  <use href="#tree" x="-30" y="25" transform="scale(2)" />
  <use href="#tree" x="-20" y="40" transform="scale(1.2)" />
  <use href="#tree" x="40" y="40" />
  <use href="#tree" x="50" y="30" transform="scale(1.5)" />

  <use href="#big" x="0" y="0" class="flake fast" />
  <use href="#big" x="-50" y="-20" class="flake fast opaque" />
  <use href="#big" x="30" y="-40" class="flake fast" />
  <use href="#big" x="50" y="-20" class="flake fast opaque" />
  <use href="#big" x="30" y="50" class="flake slow" />
  <use href="#big" x="-70" y="-80" class="flake slow opaque" />
  <use href="#big" x="30" y="50" class="flake slow" />
  <use href="#big" x="90" y="-80" class="flake slow opaque" />
  <use href="#small" x="10" y="-50" class="flake slow" />
  <use href="#small" x="-50" y="-60" class="flake slow opaque" />
  <use href="#small" x="30" y="70" class="flake slow" />
  <use href="#small" x="10" y="-80" class="flake slow opaque" />
svg>

.flake {
  animation-duration: inherit;
  animation-name: snowing;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.flake.opaque {
  opacity: 0.7;
}

.flake.slow {
  animation-duration: 5s;
}

.flake.fast {
  animation-duration: 3s;
}

@keyframes snowing {
  from {
    transform: translate(0, -100px);
  }
  to {
    transform: translate(0, 100px);
  }
}

How to Make a Clock That Shows the Actual Time

SVG elements can be manipulated from JavaScript the same way as any other HTML tag.

Clock example made with SVG and JavaScript

In this example, we are using a short code snipped to show the actual time on a clock. We access the hour and minute hands in JavaScript with getElementById then set their transform attribute with a rotation that reflects the current time. Below you see the actual SVG showing the current time.

For a more detailed tutorial on how to make a clock with SVG and JavaScript, check out How to Code an Animated Watch.

<svg width="200" height="200" viewBox="-100 -100 200 200">
  <rect x="-100" y="-100" width="200" height="200" fill="#CD803D" />

  <circle r="55" stroke="#FCCE7B" stroke-width="10" fill="white" />

  <circle
    r="45"
    stroke="#B6705F"
    stroke-width="6"
    stroke-dasharray="6 17.56194490192345"
    stroke-dashoffset="3"
    fill="none"
  />

  <g stroke="#5f4c6c" stroke-linecap="round">
    <line id="hours" y2="-20" stroke-width="8" />
    <line id="minutes" y2="-35" stroke-width="6" />
  g>
svg>

window.addEventListener("DOMContentLoaded", () => {
  const hoursElement = document.getElementById("hours");
  const minutesElement = document.getElementById("minutes");

  const hour = new Date().getHours() % 12;
  const minute = new Date().getMinutes();

  hoursElement.setAttribute("transform", `rotate(${(360 / 12) * hour})`);
  minutesElement.setAttribute("transform", `rotate(${(360 / 60) * minute})`);
});

How to make a Data-driven Diagram with SVG and React

SVGs also work well with frontend libraries. Here’s an example of a React component that generates a data-driven diagram.

In this example we have two things. We are generating a list of rectangles to create a column diagram based on some arbitrary data. And we also generate a series of coordinates for a polyline.

We can use JavaScript to generate a Data-Driven Diagram

For simple use cases, you can code your own diagram like this. But if you need more complex diagrams then check out the D3 library. The D3 library uses SVG under to hood to create all sorts of diagrams.

function Diagram() {
  const dataPoints = [3, 4, 7, 5, 3, 6];
  const sineWave = Array.from({ length: 115 })
    .map((item, index) => `${index - 55},${Math.sin(index / 20) * 20 + 10}`)
    .join(" ");

  return (
    <svg width="200" height="200" viewBox="-100 -100 200 200">
      {dataPoints.map((dataPoint, index) => (
        <rect
          key={index}
          x={index * 20 - 55}
          y={50 - dataPoint * 10}
          width="15"
          height={dataPoint * 10}
          fill="#CD803D"
        />
      ))}

      <polyline points={sineWave} fill="none" stroke="black" stroke-width="5" />
    svg>
  );
}

Next Steps – Making SVGs Interactive with JavaScript

Under the hood, SVGs can be quite confusing at first. Lots of coordinates, letters and strange parameters. Once you understand their foundations, though, you can use them to your advantage and start coding images.

And we are just getting started. Adding JavaScript to the mix will introduce a whole new level.

For more examples check out svg-tutorial.com or my YouTube tutorial with 12 more examples on how to use SVGs for your next project!

Embedded content

How to Generate Images using React and the Dall-E 2 API – React and OpenAI API Tutorial

freeCodeCamp — Tue, 08 Nov 2022 20:22:16 +0000

By Nishant Kumar

Hey everyone! OpenAI just released its DALL-E API where users can generate custom images by just typing in a query.

So in this tutorial, you'll learn how to integrate the OpenAI DALL-E 2 API with a React app.

But First, How Does Dall-E Work?

So as you already know, you have to type a query – something like Bears with Paint Brushes in Starry Night, painted by Vincent Van Gogh. This contains so many keywords, like Paint Brushes, Starry Night, and Vincent Van Gogh.

What Dall-E will do is search for these images that are related to the keywords that I just mentioned above. Then it will use Artificial Intelligence to merge all the images into one, and then serve it to us.

Now let’s learn how you can integrate this into your React application to create your own application with these amazing features.

How to Create a React Application

So, create a React application. You can create it with the CRA (create-react-app) command or you can use Vite.

We need a text field and a button as UI components. The text field will be used to get the query from the user and the button to trigger the API request. Let’s also create a state to store the query and a function that will run on the button click.

import { useState } from "react";
import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");

  const generateImage = async () => {};

  return (
    <div className="app-main">
      <>
        <h2>Generate an Image using Open AI APIh2>

        <textarea
          className="app-input"
          placeholder="Search Bears with Paint Brushes the Starry Night, painted by Vincent Van Gogh.."
          onChange={(e) => setPrompt(e.target.value)}
          rows="10"
          cols="40"
        />
        <button onClick={generateImage}>Generate an Imagebutton>
      
    
  );
}

export default App;

Our output will look something like this:

How to Integrate the DALL-E 2 API with the React Application

Let’s see how we can integrate the DALL-E 2 API into our application.

First of all, we need to go to the OpenAI website. You need to sign up to generate an API key. You will also get $18 in your account that you can use.

Choose that you are creating an application while you are signing up.

So after you have created your account, go to the View API Keys section, where you can create your unique API key. Check the below image for reference.

Now in your React App, create a .env file. This is to store the API key.

Add your API key there. Note that the method of getting the key from .env files is different in CRA and Vite React App. So please keep that in mind. I am using Vite, so this is how we do it:

VITE_Open_AI_Key = "Your API Key"

Now that the API key is added, we need to import a few things in our App.js or App.jsx file. These include the Configuration and OpenAIApi from openai SDK. But first, we need to install the openai SDK into the React App.

To install it, just type the command below:

npm install openai

It may take some time to install. Then, import both things that we mentioned earlier like this:

import { Configuration, OpenAIApi } from "openai";

We need to create a configuration variable, which will take the API key from the .env file.

const configuration = new Configuration({
    apiKey: import.meta.env.VITE_Open_AI_Key,
});

Now, we need to pass this configuration instance to the OpenAIApi, and create a new instance for OpenAIApi.

const openai = new OpenAIApi(configuration);

Here is the whole code until now:

import { Configuration, OpenAIApi } from "openai";

import { useState } from "react";
import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");
  const configuration = new Configuration({
    apiKey: import.meta.env.VITE_Open_AI_Key,
  });

  const openai = new OpenAIApi(configuration);


  return (
    <div className="app-main">
      <>
        <h2>Generate an Image using Open AI APIh2>

        <textarea
          className="app-input"
          placeholder="Search Bears with Paint Brushes the Starry Night, painted by Vincent Van Gogh.."
          onChange={(e) => setPrompt(e.target.value)}
          rows="10"
          cols="40"
        />
        <button onClick={generateImage}>Generate an Imagebutton>
      
    
  );
}

export default App;

Now in the generateImage function, we need to call the OpenAIApi instance that we created before. Remember, the function needs to be asynchronous.

const generateImage = async () => {
    await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });
  };

As you can see, we are using openai.createImage. This API is used to create an image using a user query. It also takes n, which is the number of images we want the API to return, and the size of the image.

There are three different image sizes with different prices, which are listed below. If you are using 1024x1024 size, it will cost you $0.020 per image.

Now this openai.createImage returns some response that we can store in a variable. We can then get the generated image link from the response variable.

const generateImage = async () => {
    const res = await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });

    console.log(res.data.data[0].url);
  };

But let’s not do that. Let’s create one more state to store this image link so that we can view the image in the UI itself.

const [result, setResult] = useState("");

const generateImage = async () => {
    const res = await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });

    setResult(res.data.data[0].url);
  };

Now the image link will be stored inside the result state. Let's also render the image in the UI. But as the result is initially empty, we can create a check. We will only see the image tag where there is a link inside the state.

{result.length > 0 ? (
          <img className="result-image" src={result} alt="result" />
        ) : (
          <>
        )}

And here's the styling too:

.result-image {
  margin-top: 20px;
  width: 350px;
}

The UI will now look something like this:

Let's type something and see the output:

In the above example, I have typed A Horse on the Beach with Red Sands. And here is the result.

Let's try something more complex, like Bears with Paint Brushes in Starry Night, painted by Vincent Van Gogh.

Here is the result:

This is how you do it. You can type any input query and it will generate that image through Artificial Intelligence.

Wrapping Up

And that’s all folks. Now you know how to create your own React application with the DALL-E 2 API to generate images using AI. There are a lot more functionalities that you can add. So go ahead and experiment a little.

If you want to see the video version of this, check my video on Generate Images using React and Dall-E API - React and OpenAI API Tutorial on my YouTube channel Cybernatico.

Check the code on GitHub for your reference.

Happy Learning.

HTML Background Image – How to Add Wallpaper Images to Your Website

Ihechikara Abba — Fri, 23 Sep 2022 19:18:19 +0000

Background images can help beautify websites and make them more attractive to users.

In this article, you'll learn:

How to add a background image to your website using the CSS background-image property.
Other CSS background properties for images.

How to Add Wallpaper Images to Your Website

When coding a website, using an image as the background image of the website is different from inserting an image in HTML using the img element.

To use an image as the background of your website, you'll use CSS.

Here's an example:

html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Background Imagetitle>
head>

<body>
    <h1>Background imageh1>
body>
html>

h1{
    text-align: center;
}

We have two code blocks above — the HTML code displays text that says "Background image" on the webpage while the CSS code centers the text on the page.

To add a wallpaper image to the website — one that covers the entire page — you have to write some CSS rules for the body element. Here's how:

body{
    background-image: url('bg-image.jpg');
}

In the code above, we're using the background-image property to add an image to the body of the webpage. The path/location of the image is passed in as a parameter to the url() function: url('bg-image.jpg').

Here's what the webpage looks like now:

What if the Background Image Is Smaller Than the Browser Window?

In situations where the image is smaller than the browser, the image is repeated a couple 0f time to cover up the spaces that remain.

This repetition doesn't look great for every picture. Here's what a smaller version of the image used in the previous section looks like in the browser:

The image has been split into four uneven parts. Unless this is the effect you're looking for, you can fix it using the background-repeat property.

Here's how to fix the image repetition problem:

body{
    background-image: url('bg-image-small.jpg');
    background-repeat: no-repeat;
}

In the code above, we assigned a no-repeat value to the background-repeat property.

Here's what the webpage looks like now:

The image is no longer being repeated across the page but we have a new problem — the image no longer covers the whole page.

To fix that, we use the background-size and background-attachment properties:

body{
    background-image: url('bg-image-small.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Setting the value of the background-size property to cover makes the image cover the whole element (the body/entire page in our case).

With the fixed value of the background-attachment property, the image's position is fixed. This way it remains in the same position even when you scroll across the page.

Here's the image now:

The downside of stretching out a small image to cover the entire page is that the image loses quality and becomes blurry as its being stretched. In this case, you should consider that before using a small image as the background image for your website.

Summary

In this article, we talked about adding wallpaper images to a website.

You can add a background image to your website using the CSS background-image property.

We also learned how to use other CSS background properties like background-repeat, background-size, and background-attachment.

Happy coding!

What is Alt Text? Image Alt Text HTML Example

Joel Olawanle — Fri, 16 Sep 2022 20:39:17 +0000

Images play a significant role on our web pages. They help explain concepts better, make our web pages visually attractive, and lots more.

In HTML, you use the tag to embed an image into your web page.

This tag has two required attributes: src to specify the path to the image, and alt to specify an alternate text for the image. The alt attribute is there in case, for some reason (maybe wrong image path), the image doesn't get displayed.

<img src="/my-image.jpg" alt="This is the alt text for my image">

Although the alt attribute is required in the tag, many people decide to leave it empty or type some text that doesn't not correlate with the image to make sure it has text.

Most developers pay little or no attention to the alt text because they don't know its usefulness, and most tutorials fail to highlight its importance.

In this article, you will understand what alt text means, what it does, and how useful it is when embedding an image in your webpage. We will also highlight a few points to consider when writing alt text for your images.

What is Alt Text?

Alternative or alt text is also referred to as an alt attribute. It is concise, descriptive text that accurately describes an image.

By default, this text is not shown when you view a web page in the browser. Still, in a situation where you cannot view an image for some reason, the alt text becomes visible. This text should be informative and descriptive enough to give the reader or user a sense of what the image is about and what message it conveys.

For example, if you have an image like this:

Rather than giving it a random alt text like "cat" or "Sleeping cat", you can be more descriptive and specific by adding alt text like "A Cat sleeping on a blanket" or "A Cat dozing on on a blanket".

<img src="/imgs/cat-sleeping.jpg" alt="A Cat sleeping on a blanket">

Why is Image Alt Text Important?

The alt attribute is required for the tag, which is one reason you should add it to your images.

But there are several other reasons why you should not only consider adding alt text but rather descriptive and informative alt text to your images:

When you have connectivity issues or your image's path is incorrectly declared, your image may not be loaded to your webpage. In this case, the alt text value is shown in the place of the image.
The alt text provides the descriptive meaning of an image that search engines can use to improve your web page's SEO. It gives search engines better information to rank your web page with, meaning having proper alt text will help your web page rank higher.
Visually impaired users who use screen readers can hear a description of the image. This shows how useful it is to enhance accessibility for people who can't see the screen.
When you want to link your image to another page or document, the alt text is used as the anchor text when the image fails to load.

Tips for Writing Good Alt Text

A famous saying is that "anything worth doing is worth doing well". The same basically applies to writing your alt text – it is better not to write alt text than to write bad or meaningless alt text.

Here are a few tips to bear in mind when writing your alt text:

Accurately describe the image

The main aim of writing alt text is that it is able to stand as an alternative for an image (like when the images fail to display or for screen readers).

For alt text to serve its purpose, it must adequately and accurately describe the image.

One helpful tip is to think of a way to describe an image to a user who cannot see the image or as if you were describing it to someone over the phone. Then write the alt text that way.

Keep it short

At this point, you might begin to think that these alt texts would end up being in the form of a paragraph – but they should't be. In most cases, we should always look for the best way to explain and describe our images in a few words.

Always remember that screen readers may cut off alt text at around 125 characters, so it's best to stick within that limit. Still, you should also always avoid using a single word as alt text.

For example, in the image below, we can see a man standing on an elevated rock looking at the sky with his hands stretched out:

A poor alt text would be "Man standing" or "Man looking at sky". Better alt text would involve adding more descriptive information like "Man standing on top of rock mountain during golden hour" or "Man standing on top of a rock mountain and looking at the sky", and so on.

Note: There are always many ways to describe an image, but always think of a better way to describe your images to someone who cannot see the image, making your text short but precise.

Use keywords but avoid keyword stuffing

When describing an image, the keyword should not be your top priority. Instead, you should focus on truthfully describing your image.

Although having your keywords in your alt text will help your web page rank higher on search engines, it is essential to know that search engines can't recognize unhelpful or bad alt text. And if you have excessive keywords in your alt text (keyword stuffing) it can make your web page rank low.

This means you should only to use important images that enhance the essence of your web page and only use the most important keywords to describe them.

Don't repeat yourself

Avoid repetition by all means. Why would you use your web page title or heading as alt text? It's better to leave it empty than repeat captions or web content.

The best advice is, when you cannot describe an image well, it's best to leave the alt text empty than add any random text or use image captions as alt text which is repetition.

Image Captions vs. Alt Text

It's easy to confuse image captions and alt text or repeat the content in your alt text as an image caption.

Captions describe images to help users relate to surrounding text, whereas alternative text explains the information in an image or describes an image for screen reader users.

Captions do not have to exactly match what the image shows but rather they explain how the image relates to the text or content in which it is placed.

Don't include the words' image' or 'picture'

The alt attribute is used in an image tag, which means search engines will know that this is an image, so there is no need to use the word image or picture when writing alt texts.

However, it's good to help people understand the context or what type of image or picture it is. For example, you could say headshot, illustration, screenshot, chart, and lots more.

Wrapping Up

In this article, you have learned what alt text means and why it's essential. You've also seen some important tips on how to use it when embedding images on your web page.

Finally, it is essential to note that you should always add alt text to your images, including your logo, images used as buttons, and many others – and it's crucial to know why uou're doing this.

But note that decorative images, whose primary purpose is to decorate your web pages rather than pass information, do not require alt text.

Thanks for reading, and ensure you have fun coding!

Google Sheets Tutorial – How to Use Regex and VLOOKUP to Display Images from Google Drive

Eamonn Cottrell — Wed, 03 Aug 2022 17:03:25 +0000

Images make many things better. And Google Sheets is one of those things.

The easiest way to add an image to Google Sheets is to simply insert one into your sheet.

But if you have added many images this way, you'll quickly tire of the multiple clicks it takes to do so. Especially if you have to add images often, or if you have to add the same images to multiple sheets.

In this article, you'll learn how to add many images from their URLs that you can dynamically toggle between in a dropdown list. We'll cover:

Data Validation for creating a dropdown list
Named Ranges to make formula references easier and cleaner
The VLOOKUP function to display the right image from the dropdown list
The REGEXEXTRACT function to extract a string from a URL (don't worry, it'll make sense 😉)
The IMAGE function to display the image from a URL address
We'll use the ampersand (&) operator as well as regular expressions (Regex)
We'll also make our sheet look good by removing gridlines, changing the font, adding borders, colors, and a drop shadow effect behind tables

How to Setup the Project 📐

You can follow along with the sheet I'm using for everything we'll discuss:

https://docs.google.com/spreadsheets/d/1rFU2gPy6rU8IKFDmsxKHYCf0KGVHkcumQ5O5QCf156M/edit?usp=sharing

Make a copy if you want to edit it yourself.

Make a copy to edit yourself

All cell and range references below will be from this sheet so you can easily look and see what I'm talking about.

I've also made a folder of images here that is publicly shared so all this works. You don't have to make a copy of this unless you just want to 😀.

How to Use Named Ranges in Google Sheets 📛

Named ranges make life easier.

You don't have to use them, but it makes references in functions easier since you'll be writing the name of something instead of a sterile cell reference.

We'll use three of them:

B4 = itemSelect This is the cell where our dropdown list will live.
B8:G13 = pictureMatch This is the range for our VLOOKUP function. It contains the names of the pictures we'll display followed by their respective URLs.
B8:B16 = pictureName This is the first column of the pictureMatch range for referencing just the names in our data validation cell.

To create a named range, simply highlight the range, select Data -> Named ranges from the toolbar, and name it.

How to Perform Data Validation 📃

We'll use data validation to create a dropdown list in B4. Same deal here – just highlight the cell (or range) and select Data -> Data validation from the toolbar:

Select List from a range, and then =pictureName (because we named that range) for the range. Alternatively, you can declare the range explicitly.

There are additional options to configure if you want to change anything:

If you select reject input, you can have a custom message pop up whenever an invalid choice is entered:

You might want to make your message more helpful than this one.

How to Use VLOOKUP 📊

VLOOKUP is an incredibly useful function. It takes four arguments:

=VLOOKUP(search_key, range, index, [is_sorted])

=VLOOKUP(itemSelect,pictureMatch,3,0)

We'll use itemSelect for our search_key and pictureMatch for the range because we want to find itemSelect in that range. Then the 3 for index gets the value in the third column in that range.

(It's 3 in our example because we merged the cells in columns B & C for our formatting, but VLOOKUP still counts both of them).

Finally, the zero sets is_sorted to FALSE. Our data is not sorted, and we want an exact match.

How to Use REGEXEXTRACT 💾

It happened: I found a real world use for Regular Expressions. 😳

This section of freeCodeCamp's Javascript certification was particularly confusing for me, and it was good to revisit a small portion of it here in the wild.

Because Google Drive is quirky, and we're sort of hacking a free option here, we need to alter the URLs to our images in order for the IMAGE function to work properly.

This Stack Overflow answer was helpful for me.

We need to build a URL by taking this:

https://drive.google.com/uc?export=download&id=###

and replacing the ### part at the end with the ID we extract with the REGEXEXTRACT function.

Looking at the URLs we copied over, we can see a pattern. Everything after the /d/ and then before the next / is the ID.

Here's an example of one of our image URLs: https://drive.google.com/file/d/1IaO08gj3GWIUQDAnzKEob62Gcl87ufuN/view?usp=sharing

You can see this at work by itself in B26 of the example spreadsheet as the function grabs everything between those two markers:

=REGEXEXTRACT(D9,".*/d/(.*)/")

This extracts everything between the /d/ and the /

How to Use the IMAGE Function 📷

Okay. We've got the disparate pieces figured out. I know the pieces fit. 🎵

Let's put them together.

All of our work was to get one cell ( B4 ) to provide data to the IMAGE function.

Image takes one argument and three other optional ones:

 IMAGE(url, [mode], [height], [width])

We build the URL by combining the required beginning of the URL which I've got in J17 using the ampersand (&) operator with our REGEXEXTRACT function. And within our REGEXEXTRACT function we use our VLOOKUP function to get the URL of whatever image we've selected in the itemSelect cell.

Whew.

But, cool, right!?

If you feel lost in a recursive nightmare, I encourage you to pull up the example spreadsheet and examine the parts of the function in F4 piece by piece. 👍

How to Format Your Sheet FTW 💯

These few details can turn up the volume 📣 on an otherwise mundane spreadsheet.

This is likely the only place you'll find a NIN gif in an article about spreadsheets today.

I love a hard drop shadow, and we can achieve this by manipulating the row and column sizes around a particular cell or range, using the merge cell option for our main range, and then using a fill color around the right side and bottom.

Click the lines between the column headers to drag and adjust the widths and heights of the columns and rows.

Cells are the main appeal of spreadsheets, but in some cases hiding the gridlines can make your sheet standout. I opted for this approach in this project.

Select View->Show->Gridlines.

As much as I appreciate Arial, I will typically opt out of the default font immediately.

Click the Font Dropdown in the Toolbar. It's usually smack dab in the middle:

And just choose whatever font you'd like.

There you have it!

Thanks for Reading! 🙏

Follow me on Twitter to see more content like this: https://twitter.com/EamonnCottrell

Thanks!

What is an SVG File?

Kolade Chris — Wed, 01 Jun 2022 16:05:04 +0000

SVG stands for scalable vector graphics. It's a web-friendly vector-based file format used to render two-dimensional images on the internet.

You can identify SVG files by their extension – .svg.

Unlike other popular image formats like PNG, JPEG, and JPG – which store image information in form of pixels because they are raster-based formats – SVGs store graphics information as a set of points and lines.

This means no matter how SVG files are reworked, zoomed, or resized, they don’t become blurred and pixelated like PNG, JPG, and other raster images.

This article will show you the possibilities of SVG image files and how you can make one for yourself by coding it.

How to Make an SVG File
- How to Make an SVG with Image Editing Programs
- How to Make an SVG with XML
What is an SVG File Used for?
How to Open an SVG File
How do I Convert an SVG File to an Image?
Conclusion

How to Make an SVG File

How to Make an SVG with Image Editing Programs

You can make an SVG file with image editing software like Adobe Illustrator, CorelDraw, Adobe Photoshop, Microsoft Visio, and GIMP.

With these programs, your creativity is your limit when it comes to the SVGs you can draw.

It depends on how knowledgeable and experienced you are with the programs.

In addition, if you create an illustration and drawings with Google Docs, you can export them to SVG.

How to Make an SVG with XML

If you don’t know how to use the image editing programs listed above but you can code, you can code up an SVG with XML.

To code an SVG, create a file with the .svg extension:

Step 1: Define your SVG opening and closing tags

<svg>
    
svg>

Step 2: Define the version and xmlns attributes inside the opening tag and set both to 1.1 and "http://www.w3.org/2000/svg" respectively.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

svg>

Step 3: Specify the shape you want to draw in a self-closing tag. For example, for rectangle.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect />
svg>

Step 4: Specify the width and height you want:

 width="200" height="100"

Step 5: Define the color with which you want to fill the shape with the fill attribute:

fill="#2ecc71"

The code now looks as shown in the snippet below:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" />
svg>

And at the end, this is what shows in the browser:

You can also define border-radius on the x and y axis with the rx and ry attributes:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="200" height="100" fill="#2ecc71" rx="4" ry="4" />
svg>

After drawing the SVG, you can then use it as the value for the source (src) of an image:

<img src="svgdraw.svg" alt="A rectangle made with SVG" />

If you want, you can embed the SVG straight into your HTML code:

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <rect width="200" height="100" fill="#2ecc71" />
    svg>
body>

What is an SVG File Used for?

Because SVG files remain the same for life, website icons and logos are usually made with them.

An excellent advantage of SVG is that the text in them can be read by search engines like Google, so SVG files are used for making infographics and illustrations.

How to Open an SVG File

Modern browsers like Google Chrome, Edge, Safari, and Firefox have built-in functionalities that make them open SVG files for you.

You can also open SVG files in specialized editing software you can use to make them. Again, examples are Adobe Illustrator, CorelDraw, Adobe Photoshop, Microsoft Visio, and GIMP.

If you want to edit SVG files, you can open them with a Code Editor like VS Code, Atom, and Sublime Text then make your edits.

How do I Convert an SVG File to an Image?

If you want to convert an SVG to other image formats like PNG, and JPG, you can use image editing programs like Adobe Photoshop.

You can also use an online tool called Convertio.

All you need to do is to upload your SVG, then select the format you want to convert it to.

Conclusion

There are a lot of reasons why you should be using SVG.

My favorite of all those reasons is that search engines can read the text on SVG files. This is because SVG files are written in pure XML – the markup language for transmitting digital data.

If Google and other search engines find relevant keywords in the SVG files, it can lead to a massive boost in SEO.

Thank you for reading.

How to Make an Image Search App in React using the Unsplash API

Ateev Duggal — Mon, 04 Apr 2022 22:19:13 +0000

Unsplash is a site where you can download free and unlicensed images and use them as you see fit.

In this tutorial, we will make an Image Search App using the Unsplash API to get access to its enormous collection of images and also download them.

Before starting the development part of our app, let’s see how it will look exactly.

Let’s start…

How to Create the React App
How to Build the UI of our App
How to Get the Access Key and API Endpoint from Unsplash
How to Use Hooks in our App
How to Display Images in our App
How to Handle Errors
Conclusion

What will we learn?

This project is mainly for beginners, but anyone who wants to brush up their skills can follow along. In this tutorial, you will learn:

How to get API endpoints and Access Keys from the Unsplash developer's dashboard.
How to use the useState and useEffect hooks to fetch data from the API.
How to use the map function to display images or any other data from the API.

How to Create the React App

It's very easy to create a React app – just go to your working directory in your preferred IDE and enter the following command in the terminal:

npx create-react-app image-search-app

If you are unsure how to properly set up a create-react-app project, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

How to Build the UI of our App

There will be two sections in the UI of our App:

The Input section
The Result section where we will show the images

In the input section, we have an input tag in which we will write the search term or query. We also have a button with an onClick event handler which will trigger the function responsible for fetching the data from the API.

import React from "react";
const App = () => {
  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-12 d-flex justify-content-center align-items-center input">
            <input
              className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
              type="text"
              placeholder="Search Anything..."
            />
            <button
              type="submit"
              onClick={Submit}
              className="btn bg-dark text-white fs-3 mx-3"
            >
              Search
            button>
          div>
        div>
      div>
    
  );
};
export default App;

The output will be the following:

In this article, we will not be discussing the styling part of the app. This way we can stay more focused on the React part which is more necessary to understand.

How to Get the Access Key and API Endpoint from Unsplash

Let's get those API keys from Unsplash for Developer. follow the steps given below to get your API key and other details:

First, go to the above link and click register as a developer.

Then fill in the credentials they have asked for:

After this, you will be directed to the developer dashboard. Click on the new project.

You will be asked to accept all the terms written there. Read them if you want or else just check all of them and click the button at the end to proceed.

Next, a modal form will appear as shown below in which you have to write the application information like name and description.

Then click Create Application.

Now that our application has been created, we can access the Access Key and Secret Key under the Keys section:

Notice that at the very beginning of this page, it says Demo. This means that our application has been accepted but is still in development mode.

In this mode, we can only make 50 requests per hour. If we exceed this limit, our API will not work and the images will not load.

After this, head over to the documentation and select the option “Search Photos by Keyword”.

Scroll down to the Response Section and copy the link as shown:

API endpoint

Now we have both our API key and the API endpoint. Let's proceed with our App.

How to Use Hooks in our App

We will be using the useState and useEffect hooks in our app. They'll let us set the states which are required to get the value of input and search the API for data regarding that value.

For hooks to work, we have to define them at the very top of our app like this:

import React, { useState, useEffect } from "react";

How to Set State Using the useState Hook

As we discussed above, we'll use hooks to extract data from the API using the value searched in the input field. That value will be read by our React app using the useState hook.

We define states using this hook for specific purposes. In this app, we will be defining two of them: one for getting the value from the input field and the other to display results fetched from the API.

const [img, setImg] = useState("");
const [res, setRes] = useState([]);

There are two parameters in the above code used to define the useState hook: one of them is the state which we will use to store values, and the other is the function that we will be using to update the state values. Read more about useState hook here.

We have defined the first state as an empty string as it will be used to store the input from the search bar (and that is also a string).

The other state is initialized as an empty array because it will store the data fetched from the API and then show it in our Result Section

By default, we can only get up to 10 data points per API, but we can exceed that using a parameter per_page which we will see later in this tutorial.

How to use the img state

The next step is to store the value of the input text field into the img state using the value attribute of the input tag. Then we add an onChange() event handler to it. This onChange() event handler will have a function that will be used to update the state using the e.target.value.

<input
  className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
  type="text"
  placeholder="Search Anything..."
  value={img}
  onChange={(e) => setImg(e.target.value)}
/>;

How to Make API Requests to Unsplash using the useEffect Hook

We will now use the Unsplash API and the Access key we have acquired in the above step to fetch data and display it in our app.

For this, we will again need a state to store the data fetched from the API which we have already defined in the above section (res, which is initialized as an empty array for this purpose only).

There are many methods in JavaScript we can use to fetch data from an API, but we will be using the async-await method – it's by far the simplest one.

const fetchRequest = async () => {
  const data = await fetch(
    `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}`
  );
  const dataJ = await data.json();
  const result = dataJ.results;
  console.log(result);
  setRes(result);
};
useEffect(() => {
  fetchRequest();
}, []);

Notice that we have written ${Access_Key} – here we have to write our access key. We complete this step to secure our API key as anyone can misuse it.

In Unsplash, we can also apply for the production of our app, and by doing so we can go online with the images that Unsplash has to offer.

For this reason, everyone gets a different set of Access Keys and Security Keys. It's always best to hide these keys from others so that it doesn’t get misused and we pay the price for that.

In the above code, we have initially stored the data fetched from the API into the data variable which is then converted into JSON for simplicity's sake. This lets us read the data and extract the necessary values, which are stored in the dataJ variable and consoled to check if we are getting the value we need or not.

API in JSON format

And if we open any one of the above search results to see what values are there for us to extract:

{
    "total": 133,
    "total_pages": 7,
    "results": [
    {
    "id": "eOLpJytrbsQ",
    "created_at": "2014-11-18T14:35:36-05:00",
    width: 4000,
    height: 3000,
    color: "#A7A2A1",
    blur_hash: "LaLXMa9Fx[D%~q%MtQM|kDRjtRIU",
    likes: 286,
    liked_by_user: false,
    description: "A man drinking a coffee.",
    user: {
    id: "Ul0QVz12Goo",
    username: "ugmonk",
    name: "Jeff Sheldon",
    first_name: "Jeff",
    last_name: "Sheldon",
    instagram_username: "instantgrammer",
    twitter_username: "ugmonk",
    portfolio_url: "http://ugmonk.com/",
    profile_image: {
    small:
    "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",
    medium:
    "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",
    large:
    "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202",
    },
    links: {
    self: "https://api.unsplash.com/users/ugmonk",
    html: "http://unsplash.com/@ugmonk",
    photos: "https://api.unsplash.com/users/ugmonk/photos",
    likes: "https://api.unsplash.com/users/ugmonk/likes",
    },
    },
    current_user_collections: [],
    urls: {
    raw: "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
    full: "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
    regular:
    "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
    small:
    "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
    thumb:
    "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef",
    },
    links: {
    self: "https://api.unsplash.com/photos/eOLpJytrbsQ",
    html: "http://unsplash.com/photos/eOLpJytrbsQ",
    download: "http://unsplash.com/photos/eOLpJytrbsQ/download",
    },
    },
    // more photos ...
    ],
    },

It's better to use this function inside the useEffect hook as it will prevent any re-rendering of the data if we made any changes in the UI of our App. To understand useEffect in-depth, click here.

We use the setRes function to update the value of res from an empty array to an array which will store all the fetched data in the JSON format as shown above.

We have already given an onClick function to the button at the beginning of our app in the input section. Now it's time to define a function for this event handler which will be triggered as soon as the Search button is clicked. This function will call the fetchRequest function which will fetch the data and show us the result in the Result section.

const Submit = () => {
  fetchRequest();
  setImg("");
};

How to Display Images in our App

In the above section, we have stored the data fetched from the API into the res state which has stored them in the form of an array. To get these values from there, we have to use the map method.

<div className="col-12 d-flex justify-content-evenly flex-wrap">
  {res.map((val) => {
    return (
      <>
        <img
          className="col-3 img-fluid img-thumbnail"
          src={val.urls.small}
          alt="val.alt_description"
        />
      
    );
  })}
div>;

If we go back and see the response in JSON, we will find a different kind of information: URLs which contains the path to the image. So here val.urls.small is the actual path to the image, and val.alt_description is the alt description of the picture.

There are different fields inside "urls" that give different data, such as:

Raw: Actual raw image that was taken by a user.
Full: Raw image in .jpg format.
Regular: Best for practical uses, width=1080px.
Small: Perfect for slow internet speed, width=400px.
Thumb: Thumbnail version of the image, width=200px.

In this article, we will be using small, but there are others too as shown above that we can play with and find the appropriate one for us.

Final Product

By default, the number of items that can be fetched at a time is 10, but this number can be increased or decreased depending upon how many images we want our app to show.

To do this we just have to add a parameter at the end of our API call (per_page) as shown in the code, and put it equal to the number of images we want to show.

const fetchRequest = async () => {
  const data = await fetch(
    `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}&per_page=20`
  );
  const dataJ = await data.json();
  const result = dataJ.results;
  console.log(result);
  setRes(result);
};

There are many more parameters that Unsplash has to offer. Below is a list of a few of them:

parameters of Unsplash API

How to Handle Errors

If we do a quick search now on, say, flags, we will get our images. But there are still some issues that need to be fixed. One of them is the error we are receiving in the console.

Error in Console

To fix this, pass a unique key to every child using the id of the image. This key prop explicitly tells React the identity of each child in a list. This also prevents children from losing state between renders.

<div className="col-12 d-flex justify-content-evenly flex-wrap">
  {res.map((val) => {
    return (
      <>
        <img
          key={val.id}
          className="col-3 img-fluid img-thumbnail"
          src={val.urls.small}
          alt="val.alt_description"
        />
      
    );
  })}
div>;

Conclusion

In this tutorial, we have developed a Photo Search app in React using the Unsplash API. While building our app, we discussed many things like how to use React Hooks to get the data from an API and use it to display images in our App.

There is much more you can do with this application to extend it. For example, we could add a Random button to display random images, create a checkbox to toggle between searching for photos or the users that posted them according to the user’s preference, add an infinite scroll to display more images, and more.

You can go through some of my other beginner-friendly, project-based articles here:

HTML – Image Tag Tutorial

Kolade Chris — Wed, 11 Aug 2021 15:28:58 +0000

In HTML, you use the tag to add images to websites. It is an inline and empty element, which means that it doesn't start on a new line and doesn't take a closing tag (unlike the paragraph (

) tag, for instance).

The tag takes several attributes, of which src, height, width, and alt are the most important.

Knowing the ins and outs along with some best practices of the tag is crucial because images can negatively affect your site's load time and SEO.

So in this tutorial, we will take a look at how to add images to websites using the tag, how to use its attributes, some best practices, and modern approaches to using .

Basic HTML Tag Syntax

Here's the basic syntax for adding an tag to your HTML:

<img 
    src="assets/images/ring-tailed-lemurs.webp" 
    alt="A Group of Ring-tailed Lemurs" 
/>

Now let's talk about its attributes and how they work.

HTML Tag Attributes

The `src` Attribute

The src attribute signifies the image source. Without it, the tag itself wouldn't be functional in the real world.

It indicates to the browser where to find the image. So it takes a relative path if the image is hosted locally, or an absolute URL if the image is hosted online.

The `alt` Attribute

The alt attribute specifies an alternative text for the image. This could be the text that shows during a network failure, for example. Or it could display something when the image source is wrongly specified, so users know what the image is about.

In the code snippet below, the image source is wrongly specified, showing you the role that the alt attribute plays:

<img
     src="assets/images/ring-tailed-lemur.webp"
     alt="A Group of Ring-tailed Lemurs"
/>

This is the CSS that centers the image horizontally and vertically:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height: 100vh;
  }

And it looks like this:

The alt attribute is very important for 2 other reasons:

SEO: it indicates to web crawlers what the image is about
Accessibility: it helps screen readers know what the image is about so they can report that to visually impaired people. In addition, it lets users with low bandwidth know what the image is about.

The `width` and `height` Attributes

You can use these attributes to specify a certain width and height for your images. With these attributes, you can resize the image down or up.

Ideally, though, you shouldn't resize an image with these attributes. We'll touch on this more under best practices.

HTML Tag Best Practices

Do not resize an image with the width and height attributes.

This is a bad practice because it can make the image appear distorted and can affect the quality.

Instead, you can optimize the image to your desired dimensions with photo editing software such as Photoshop.

In the code snippet below, I specify a width and height for the image – a bad practice:

<img
      src="assets/images/ring-tailed-lemurs.webp"
      height="440px"
      width="440px"
      alt="A Group of Ring-tailed Lemurs"
/>

The image looks like this:

Without using the width and height attributes, the image looks like this:

Looks better? Yes!

Name Your Images Appropriately

Naming images appropriately can help search engines understand what the image is about. For example, name an image ring-tailed-lemurs.webp instead of photo-1580855733764-084b90737008.webp. The latter is not enough for search engine optimization (SEO).

Reduce Image File Size

The image's file size is crucial when it comes to page speed. A smaller image size (that preserves the image's quality) reduces load time while larger images take forever to load.

There are several tools and various software that can help you do this. Some examples are imageOptim, jStrip, and PNGGauntet. And if you're concerned about SEO, you'll want to look into these – as page speed is an important ranking factor.

Host Images with a CDN

Imagine if a website is hosted in the United States but a user in Africa wants to accessed it. Assets such as images and icons would have to travel from The States to Africa, which in turn slows download time.

Using a CDN (Content Delivery Network) will allow the website's images to be cached across several locations around the world. The CDN can then serve them from locations closest to the user, improving load time and providing a better user experience.

Cloudflare is a popular CDN that a lot of developers use to host their images.

Use Descriptive Alternative Text

Using descriptive alternative text helps search engines understand what the image is about. But it doesn't end there – the alt text must also be relevant to the image.

For example, use this:

<img
   src="assets/images/ring-tailed-lemurs.webp"
   alt="A Group of Ring-tailed Lemurs"
/>

Insead of this:

<img src="assets/images/ring-tailed-lemurs.webp" alt="Lemurs" />

Use the `title` Attribute to Show Tooltips

Just like the alt attribute, you can use the title attribute to show additional information about the image. Browsers display this as a tooltip when the user hovers over the image.

<img
    src="assets/images/ring-tailed-lemurs.webp"
    alt="A Group of Ring-tailed Lemurs"
    title="Ring-tailed lemurs are led by females"
/>

Tag Modern Approaches

There are various ways you can use the tag that are a bit more up to date and modern. Let's look at some of them now.

Lazy Load Images

Lazy loading is a newish "load what is needed" concept. With lazy loading, the image is loaded only when the user scrolls to its viewport.

This is in contrast to eager loading, which loads every image immediately after the page is rendered by the browser.

To apply lazy loading, add the loading attribute to the tag and set the value to “lazy”.

<img
      src="assets/images/ring-tailed-lemurs.webp"
      alt="A Group of Ring-tailed Lemurs"
      title="Ring-tailed lemurs are led by females"
      loading="lazy"
/>

Images are often quite high quality and large these days, but this can negatively impact user experience and SEO – hence the introduction of lazy loading.

Use the
and
Tags

Often, you might need to specify to the user the caption of an image. A lot of developers do this by placing a

tag right after the .

This might not be wrong, but it defies best practices and does not associate the caption with the image, so search engines won’t understand what it is.

<img
      src="assets/images/ring-tailed-lemurs.webp"
      alt="A Group of Ring-tailed Lemurs"
      title="Ring-tailed lemurs are led by females"
      loading="lazy"
/>
<p>Ring-tailed lemurs are social animalsp>

Its is clear that there is no association between the image and the caption in the above example.

HTML5 introduced the

and

elements to help with this. You wrap the tag inside a

element, and you specify a caption within the

element.

This helps search engines associate the caption with the image, leading to better performance and SEO.

The snippets of code below and the screenshots show you an image with and without the

and

elements:

<figure>
   <img
     src="assets/images/ring-tailed-lemurs.webp"
     alt="A Group of Ring-tailed Lemurs"
     title="Ring-tailed lemurs are led by females"
     loading="lazy"
   />
<figcaption>Ring-tailed lemures are social animalsfigcaption>
figure>

You can see now that the image and the caption are beautifully associated.

Use the .webP Image Format

.webP is an image format created by Google. According to the creator, it's an image format lower in size than its counterparts - JPG, JPEG, PNG, but with the same quality.

This format has been getting more and more widely accepted and is considered the nextgen image format for the web.

Conclusion

I hope this article helps you understand how the tag works in HTML so you can use it properly in your projects. If you do so, it'll help improve your user experience and SEO.

Thanks a lot for reading, and keep coding.

How to Reverse Image Search on Your Phone or Desktop – Free Image Lookup Tools

freeCodeCamp — Fri, 18 Dec 2020 22:01:44 +0000

By Adam Naor

Over the past two years, mobile searches for “image search” have grown by over 60% according to Google.

That is because image search allows users to visualize any given keyword from thousands of images from around the internet.

Perhaps you have seen images from online photo editors, a landscape painting, or a cool product release that catches your eye and you want to learn more.

Image search is the answer.

Reverse image search allows you to do work backwards and gain new insights from the image itself. I will detail how reverse image search works across multiple platforms so you will be well prepared to harness this technology going forward.

What Is a Reverse Image Search?

This technology enables you to Google the origins of any photograph, artwork, graph, or photo. By reverse image searching, you can find the image on all the pages on which it was featured - even if the image is a different aspect ratio or file size.

You can also find links to image search results of similar images. In addition, image search offers your query possible related searches.

You can start a reverse search image on your phone or desktop through Google, Bing, or any similar tool. I will walk you through the exact steps now.

How to Reverse Image Search on Desktop

You have a few options for image search depending on your preferences, operating system, and device.

Reverse Image Search With a Desktop Browser

To perform this version of an image search, follow these steps:

Start by going to images.google.com.
Next, click on the camera icon which will allow you to choose from two options.
First, you can paste the URL of an image from another page.
The second option is to upload the image itself.

Then, simply click ‘enter’ on your keyword or the ‘search by image’ button to get results.

Reverse Image Search with Google Chrome Desktop Browser

If you are already using Google Chrome, then you can shortcut the process significantly. When stumbling upon an image on any page online on Chrome, you can carry out a reverse image search by following these steps:

Right-click on the image you would like to find out more about.
Choose ‘Search Google for Image’ from the drop-down menu.

This straightforward method will display your search results instantly.

Image search is very powerful. Here is one example. I recently saw this photo and was intrigued. I wanted to learn more.

So I uploaded it to Google and was told that the photo featured Sineenat Wongvajirapakdi, a Thai nurse, army officer, and member of the Thai royal court.

Without image search I never could have found that information out.

Reverse Image Search Using Microsoft Bing

Since Bing has over 10% market share worldwide, it is safe to say there is a whole audience of builders and developers using it. So I wanted to include steps for this search engine too.

Bing’s visual search is slightly different from Google’s. This is because it detects shopping intents, for example, and provides search results that contain other similar products with their pricing information.

Here is how to conduct a reverse image search on Microsoft Bing:

Open Microsoft Bing through a browser or the application.

Click the camera-shaped icon in the search bar.

The pop-up menu will give you four options to search with a picture instead of text. Let’s explore the options:
First, drag one or more images to the search box from your computer.
Second, browse your computer for the image you would like to search for.
You can also paste the URL of the image from an online page that you were previously browsing.
The final option is to take a photo and search for more information on it. Whether it is a product or a location, you can find out more.

Finally, browse the visual search results at your leisure.

How to Reverse Image Search on Your Phone

It can be slightly more challenging to do a reverse image search on your phone. You have multiple options, but they require a few more steps. Let’s walk through them together.

Reverse Image Search Using the Google Chrome App

Unfortunately, the Google Chrome application itself does not support reverse image search on Mobile. But you can still do it through a smart workaround, which I will share with you. Here is how to do it:

Open Google Chrome and type in ‘images.google.com’.
Tap the three-dots menu on the top right of your screen.
Pick ‘Desktop Site’ from the drop-down menu.
Click on the camera-shaped button in the search bar and insert your image in either method that suits you.

Reverse Image Search Using Any Browser App

Have you found an image that you would like to know more about on the spot while you were browsing? How do you reverse image search that exact photo? Here are the steps:

Keep a long press on the image you would like to search.

From the drop-down menu, select ‘Search Google for this image’.

There is nothing left to do but browse the search results for more information.

Reverse Image Search Using the Google Lens App

Google Lens is an application that allows users to search by image in multiple ways. From scanning and translating texts to searching for fashion items in different online stores, this application fulfills any search by image scenario you can think of.

Let’s see how it works:

Download and launch the Google Lens application.
Choose the action you need for the image you will be searching for. Here are your options:
Translate: this feature allows you to translate any text on any image immediately through auto-detect. You can choose the language the text is in or the language you would like it to translate to.
Text: this instant copier can copy any text on your image for you to paste anywhere you would like.

Search: this button pretty much does the standard Google image search on whatever item or photo you are looking for.

Shopping: this allows you to know more about a certain product in the image or even through its barcode.
Dining: this fun feature lets you find out more about a dish or translate a restaurant’s menu.

You will have two options for uploading the image:

Take a photo of something in front of you that you would like to search for on the spot.
Or upload a photo from your phone that includes what you would like to know more about.

Reverse Image Search Using Pinterest Lens

Pinterest is one of the most popular applications in the world. Its search by image feature under the name ‘Pinterest Lens’ has revolutionized the digital shopping world.

By following these steps, you can find, save, or shop for any item in an image you love:

Launch the Pinterest app on your phone.
Click on the search button in the menu at the bottom of your screen.

Tap the camera-shaped button in the search bar at the top of the screen.
You will have two options to pick your image:
Take a photo with your mobile’s camera and begin your search.
Or upload an image from your gallery.

Bringing It All Together

This article has covered some fun, easy, and powerful tips for perfecting a reverse image search on your phone or desktop.

Reverse image search is enriching for learning, exploration, and the curious builder.

Not only do consumers benefit from this technology, but companies do too as they build out and scale their products. If you think reverse image search is just for fun and consumers, let me help you see the commercial potential.

Customer service software is increasingly using reverse image search to help agents resolve customer support tickets. The same is true for technology agencies as they look for products to purchase to help their clients.

A friend of mine built a company that made visual recognition software for maintenance and repair supplies. How did that company end up? Well, it was acquired by Google.

How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

freeCodeCamp — Mon, 16 Nov 2020 22:44:20 +0000

By Edidiong Asikpo

SVG stands for Scalable Vector Graphics. It is a unique type of image format for vector-based graphics written in Extensible Markup Language (XML).

In this tutorial, I will explain why you'd want to use SVG images and how you can use them in CSS and HTML.

Why Should You Use SVG Images?

There are a number of reasons to use SVG images, some of which are:

SVG images do not lose their quality when zoomed or resized.
They can be created and edited with an IDE or text editor.
They are accessible and animatable.
They have a small file size and are highly scalable.
And they can be searched, indexed, scripted, and compressed.

Now let's see how you can actually work with SVG images.

How to Download the SVG Image Used in This Tutorial

If you want to work with the SVG image I've used in this tutorial, follow the steps (and diagram) below to download it.

Go to unDraw.
Change the background color to yellow.
In the search box, search for the word happy.

Click on the image named Happy news.
On the pop-up window, click on the Download SVG to your projects button.

If you followed the steps above correctly, the SVG image should be on your computer now.

Now, open the SVG image in your favorite IDE or text editor. Rename it to happy.svg or whatever name you prefer.

How to Use SVG Images in CSS and HTML

There are several different ways to use SVG images in CSS and HTML. We will explore six different methods in this tutorial.

1. How to use an SVG as an

This method is the simplest way to add SVG images to a webpage. To use this method, add the element to your HTML document and reference it in the src attribute, like this:

<img src = "happy.svg" alt="My Happy SVG"/>

Assuming you downloaded the SVG image from unDraw and renamed it to happy.svg, you can go ahead and add the code snippet above into your HTML document.

If you did everything correctly, your webpage should look exactly like the demo below. 👀

When you add an SVG image using the tag without specifying the size, it assumes the size of the original SVG file.

For instance, in the demo above, I didn't modify the size of the SVG image, so it assumed its original size (which was a width of 915.11162px and a height of 600.53015px ).

Note: to change the original size, you have to specify the width and height with CSS as you can see in the demo below. You can also update the original width and height directly.

Even though we can change the size of SVG images added via the tag, there are still some restrictions if you want to make major style changes to the SVG image.

2. How to use SVG as a CSS `background-image`

This is similar to adding SVG to an HTML document using the tag. But this time we do it with CSS instead of HTML as you can see in the code snippet below.

body {
  background-image: url(happy.svg);
}

When you use an SVG as a CSS background image, it has similar limitations to using . Still, it allows a bit more customization.

Check out the demo below and feel free to make modifications to it using CSS.

3. How to use inline SVG images

SVG images can be written directly into the HTML document using the tag.

To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the element in your HTML document.


 // Paste the SVG code here.

If you did everything correctly, your webpage should look exactly like the demo below.

When you use SVG inline in the HTML document, it reduces load time because it serves as an HTTP request.

Using this method lets you perform more customization as opposed to using either the or background-image methods.

4. How to use an SVG as an

You can also use an HTML element to add SVG images to a webpage using the code syntax below:

"happy.svg" width="300" height="300">

You use the data attribute to specify the URL of the resource that you'll use by the object, which is the SVG image in our case.

You use the width and height to specify the size of the SVG image.

Again, below is a demo for you to explore. 😃

Using the is supported across all browsers that support SVG.

5. How to use SVG as an

Even though this isn't advisable, you can also add an SVG image using an as seen in the demo below.

Just keep in mind, though, that s can be difficult to maintain and will be bad for your site's Search Engine Optimization (SEO).

Using also defeats the purpose of the Scalable in the name Scalable Vector Graphics because SVG images added with this format are not scalable.

6. How to use SVG as an

The HTML element is another way to use an SVG image in HTML and CSS using this syntax: .

Keep in mind, however, that this method has limitations, too. According to MDN, most modern browsers have deprecated and removed support for browser plug-ins. This means that relying upon is generally not wise if you want your site to be operable on the average user's browser.

Below is a demo of using the HTML element to add an SVG image.

Conclusion

I hope you were able to learn about the different ways of using SVG images in CSS and HTML. This will hopefully guide you towards choosing the right method when adding SVG images to a website.

If you have any questions, you can send me a message on Twitter, and I'll be happy to answer every single one.

How to Build an Image Gallery with NextJS using the Pexels API and Chakra UI

Ashutosh K Singh — Mon, 16 Nov 2020 14:55:07 +0000

In this article, we will build an Image Gallery with Next.js using the Pexels API and Chakra UI v1, a modular and accessible component library.

We will also use the Next.js Image component to optimize the images fetched from the Pexels API.

If you want to jump right into the code, check out the GitHub Repo here.

And here's a link to the deployed version: https://next-image-gallery.vercel.app/.

What concepts & topics will we cover in this article?

How to install and use Chakra UI v1 with Next.js
How to fetch data in Next.js from an API
How to use the Next.js Image Component
How to setup Dynamic Routes in Next.js

Prerequisites
How to Setup and Install Next.js
How to Generate the Pexels API Key
How to Add a Heading to the Gallery
How to Fetch Data from the Pexels API
How to Display Photos on the Page
How to Style Images with Chakra UI
How to Add Search Functionality to the Gallery
How to Add Dynamic Routes to Images
Conclusion

Now let's get started.

Prerequisites

Before we get started, you should have:

Knowledge of HTML, CSS, and JavaScript.
Basic knowledge of React and Next.js.
Node and NPM installed on your local dev machine.
Any code editor of your choice.
React Dev Tools (optional)

If you feel like your progress is hindered because you don't know enough about these subjects, check out https://www.freecodecamp.org/learn. The awesome modules there will get you started in no time.

How to Setup and Install Next.js

We will use Create Next App to initialize a Next.js project quickly. In your project's root directory, run the following commands in the terminal.

npx create-next-app next-image-gallery
cd next-image-gallery
npm run dev

The last command, npm run dev, will start the development server on your system's port 3000.

Navigate to http://localhost:3000 in the browser. Here is what your app will look like.

Welcome to Next.js - http://localhost:3000

Run the following command to install Chakra UI:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons

The next step is to clean the sample code generated by create-next-app and configure the project to use Chakra UI.

Delete the styles and pages/api folder.
Update your pages/_app.js like this:

// pages/_app.js
import { ChakraProvider } from "@chakra-ui/react";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    ChakraProvider>
  );
}

export default MyApp;

Modify pages/index.js like this:

// pages/index.js
import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title> NextJS Image Gallerytitle>
        <link rel="icon" href="/favicon.ico" />
      Head>
    div>
  );
}

Again head over to http://localhost:3000. You will see that the app is blank, but the title has changed to NextJS Image Gallery.

You can now close the development server.

How to Generate the Pexels API Key

We will use the Pexels API to fetch images for our Gallery. You will need to create a Pexels API key to authenticate your API requests. The API itself is completely free to use.

You can make as many as 200 requests per hour and 20,000 requests per month to the Pexels API.

Head over to https://www.pexels.com/join-consumer/ and create a new account on Pexels.

Create New Account

After filling in your details, you will also need to confirm your account before applying for an API key. So check your inbox and confirm your Pexels account.

Navigate to https://www.pexels.com/api/new/ and fill in the details for a new API key and click Request API Key

Request API Key

Remember to follow the API guidelines. Now copy the API key shown on the next page.

API Key

In your project's root directory, create a new file named .env.local to store this API key securely. Run the following commands to create the file:

touch .env.local

Inside this .env.local file, create a new environment variable named PEXELS_API_KEY and paste the API key there.

NEXT_PUBLIC_PEXELS_API_KEY = ''

Next.js has built-in support for loading environment variables from .env.local into process.env.

By default, all environment variables loaded through .env.local are only available in the Node.js environment. This means that they won't be exposed to the browser. Using the NEXT_PUBLIC_ prefix exposes the environment variable to the browser.

You can read more about it here.

How to Add a Heading to the Gallery

In this section, we will add a heading to our Gallery.

Import and add the Box component to index.js like this:

//pages/index.js
import Head from "next/head";
import { Box } from "@chakra-ui/react";
export default function Home() {
  return (
    <div>
      <Head>
        <title> NextJS Image Gallerytitle>
        <link rel="icon" href="/favicon.ico" />
      Head>
      <Box overflow="hidden" bg="purple.100" minH="100vh">Box>
    div>
  );
}

Navigate to http://localhost:3000. You will see that your app has a background color of light purple.

Blank Page with light Purple background

Here's what we are doing:

In Chakra UI, bg is the shorthand prop for background property. By passing bg="purple.100", the background of the app changes to light purple. The number after the color represents the shade of the color where the lightest is 50, and the darkest is 900.
Here is an image from the Chakra UI docs to better illustrate this point.

Shades of Purple

Setting minH="100vh" makes the app at least 100% of the parent's element height. minH is the shorthand prop for the min-height property.
To get rid of extra scroll bars in case the content overflows the parent element, overflow="hidden" is passed.

To add a heading, we will use the Text and Container component available in Chakra UI.

Modify the Box import in index.js like this:

import { Box, Container, Text } from "@chakra-ui/react";

Now, add the Container component inside the Box component.

"hidden" bg="purple.100" minH="100vh">
  <Container>Container>

You will see no change in your app, but the Container component has added some horizontal padding in your app, which will be more apparent after adding the Text component.

Add the following code inside the Container component:


  <Text
    color="pink.800"
    fontWeight="semibold"
    mb="1rem"
    textAlign="center"
    textDecoration="underline"
    fontSize={["4xl", "4xl", "5xl", "5xl"]}
  >
    NextJS Image Gallery
  Text>

Let's break down the above code and discuss it.

color is used to set the color of the text to pink.900.
fontWeight is used to set the thickness of the character.
mb is a shorthand prop for margin-bottom and 1rem=16px.
textAlign="center" aligns the text in the center.
textDecoration="underline" adds a line under the text.
fontSize, as the name suggests, sets the size of the text.

Here is how your app will look:

Heading - NextJS Image Gallery

xs: "12px"
sm: "14px"
md: "16px"
lg: "18px"
xl: "20px"

You might ask why there are four values of fontSize as an array inside curly braces?

The {} are used to tell the JSX parser to interpret the expression within {} as JavaScript. Here, {} is used to pass an array for fontSize's value. This array is a shorthand for media queries in Chakra UI.

The values are passed in an array to make the text responsive and change the font size according to the devices – that is, the heading will be larger on the desktop.

Each index of the array corresponds to a specific breakpoint and the property's value. This means that font-size changes according to the breakpoint. You can read more about it here.

const breakpoints = {
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
}

It follows the "mobile-first" approach, so the first value is for smaller devices, and the last value is for desktop devices.

The above code will generate CSS like this:

.css-px6f4t {
 text-align:center;
 -webkit-text-decoration:underline;
 text-decoration:underline;
 font-size:2.25rem;
 color:#702459;
 font-weight:600;
 margin-bottom:1rem;
}
@media screen and (min-width:30em) {
 .css-px6f4t {
  font-size:2.25rem;
 }
}
@media screen and (min-width:48em) {
 .css-px6f4t {
  font-size:3rem;
 }
}
@media screen and (min-width:62em) {
 .css-px6f4t {
  font-size:3rem;
 }
}

Here is the side by side difference in heading size as seen in Polypane.

Polypane

How to Fetch Data from the Pexels API

You have generated the API key so let's write the code to fetch data from the API. We will create a separate file and define the functions to fetch data inside it.

In your project's root directory, create a folder named lib. Inside it, create a file named api.js.

Run the following command in the terminal:

mkdir lib
cd lib
touch api.js

This is the Pexels API base URL for photos: https://api.pexels.com/v1/.

The Pexels API has three endpoints:

/curated to receive real-time photos curated by the Pexels team.
/search to search for photos based on a query.
/photos/:id to get a single photo from its id.

We will use the /curated endpoint to show photos curated by the Pexels team on the app's landing page.

Add the following code to api.js:

const API_KEY = process.env.NEXT_PUBLIC_PEXELS_API_KEY;

export const getCuratedPhotos = async () => {
  const res = await fetch(
    `https://api.pexels.com/v1/curated?page=11&per_page=18`,
    {
      headers: {
        Authorization: API_KEY,
      },
    }
  );
  const responseJson = await res.json();
  return responseJson.photos;
};

Let's discuss the above code:

We start by creating a variable named API_KEY that accesses the NEXT_PUBLIC_PEXELS_API_KEY environment variable using process.env.
Then we create an asynchronous function named getCuratedPhotos() that uses the fetch() method to fetch the data from the API.
If you take a closer look at the fetch URL, you will notice that we have added ?page=11&per_page=18 after /curated endpoint. These are the optional parameters that you can pass to the /curated endpoint as query strings. Here page=11 means send the 11th page, and per_page=18 means that send 18 photos per page.
You can also remove these optional parameters, in which case the API endpoint will send you 15 pictures from the first page. You can get as many as 80 photos in a single request.
The Pexels API key is passed in the Authorization field under the headers.
res.json() parses the response in JSON format.
responseJson contains fields like the page, per_page, and so on, which are not used by our app. So only the photos field of the response is returned, which looks like this:

[
  {
    id: 4905078,
    width: 7952,
    height: 5304,
    url: "https://www.pexels.com/photo/ocean-waves-under-blue-sky-4905078/",
    photographer: "Nick Bondarev",
    photographer_url: "https://www.pexels.com/@nick-bondarev",
    photographer_id: 2766954,
    src: {
      original:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg",
      large2x:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      large:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
      medium:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=350",
      small:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=130",
      portrait:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
      landscape:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
      tiny:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280",
    },
    liked: false,
  },
];

In the src field we are given many different image formats to choose from. In this tutorial we will use portrait type images on our landing page. You are free to explore other formats too.

As we develop our app, we will write the functions to search for a photo and get a single photo in api.js. For now, we will use this function to display an image on our landing page or homepage.

How to Display Photos on the Page

Now that we have created the function to fetch data, let's display them on our page.

First, import the getCuratedPhotos() function in index.js.

import Head from "next/head";
import { Box, Container, Text } from "@chakra-ui/react";
import {getCuratedPhotos} from "../lib/api"

We will use the getServerSideProps() function available in Next.js and use the getCuratedPhotos() function inside it to fetch data from Pexels API and inject it in our page. You can read more about getServerSideProps() here.

Add the following code at the bottom of your index.js file:

export async function getServerSideProps() {
  const data = await getCuratedPhotos();
  return {
    props: {
      data,
    },
  };
}

The above async function uses getCuratedPhotos() to fetch images from the Pexels API and store it in the data variable. This data variable is made available as a prop in the props property.

This data is available as a prop so add it as an argument in the Home component function.

export default function Home({data}) {
...
}

Restart your development server, and inside your Home component, console.log this data:

export default function Home({data}) {
  console.log(data)
  return (
 ...
 }

Head over to http://localhost:3000/ and open the console by pressing CTRL + Shift + J in Chrome or CTRL + Shift + K in Firefox.

console.log(data)

Remove the console.log and add the following code to the top of your index.js file to import the useState() hook from react.

import React, { useState } from "react";

We will store the data from the Pexels API inside a state named photos. Add the following code before the return statement:

const [photos, setPhotos] = useState(data);

To display images, map over the photos array and pass src.original in the src attribute of the img element.

Add the following code after the Container component:

{
  photos.map((pic) => (
    <img src={pic.src.original} width="500" height="500" />
  ))
}

Your app will now look something like this:

Displaying images using img element

Aside from the fact that the images are not properly sized, there is another issue with us using to display the images.

Head over to http://localhost:3000/ and open Developer tools and then the Network tab ( Ctrl+ Shift + E in Firefox and Ctrl + Shift + J in Chrome). It will look something like this:

Network tab

Now reload your page. You will see that the empty Network tab is now filled with data.

Single request

As you can see in the above image, the requested file is sized over 11 MB, and this is for a single file or image. The sizes can vary anywhere from 10 to 100 MB or more based on the quality of the image.

Imagine you have 80 images on your app's landing page. Does it make sense to transfer around 800 MB of files every time someone visits your Gallery or website? It does not.

Multiple requests

This is why today, most of the images on the web are served in WebP format. This format significantly reduces the size of the image, and you can hardly detect any visual difference.

So, we need to change the image format to webp, but the question is, how? Do you need to do it manually? If yes, won't it be time consuming and tiresome?

No, you don't need to do it manually.

Next.js version 10 comes with built-in support for Image Optimization using the Image component. You can read more about this update here.

So, let's replace the img element with the Next.js Image component. First, import this component inside your index.js like this:

import Image from "next/image";

But wait, before we use this component in our code, we need to tell Next.js that our images are coming from an external resource, like from Pexels.

Stop your development server and create a next.config.js file by running the following command:

touch next.config.js

Add the following code to next.config.js:

module.exports = {
  images: {
    domains: ["images.pexels.com"],
  },
};

And that's it. There are other configurations like path, imageSizes, deviceSizes, and so on that you can add in the images field. But in this tutorial, we will leave them as default. You can read more about the configuration here.

Replace img with the Image component and pass the props, as shown below:

{
  photos.map((pic) => (
    <Image
      src={pic.src.portrait}
      height={600}
      width={400}
      alt={pic.url}
    />
  ))
}

As discussed above, the Pexels API provides different formats or sizes of the same image, like portrait, landscape, tiny, and so on, under the src field.

This tutorial uses the portrait images on the landing page, but you are free to explore other sizes.

src: {
    original: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg",
    large2x: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    large: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
    medium: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=350",
    small: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=130",
    portrait: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
    landscape: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
    tiny: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280",
  }

As you can see in the above sample src field, the portrait format of the image has a width of 800 and a height of 1200. But it is too large to show on the webpage, so we will scale it down by dividing it by 2. So 600 and 400 are passed in for the height and width of the Image component.

Restart your development server and head over to http://localhost:3000/. You will see that the app itself looks exactly the same. But this time if you open the Network tab and reload the page, you will see something truly magical.

Your images are now in webp format, and their sizes have been reduced.

Network tab

The Next.js Image component has also added lazy loading to images. Here is an example to explain how and why you should use lazy loading if you are unfamiliar with it.

Even though the images are now in webp format, is it necessary to load all the images whenever someone visits your website? And if the visitor just comes and leaves without scrolling, does it make sense to load the images at the bottom of the page?

There is no need to load the images that a user or visitor is not going to see in most situations.

And that's where Lazy Loading comes to save the day. It delays the requests to images as to when they are needed or, in this situation, when images come into view. This significantly helps reduce the initial page weight and increases website performance.

If you head over to http://localhost:3000/ and scroll through all the images, you will see that the images that are not in the viewport are not loaded initially. But as you scroll down, they are transferred and loaded.

Lazy Loading

By default, the layout prop of the Image component has the value of intrinsic, which means the image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports.

There are many props that you can pass to the Image component to modify this component further. You can read about them here.

How to Style Images with Chakra UI

To style the images, we will use Chakra UI's Wrap component.

Wrap is a layout component that adds a defined space between its children or images in this scenario. It 'wraps' its children automatically if there is not enough space to fit any child.

Import Wrap and WrapItem from Chakra UI.

import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";

WrapItem encloses the individual children while Wrap encloses all the WrapItem components.

Modify the expression to display images like this:

"1rem" spacing={4} justify="center">
  {photos.map((pic) => (
    <Image src={pic.src.portrait} height={600} width={400} alt={pic.url} />
  ))}

Here's what's happening in the above code:

px="1rem" is the shorthand prop for padding-left and padding-right.This adds horizontal padding of 1 rem.
spacing={4} applies spacing between each child. This will be seen once each image is wrapped with WrapItem.
justify="center" justifies the images in the center.

Wrap

Now wrap each image with WrapItem. Add the following code inside the JavaScript expression:

"1rem" spacing={4} justify="center">
  {photos.map((pic) => (
    <WrapItem
      key={pic.id}
      boxShadow="base"
      rounded="20px"
      overflow="hidden"
      bg="white"
      lineHeight="0"
      _hover={{ boxShadow: "dark-lg" }}
    >
      <Image src={pic.src.portrait} height={600} width={400} alt={pic.url} />
    WrapItem>
  ))}

Let's discuss the props passed to WrapItem one by one:

key={pic.id} gives each image a unique key so that React can differentiate between the children or pictures.
boxShadow="base" adds shadow to WrapItem.
rounded="20px" adds a border-radius of 20px.
overflow="hidden" make sure the image doesn't overflow the WrapItem and is seen rounded.
bg="white" adds a white background to the WrapItem.
lineHeight="0" sets line-height property to zero.
_hover={{ boxShadow: "dark-lg" }} changes the boxShadow when you hover over the image.

GIF

You will see that spacing={4} has also come into effect since we added WrapItem to images.

How to Add Search Functionality to the Gallery

The next step is to add a feature to allow users to search for images and show those images to them. For this, we will use the /search endpoint in the Pexels API.

In lib/api.js create a new function getQueryPhotos() to search for images based on the user's search input.

export const getQueryPhotos = async (query) => {
  const res = await fetch(`https://api.pexels.com/v1/search?query=${query}`, {
    headers: {
      Authorization: API_KEY,
    },
  });
  const responseJson = await res.json();
  return responseJson.photos;
};

The above function getQueryPhotos() is similar to getCuratedPhotos but here we have added a query parameter to the function and modified the API endpoint to include this query.

`https://api.pexels.com/v1/search?query=${query}`

Import the getQueryPhotos() function in index.js.

import { getCuratedPhotos, getQueryPhotos } from "../lib/api";

Now, we will create a form to take user input and search for the same.

We will import and use Input, IconButton, InputRightElement, and InputGroup from Chakra UI to create this form.

Modify the Chakra UI import like this and add an import for SearchIcon:

import {
  Box,
  Container,
  Text,
  Wrap,
  WrapItem,
  Input,
  IconButton,
  InputRightElement,
  InputGroup,
} from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";

Add the following code for the input form inside the Container component in index.js file:

"1rem">
  <Input placeholder="Search for Apple" variant="ghost" />

  <InputRightElement
    children={
      <IconButton
        aria-label="Search"
        icon={<SearchIcon />}
        bg="pink.400"
        color="white"
      />
    }
  />

Here's what we are doing.

InputGroup is used to group the Input and InputRightElement components. Here pb is shorthand for padding-bottom.
Input is the input field where users will type their queries. It has a placeholder of "Search for Apple".
InputRightElement is used to add an element to the right of the Input component. An icon button with the icon of search is passed to the children prop of InputRightElement.
IconButton is a component in Chakra UI which is useful when you want an icon as a button. The icon to render is passed inside the icon prop.

Here's how the input field will look.

Input field

This form doesn't do anything yet. Let's change that.

Define a new state named query to store a user's inputs:

export default function Home({ data }) {
  const [photos, setPhotos] = useState(data);
  const [query, setQuery] = useState("");

...
}

Modify the Input component to create a two-way bind between the input field and query state using the value method and onChange event:

"Search for Apple"
  variant="ghost"
  value={query}
  onChange={(e) => setQuery(e.target.value)}
/>

Now, create a function named handleSubmit() to handle the click event of search icon. For now we will just console.log the input query and clear the field afterwards.

export default function Home({ data }) {
  const [photos, setPhotos] = useState(data);
  const [query, setQuery] = useState("");

  const handleSubmit = async (e) => {
    await e.preventDefault();
    await console.log(query);
    await setQuery("");
  };

...
}

Add this function to the onClick event of IconButton:

<IconButton
      aria-label="Search"
      icon={<SearchIcon />}
      onClick={handleSubmit}
      bg="pink.400"
      color="white"
    />
  }
/>

Head over to http://localhost:3000/ and type something in the input field and click the search button.

console.log(query)

But this form is still missing something: if you try to search for something by hitting Enter instead of the search button, it will refresh the page, and the query is not logged.

To fix this, enclose the InputGroup with the form element and pass the handleSubmit function to the onSubmit event like this:


  <InputGroup pb="1rem">
    <Input
      placeholder="Search for Apple"
      variant="ghost"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />

    <InputRightElement
      children={
        <IconButton
          aria-label="Search"
          icon={<SearchIcon />}
          onClick={handleSubmit}
          bg="pink.400"
          color="white"
        />
      }
    />
  InputGroup>

You will notice hitting Enter will work now.

Now update the handleSubmit function like this to fetch the images based on the user's query:

const handleSubmit = async (e) => {
  await e.preventDefault();
  const res = await getQueryPhotos(query);
  await setPhotos(res);
  await setQuery("");
}

The above function passes the query variable to the getQueryPhotos() function and the data returned from the function overrides the previous value in the photos variable using setPhotos(res).

And it's done! You can now search images in your app.

Searching for Apple

There's still something missing. What is it?

What if the user tries to search without any query, like with empty strings? The current code will still try to make request using "" and we will run into the following error.

To handle this issue, we will use Toast from Chakra UI.

Import useToast from Chakra UI:

import {
  Box,
  Container,
  Text,
  Wrap,
  WrapItem,
  Input,
  IconButton,
  InputRightElement,
  InputGroup,
  useToast
} from "@chakra-ui/react";

Add the following code jut below where you defined states to intialize Toast.

export default function Home({ data }) {
  const [photos, setPhotos] = useState(data);
  const [query, setQuery] = useState("");
  const toast = useToast();

...
}

Modify the handleSubmit() function like this:

const handleSubmit = async (e) => {
  await e.preventDefault();
  if (query == "") {
    toast({
      title: "Error.",
      description: "Empty Search",
      status: "error",
      duration: 9000,
      isClosable: true,
      position: "top",
    });
  } else {
    const res = await getQueryPhotos(query);
    await setPhotos(res);
    await setQuery("");
  }
};

In the above code, we check if the query is empty or not with a simple if/else statement. And if it is empty, then we display an error toast with Empty Search text.

Try hitting Enter without typing anything in the input field. You will see a toast like this:

Empty Search toast

How to Add Dynamic Routes to Images

We will create a dynamic route for each image so users can click on images to get more information on them.

Next.js has a very cool feature where you can create a dynamic route by adding brackets to a page ([param]), where param can be URL slugs, pretty URLs, an ID, and so on.

Here the param is id, since to get a specific photo from Pexels API you need to provide its id.

Run the following commands in your project's root directory to create [id].js in the photos directory under pages.

mkdir pages/photos
cd pages/photos
touch [id].js

Import Link from next/link in index.js. Link helps in client-side transitions between routes. You can read more about Link here.

import Link from "next/link"

Add this Link to each image like this:

`/photos/${pic.id}`}>
  <a>
    <Image src={pic.src.portrait} height={600} width={400} alt={pic.url} />
  a>

Head over to your app and try clicking any image. It will show an error since we have created photos/[id].js but didn't add any code in it.

But if you notice the URL of this page, it will be something like this:

http://localhost:3000/photos/2977079

We will now create a third function named getPhotoById() in lib/api.js to get a specific photo based on its id.

Add the following code to api.js:

export const getPhotoById = async (id) => {
  const res = await fetch(`https://api.pexels.com/v1/photos/${id}`, {
    headers: {
      Authorization: API_KEY,
    },
  });
  const responseJson = await res.json();
  return responseJson;
};

The above code uses the /photos endpoint to get a single image from Pexels API. You will notice that unlike getCuratedPhotos and getQueryPhotos, getPhotoById returns the responseJson and not responseJson.photos.

Add the following code to photos/[id].js:

import { getPhotoById } from "../../lib/api";
import {
  Box,
  Divider,
  Center,
  Text,
  Flex,
  Spacer,
  Button,
} from "@chakra-ui/react";
import Image from "next/image";
import Head from "next/head";
import Link from "next/link";
import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";

export default function Photos() {

    return (
      <Box p="2rem" bg="gray.200" minH="100vh">
        <Head>
          <title>Imagetitle>
          <link rel="icon" href="/favicon.ico" />
        Head>

      Box>
    )
  }

We have added a background color of light gray using the bg prop and Box component. To save time, we have imported all the components and icons beforehand.

Create a getServerSideProps() function in [id].js to fetch data from the Pexels API.

export async function getServerSideProps({ params }) {
  const pic = await getPhotoById(params.id);
  return {
    props: {
      pic,
    },
  };
}

Restart your development server.

You might ask how getServerSideProps() is getting the id of the image from the params argument?

Since this page uses a dynamic route, params contain the route parameters. Here the page name is [id].js , so params will look like { id: ... }.

You can try console.log(params) – it will look something like this.

{ id: '4956064' }

Pass this pic prop to the Photos component function as an argument.

export default function Photos({ pic }) {
...
}

Add the following code to the Box component:

"2rem" bg="gray.200" minH="100vh">
  <Head>
    <title> Image: {pic.id}title>
    <link rel="icon" href="/favicon.ico" />
  Head>

  <Flex px="1rem" justify="center" align="center">
    <Text
      letterSpacing="wide"
      textDecoration="underline"
      as="h2"
      fontWeight="semibold"
      fontSize="xl"
      as="a"
      target="_blank"
      href={pic.photographer_url}
    >
      <AtSignIcon />
      {pic.photographer}
    Text>
    <Spacer />
    <Box as="a" target="_blank" href={pic.url}>
      <InfoIcon focusable="true" boxSize="2rem" color="red.500" />{" "}
    Box>{" "}
    <Spacer />
    <Link href={`/`} >
         <Button
            as="a"
            borderRadius="full"
            colorScheme="pink"
            fontSize="lg"
            size="lg"
            cursor="pointer"
          >
            🏠 Home
         Button>
    Link>
  Flex>
  <Divider my="1rem" />

  <Center>
    <Box as="a" target="_blank" href={pic.url}>
      <Image
        src={pic.src.original}
        width={pic.width / 4}
        height={pic.height / 4}
        quality={50}
        priority
        loading="eager"        
      />
    Box>
  Center>

Here is how your page will look now:

Photo page

Let's break this code down piece by piece.

We first modify the title of the page, by passing the id of the image after the Image text.


  <title> Image: {pic.id}title>
  <link rel="icon" href="/favicon.ico" />

We then create a navbar using the Flex component.

"1rem" justify="center" align="center">
...

Here px is shorthand prop for padding-left and padding-right, and justify and align are for justify-content and align-items, respectively.

We then add a link to the photographer using the Text and AtSignIcon icons. You can also use the @ sign instead of AtSignIcon.

"wide"
  textDecoration="underline"
  as="h2"
  fontWeight="semibold"
  fontSize="xl"
  as="a"
  target="_blank"
  href={pic.photographer_url}
>
  <AtSignIcon />
  {pic.photographer}

The as prop is a feature in Chakra UI that allows you to pass an HTML tag or component to be rendered.

Here we are using it with the tag so the Text component will be rendered as tag on the page.

The target="_blank" makes sure that the link opens in a new window or tab.

Photographer link

Then we add a Spacer component that, when used with Flex, distributes the empty space between Flex's children. You can read more about it here.

Image Source - Chakra UI docs

Next, we add an information icon that links to the photo on Pexels.

as="a" target="_blank" href={pic.url}>
  <InfoIcon focusable="true" boxSize="2rem" color="red.500" />

<Spacer />

Info Icon

Then we add Home button in the nav to take the user back to the landing page of the app using the Link component from next/link.

`/`}>
  <Button
    as="a"
    borderRadius="full"
    colorScheme="pink"
    fontSize="lg"
    size="lg"
    cursor="pointer"
  >
    🏠 Home
  Button>

Home button

Then we use Divider component to divide the navbar and the image.

"1rem" />

Here my is shorthand prop for margin-top and margin-bottom.

Finally, we add the image to the page using the Center component, which as the name suggests, centers its children.


  <Box as="a" target="_blank" href={pic.url}>
    <Image
      src={pic.src.original}
      width={pic.width / 4}
      height={pic.height / 4}
      priority
      quality={50}
      loading="eager"
    />
  Box>

In the above code, we use the Box component to add a link to the original image on Pexels using the as prop.

You will also notice that we have passed a few additional props in the Image component.

src: We are passing the original image this time.
We scale the image by dividing the original width and height by 4.
By passing priority, the image is considered high priority and is preloaded.
By default, the Image component reduces the quality of optimized images to 75%, but since the image is still too big, we further decrease its quality to 50%, by passing quality={50}.
By default, loading behavior is lazy in the Image component, but here we want the image to be displayed immediately, and hence we pass loading="eager".

Here is the above code in action.

Next Image Gallery

You did it! 🎉

Congrats 👏 on building this Next Image Gallery project.

Conclusion

In this tutorial, we learned how to build an Image Gallery with Next.js using the Pexels API and Chakra UI.

We discussed how to install and use Chakra UI v1 in any Next.js project. We also saw how to fetch data from an API and create dynamic routes in Next.js.

Here are some other APIs that you can explore and use in your project:

Here are some additional resources that can be helpful:

Would you like a second part of this tutorial, where we add animations to images using Framer Motion? Let me know on Twitter.

What other projects or tutorials would you like to see? Reach out to me on Twitter, and I'll cover them in my next article!

If you're inspired to add features yourself, please do share and tag me – I'd love to hear about them :)

CSS Background Image – How to Add an Image URL to Your Div

freeCodeCamp — Sun, 05 Apr 2020 11:22:36 +0000

By Amy Haddad

Say you want to put an image or two on a webpage. One way is to use the background-image CSS property.

This property applies one or more background images to an element, like a

, as the documentation explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.

Add an Image

It’s easy to add an image using the background-image property. Just provide the path to the image in the url() value.

The image path can be a URL, as shown in the example below:

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

Or it can be a local path. Here’s an example:

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

Add Multiple Images

You can apply multiple images to the background-image property.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

That’s a lot of code. Let’s break it down.

Separate each image url() value with a comma.

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Now position and enhance your images by applying additional properties.

background-repeat: no-repeat, no-repeat;
background-position: right, left;

There are several sub-properties you can add to your background images, such as background-repeat and background-position, which we used in the above example. You can even add gradients to a background image.

See what it looks like when we put everything together.

Order Matters

The order that you list your images in matters because of the stacking order. That means the first image listed is nearest to the user, according to the documentation. Then, the next one, and the next, and so on.

Here’s an example.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

We’ve listed two images in the code above. The first image (morocco-blue.png) will be in front of the second (oriental-tiles.png). Both images are the same size and lack opacity, so we only see the first image.

But if we move the second image (oriental-tiles.png) over to the right by 200 pixels, then you can see part of it (the rest remains hidden).

Here’s what it looks like when we put everything together.

When Should You Use Background Image?

There’s a lot to like about the background-image property. But there’s a drawback.

The image may not be accessible to all users, the documentation points out, like those who use screen readers.

That’s because you can’t add textual information to the background-image property. As a result, the image will be missed by screen readers.

Use the background-image property only when you need to add some decoration to your page. Otherwise, use the HTML element if an image has meaning or purpose, as the documentation notes.

That way, you can add text to an image element, using the alt attribute, which describes the image. The provided text will be picked up by screen readers.

<img class="house" 
       src="./images/farnsworth_house.jpeg"
       alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

Think of it this way: background-image is a CSS property, and CSS focuses on presentation or style; HTML focuses on semantics or meaning.

When it comes to images, you’ve got options. If an image is needed for decoration, then the background-image property may be a good choice for you.

I write about learning to program and the best ways to go about it (amymhaddad.com).

How to Build an Image Slider with jQuery

freeCodeCamp — Sat, 08 Feb 2020 01:57:00 +0000

This tutorial will walk you through building an image slider using the jQuery library.

This tutorial will have four parts:

HTML

We will be using Bootstrap for this tutorial to keep things looking good, without spending a lot of time.

Our structure will be as follows:

Inside our ul with the class of slides we will have the following:

Inside our .buttons class you should have the following:

Here is an example of what your html should look like:

Note: You should replace the image src attribute with your own content.

SCSS

We are using Sass and the SCSS syntax so we can nest and use variables

We can use the following SCSS to define our styling:

// Variables
$width: 720px;

.slider {
  width: $width;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;

  .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
  }

  .slide {
    float: left;
    list-style-type: none;
    width: $width;
    height: 400px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.buttons {
  margin: 0;
  width: $width;
  position: relative;
  top: -40px;
  margin: 0 auto;

  .play {
    display: none;
  }

  .btn {
    display: flex;
    margin: 0 auto;
    text-align: center;
  }
}

JS

Variables

In the following code snippet, we define variables used later in our code.

var animationSpeed = 1000; // How quickly the next slide animates.
var pause = 3000; // The pause between each slide.

We will use a blank variable where we will call the setInterval method:

var interval;

Animation We will wrap our slider animations inside a function:

function startSlider() {}

We are using the setInterval() native JavaScript method to automate the contents of the function on a time based trigger.

interval = setInterval(function() {}, pause);

We use the pause variable to see how many milliseconds to wait before calling the function again. Read more on the native setInterval method here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Inside our function we will use jQuery to fade between slides at the speed of the animationSpeed variable:

$('.slides > li:first')
  .fadeOut(animationSpeed)
  .next()
  .fadeIn(animationSpeed)
  .end()
  .appendTo('.slides');

We are targeting the first slide using $('.slides > li:first'). - .fadeOut(animationSpeed) will fade the first slide out and then using .next(), we move to the next slide. - Once we have moved to the next slide, we will fade it in: .fadeIn(animationSpeed). - This sequence will continue until the last slide (.end()), then we stop the animation. We will now call the startSlider function to start the animation:

startSlider();

**Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:**

$('.play').hide(); // Hiding the play button.

We will now create our pause button (automatically shown on page load):

$('.pause').click(function() {
    clearInterval(interval);
    $(this).hide();
    $('.play').show();
});

We will call our function every time the pause button is clicked using jQuery. - We will remove the interval using the clearInterval method and using our interval variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .pause. - We will then show our play button so the user can resume the animation: $('.play').show();. The following code sets up our play button (automatically hidden on page load):

$(‘.play’).click(function() { startSlider(); $(this).hide(); $(‘.pause’).show(); });

We will call our function every time the play button is clicked using jQuery.

We will start or restart the interval using the startSlider function.
Because our slider is currently playing, we will hide the play button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .play.
We will then show our pause button so the user can stop the animation at will: $('.pause').show();.

References

Checkout the source code and example on CodePen for this tutorial.

How to generate product images for Amazon, Instagram, Zalando, and Tmall

freeCodeCamp — Tue, 26 Nov 2019 15:54:54 +0000

By Anton Garcia Diaz

Millions of people have already shifted from traditional tv to online content, and from traditional malls to online stores. Because of this, e-commerce and marketing teams need to deploy and maintain strong online presences for their businesses.

This usually means running the brand's own online store and having a presence in different marketplaces that cover different regions and population segments. The never-ending list of possible marketplaces in which to showcase, promote, and sell products just gets longer and longer.

To make matters worse, different marketplaces have different requirements and restrictions on images, which can add a burden for the devops and marketing teams. It's also a source of inconsistency in the public image of a brand.

Here, we'll review the main aspects to consider when setting up a clean pipeline for the seamless production of omnichannel images.

A single master image through a single pipeline

To simplify workflows and keep them sustainable, a good practice is to apply the principles of omnichannel to images. This basically means to set a single, easy to configure pipeline for the creation of variants, from the same master or pristine images. Under this approach, we can use the same product image for every channel.

Our pipeline should receive master images and produce the derivatives needed to feed the marketplaces. At a minimum, it should cope with a workflow like this.

https://store.abraia.me/05bf471cbb3f9fa9ed785718e6f60e28/product-images-for-amazon-zalando-tmall-lamoda-ssg/generation-of-variants/index.html

Of course, a front-end and cloud storage are not necessary. The pipeline may just work by watching a hot folder and creating the variants as master images land there. We'll also take a look at this.

Image transformation and optimization

Each web channel has its own web design and layout. As for images, this means different and specific aspect ratios. Besides, each marketplace usually has an image policy in place, which limits the resolution and the weight of the image and sets the admissible image format. Usually, it also specifies other style guidelines.

Let's look at the main operations we'll want to accomplish with our pipeline.

Resizing, cropping, padding

To change the aspect ratio of an image we may crop it or pad it. To get a squared image from a vertical one we may cut out the upper and bottom parts or we may fill in the left and right sides with white stripes.

There are open source tools – like ImageMagick – that allow you to perform these operations effectively. Resizing an image with ImageMagick to limit its maximum dimensions to 800 px is as simple as this:

convert input.jpg -resize 800x800 resized.jpg

This instruction respects the aspect ratio. If the original image is not squared, then the resized image has one dimension lower than 800 px. Let's say the image is vertical and we want it for Tmall, which requires a squared image of 800x800 px. Then we may pad it like this:

convert resized.jpg  -gravity center -extent 800x800 padded.jpg

Also, we may simply crop it to fit the dimensions:

convert input.jpg -gravity Center  -crop 800x800+0+0 +repage crop.jpg

While some marketplaces like Tmall encourage padding images with white stripes and branding them with logos to use them in category pages, others like Amazon or Lamoda forbid this practice.

Cropping (left), Resizing (center), Resizing and padding (right)

When we pad an image to match the aspect ratio, we don’t risk cropping out important parts. In fact, padding is a trick to keep the aspect ratio unchanged. However, the risk is real when we crop the image.

So, it is a good practice to ensure in the studio that we comply with some composition requirements set by each channel. We should produce master images with a view of the product compatible with the different aspect ratios that we'll deliver.

Smart cropping

There are algorithms inspired by human attention and aesthetic perception that provide an enhanced protection against bad automatic crops. In the next example, with smart image cropping (white line) we avoid cutting the face unlike a simple center cropping (red line) would do.

Example of smart cropping with a cloud service vs center cropping

This option is available in some cloud services. If we're going to use it, we should verify that it works properly for us because many solutions only use an attention map and do not consider aesthetic aspects. Usually, choosing a number of representative images, making some tests with them, and finally verifying the results is enough to get a good grasp.

Overlaying logos and text

We may also need to add our brand logo or to add a message to the image by overlaying a vector graphic or a text. Moreover, in many cases we need some content localization strategy in place – like tailoring discounts and language to a market region. Sticking to our example, with ImageMagick we can overlay text on a padded image.

convert -fill black -pointsize 70 -gravity center -draw "rotate -90 text 0,-330 'MyBrandHere'" padded.jpg padded-with-brand.jpg

Once we configure it for one image, we may apply it to any other with the same dimensions.

Examples of batch image branding using Abraia's cloud service

Otherwise, handling typographies and different settings may end being tricky in workflows with certain complexity. In this regard, a cloud service usually provides a front-end to make the configuration intuitive and fast, and more convenient to handle. It also deals with other stuff like typographies or quality preservation in image recompression.

The workflows

There are many ways to deploy an image processing pipeline. Depending on the flow rate of images, we may need to support different types of workflows.

Batch processing

In the most simple case – when the flow rate is low – a batch image processing solution may be enough. With ImageMagick, we can use mogrify (instead of convert) to process all the images inside a folder.

In certain cases, like image versions with a text in different languages, we may need to code a script, but that's not a big deal either. To make it even easier, we may use a cloud batch processing tool in which we drop images and it gives us back all the variants we need, like in the video at the beginning of the post.

Hot folders

For in-house deployments where we need something more than simple batch image processing, the use of hot folders may be a good option. In this case, we should set a worker that watches a folder. Any time an image lands the folder the watcher triggers the process that creates all the variants we need.

In this regard, Gulp comes very handy to implement a folder watching pipeline. This GitHub repository brings a ready-to-use implementation of hot folder based on Gulp. It allows us to transform images using Abraia's cloud service or optimize them using Imagemin (an open source solution). Once installed, the watcher is easily started with just one command in the terminal.

$ gulp

This video shows the process at work.

https://store.abraia.me/05bf471cbb3f9fa9ed785718e6f60e28/product-images-for-amazon-zalando-tmall-lamoda-ssg/hot-folder-gulp/index.html

Full cloud

Cloud services usually bring the most flexible and fast-to-deploy solution. Still, there are different ways to go full cloud. In the most simple approach from a user perspective, an image management and optimization service takes charge of the transformation. It also manages the delivery to end users (through a CDN) or other web channels like marketplaces and social networks. The user only needs to upload the master images and to configure the transformations, usually with an intuitive graphic interface.

In medium to large companies that manage their own cloud, services from different providers are usually combined. In this case, we are likely to have to manage private and public buckets. We can have a service accessing a bucket, creating the variants, and delivering the resources or just returning them to a different bucket.

Also, a cloud pipeline may be partially implemented in-house. In this case we have endless possibilities. However, such development effort only makes sense when no service complies with the requirements and there is a justified need for a tailored solution.

Summary

Studio shooting and photography retouching are time-consuming and costly operations. Being able to use the same master material everywhere is very important to keep times and cost under control.

We have reviewed the main aspects of a complete pipeline in charge of creating image variants. On one hand, we looked at the transformations you need to perform from resizing, cropping, or padding, to the overlay of texts and graphics. On the other, we looked at the workflows to implement from batch processing to hot folders or full cloud solutions. We have reviewed some important open source resources (like ImageMagick or Gulp) that make it possible to implement a pipeline you develop yourself.

In the end, there are two main factors to consider when deciding whether to use an in-house or a cloud service. First, you must evaluate your willingness to take on the development effort. Second, you need to decide what features you require, from an easy to use interface for the configuration of variants to advanced features like smart cropping.

image - freeCodeCamp.org

How to Build and Deploy an Image Hosting Service on Sevalla

Table of Contents

What is Object Storage?

What We Will Be Building

How to Set Up the Project

Route 1: GET /

Route 2: POST /upload

Route 3: GET /i/:id

How to Create Your Object Storage

Testing the Application Locally

How to Deploy Your Project on Sevalla

Why This Project Matters

Conclusion

SVG Tutorial – How to Code Images with 12 Examples

The SVG tag

How to Make a Christmas Ornament with SVG

How to Build a Christmas Tree with SVG

How to Make a Gingerbread Figure with SVG

How to Make a Star with SVG

How to Make a Snowflake with SVG

How to Draw a Forest with SVG

How to Make a Curvy Tree with SVG

How to Make a Bell with SVG

How to Write Text Along a Path

How to Animate an SVG with CSS

How to Make a Clock That Shows the Actual Time

How to make a Data-driven Diagram with SVG and React

Next Steps – Making SVGs Interactive with JavaScript

Subscribe for more tutorials on Web Development:

How to Generate Images using React and the Dall-E 2 API – React and OpenAI API Tutorial

But First, How Does Dall-E Work?

How to Create a React Application

How to Integrate the DALL-E 2 API with the React Application

Wrapping Up

HTML Background Image – How to Add Wallpaper Images to Your Website

How to Add Wallpaper Images to Your Website

What if the Background Image Is Smaller Than the Browser Window?

Summary

What is Alt Text? Image Alt Text HTML Example

What is Alt Text?

Why is Image Alt Text Important?

Tips for Writing Good Alt Text

Accurately describe the image

Keep it short

Use keywords but avoid keyword stuffing

Don't repeat yourself

Image Captions vs. Alt Text

Don't include the words' image' or 'picture'

Wrapping Up

Google Sheets Tutorial – How to Use Regex and VLOOKUP to Display Images from Google Drive

How to Setup the Project 📐

How to Use Named Ranges in Google Sheets 📛

How to Perform Data Validation 📃

How to Use VLOOKUP 📊

How to Use REGEXEXTRACT 💾

How to Use the IMAGE Function 📷

How to Format Your Sheet FTW 💯

Thanks for Reading! 🙏

What is an SVG File?

Table of Contents

How to Make an SVG File

How to Make an SVG with Image Editing Programs

How to Make an SVG with XML

What is an SVG File Used for?

How to Open an SVG File

How do I Convert an SVG File to an Image?

Conclusion

How to Make an Image Search App in React using the Unsplash API

Contents

What will we learn?

How to Create the React App

How to Build the UI of our App

How to Get the Access Key and API Endpoint from Unsplash

How to Use Hooks in our App

How to Set State Using the useState Hook

How to use the img state

How to Make API Requests to Unsplash using the useEffect Hook

How to Display Images in our App

How to Handle Errors

Route 1: `GET /`

Route 2: `POST /upload`

Route 3: `GET /i/:id`

The `src` Attribute

The `alt` Attribute

The `width` and `height` Attributes

Use the `title` Attribute to Show Tooltips

Use the
and
Tags

2. How to use SVG as a CSS `background-image`

**Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:**