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.
![Output](/assets/01-revised-app-preview-63klrjbJ.png)
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:
'© <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
![Output](/assets/01-revised-app-preview-63klrjbJ.png)
That's it for this post. See you on the next one!