HTML (HyperText Markup Language) provides basic tools for arranging images on a webpage. Although CSS offers more advanced styling capabilities, you can still achieve some formatting using HTML alone.
For images you can use it to give the page the format you need. Below you can find some cases of use:
- General explanation
- Adjust width and center
- Group 2 images in the same row
- Group 3 images in the same row
- Group 4 images in 2 rows
Case 1: General Explanation
As you may or may not know, when you add an image within the editor, it will add the following code in the source code, where the link is the reference to the image on the media tab in survey:
<p><img style="width: 200px; margin: 5px;" src="https://ddtos04263ciu.cloudfront.net/survey/718677/7e1c1557d193fd371474e3c813669826.jpg" /></p>
This will enter images with a set size, which we might not want.
If you need to add images as part of the content in a grid, for example 2x2, 4x2, 2x4, etc., you need to use the following structure:
<div class="row">
<div class="col">REPLACE THIS TEXT WITH IMG</div>
<div class="col">REPLACE THIS TEXT WITH IMG</div>
<div class="col">REPLACE THIS TEXT WITH IMG</div>
</div>
In the previous example, we have a 1x3 grid.
If you need more rows, add the whole code following the last row added. If you need more columns, just copy the div with the class "col".
Keep in mind that with this, it is possible to have the images organized in, but not limited to, the following structure:
Labels for pictures
If you need to add labels for each picture, you need to add another row with the same amount of columns. Here, you only need to replace the text with the corresponding text for each image:
<div class="row">
<div class="col">IMAGE LINK</div>
<div class="col">IMAGE LINK</div>
</div>
<div class="row">
<div class="col">LABEL FOR PICTURE 1</div>
<div class="col">LABEL FOR PICTURE 2</div>
</div>
Case 2: Adjust width and center (1 image)
To adjust the width, we need to find, within the code for the image, the following:
style="width: 200px; margin: 5px;"
Here, we must modify only what is between
- If we want the image to be as big as possible, with its natural size, we’ll remove the "width: xXxpx;" part. Keep in mind that if the image is too big, it wont fit on the page
- If instead, we want the image to be reasonably big, we need to modify the width: change xXxpx to 100%, like this
style="width: 100%; margin: 5px;
If you need to add a label for the image, you need to add text under the image.
Case 3: Group 2 images in the same row
So you have more than 2 images that you would like to display side by side. If this is the case, copy the following code:
<div class="row" style="width: 100%;">
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
</div>
The <p> elements are for the labels for each image. If you do not need labels, feel free to remove them.
Don’t forget to change the source link for the image
Case 4: Group 3 images in the same row
This is similar to the last case, but we need to copy one more section:
<div class="row" style="width: 100%;">
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
</div>
This will add a 3rd column. As you can see below, the images are the same size.
Case 5: Group 4 images in 2 rows
If you need a grid, the code will just get longer, but it is the same code as before, but will be as easy to modify as before:
<div class="row" style="width: 100%;">
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
</div>
<div class="row"> </div>
<div class="row" style="width: 100%;">
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
<div class="col">
<div class="row d-flex justify-content-center">
<img style="width: 90%;"
src="https://ddtos04263ciu.cloudfront.net/survey/718677/e4a272bd26d08299e227b78435a8fd3a.png" />
</div>
<div class="row d-flex justify-content-center">
<p style="text-align: center;">This image was taken from one of Urgo's projects</p>
</div>
</div>
</div>