Display Images in Grid

Reading Time: 4.32 minutes

Recap

On the previous lesson, we have shown multiple images passed by our python backend and shown the corresponding markers on the map. However, our images are not beautifully formatted. They are just displayed vertically stacked.

In this post, we are going to use a css library called daisyui to style our page.

Output

The output of this post will be the web page below.

daisyUI

So what is daisyUI?

daisyUI is a library that adds components class names to tailwindcss.

tailwindcss is a css library used to build rapidly modern websites with just css class names.

So daisyui is built on top of the tailwindcss to make the styling faster.

Map Height

The first thing we will change in our code is our custom css file. We will set the map height a little bit taller. From250px to 300px. So let's do that. Let's edit our styles.css file.

#map {
  height: 300px;
}

That's it. You can already preview the app and notice that the map becomes a little taller than before. You can adjust it more to your liking if you wanted a taller one.

Installing daisyUI

To install daisyUI in our site, we will use something called a CDN or content delivery network. Just like what we used with the leaflet library.

So in the head of our html file let's add the following:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="/static/styles.css" />

    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css"
      rel="stylesheet"
      type="text/css"
    />

    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />

    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>

    <title>Hello</title>
  </head>
</html>

Look at the highlighted codes above for the linking of the daisyui and tailwindcss.

Now we will modify the body of our html.

<body>
    <div id="map""></div>

    {% for image in images %}

    <div>
      <img src="{{ image.url }}" alt="{{ image.name }}" width="200">
      <table>
      <tr>
        <td>Name</td>
        <td>{{ image.name }}</td>
      </tr>
    </table>
    </div>

    {% endfor %}

Surround the for loop template with

<div
  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
></div>

And so we have

<body>
    <div id="map""></div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    {% for image in images %}

    <div>
      <img src="{{ image.url }}" alt="{{ image.name }}" width="200">
      <table>
      <tr>
        <td>Name</td>
        <td>{{ image.name }}</td>
      </tr>
    </table>
    </div>

    {% endfor %}
    </div>

What this does is it dictates the grid behaviour of its children. We will now replace the codes the displays our images and image name from lines 7-15 with

<div class="card w-full bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">{{ image.name }}</h2>
  </div>
  <figure>
    <img src="{{ image.url }}" alt="{{ image.name }}" height="100%" />
  </figure>
</div>

This puts our image inside a card component with its title at the top. We will now have the following html code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="/static/styles.css">

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />

    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />

    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>

    <title>Hello</title>
  </head>
  <body>
    <div class="container mx-auto px-4 py-8">
      <p class="text-2xl">Geotag Album</p>

      <div id="map"" class="my-4"></div>

      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {% for image in images %}
        <div class="card w-full bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title">{{ image.name }}</h2>
          </div>
          <figure><img src="{{ image.url }}" alt="{{ image.name }}" height="100%"></figure>
        </div>
      {% endfor %}
      </div>
    </div>
    <script>
      var map = L.map("map").setView([{{ latitude }}, {{ longitude }}], 13);

      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 19,
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }).addTo(map);

      // Create a bounds object
      var bounds = L.latLngBounds();

      const images = {{ images | tojson }};
      images.forEach(image => {
        var marker = L.marker([image.latitude, image.longitude]).addTo(map);
        bounds.extend(marker.getLatLng());
      });

      map.fitBounds(bounds);
    </script>
  </body>
</html>

After running the code of our app, we will now have

That's it for this post. See you on the next one!