How to Customize Images on Your Slides Website

The Slides template comes with some placeholder images that you can replace and customize according to your brand. This guide will show you how.

Change Images

Images used in the Slides template are stored in the assets/img folder.

To change an image on a webpage, first ensure that you are targeting the right image. The easiest way to do this is to open the HTML file in a browser, locate the image you want to change, right-click on it and select Copy image address (for Chrome and Safari) or Copy Image Location (for Mozilla Firefox) from the list of options. Paste the address somewhere and you should be able to see the image’s name. Alternatively, you can also select Open image in new tab and get the image’s name from the browser address bar.

file:///home/janedoe/path/to/slides-template/assets/img/gallery-77-1.jpg

To change the image, search its name in the HTML file. Most text/code editors have a quick-search feature that you can use to search a file for a string of text. The keyboard shortcut to this is usually Ctr+F (Cmd+F on macOS). On locating the image in the code, modify the src attribute with the path to your new image:

<img src="assets/img/new_image.jpg" alt="A description of the image" />

Though optional, it’s recommended that you include some alternate text for the image via the alt attribute. The alt attribute provides alternative information for an image if a user, for some reason, cannot view it (e.g. because of slow connection, an error in the src attribute, or if the user is using a screen reader). It can also positively impact your page’s search engine ranking.

Add Rounded Corners to Images

By default, when you add an image to the Slides template, it will have sharp corners, as shown below.

To improve its look, you can add a border-radius to it to make its edges a bit rounded. We have a class rounded that you can use to add a 6px border-radius to the image.

<img class="rounded" src="assets/img/image.jpg" alt="A description of the image">

The image now has slightly rounded corners.

If you want to make the edges even more rounded, increase the border-radius.

<!-- Markup in HTML file -->
<img class="custom-rounded" src="assets/img/image.jpg" alt="A description of the image">

/* Styling in CSS file */
.custom-rounded {
  border-radius: 30px !important;
}

You can also use % instead of px.

/* Styling in CSS file */
.custom-rounded {
  border-radius: 12% !important;
}

If you want a circular image, we have a round class that adds border-radius: 999px to the image.

<img class="round" src="assets/img/image.jpg" alt="A description of the image">

This results in a round image.

For an image to be perfectly circular, it has to have the same width and height, otherwise, it will be an oval.

The best thing to do is to replace the image with one that has the same width and height:

You can also force the image’s width and height to be the same either via CSS or by using the width and height HTML attributes.

<!-- Markup in HTML file -->
<img class="round forced-square" src="assets/img/image.jpg" alt="A description of the image">

/* Styling in CSS file */
.forced-square {
  width: 170px !important;
  height: 170px !important;
}

You’ll get a circle with this, but the image might end up looking stretched as it won’t maintain its aspect ratio. Thus, the best approach when you want a circular image is to start with a square image, as previously mentioned.

Add Captions to Images

Sometimes, it’s useful to add a caption to an image that provides some information about the image.

To add a caption to an image, place the image inside a figure tag and the caption inside a figcaption.

<figure>
  <img src="assets/img/gallery-66-1.jpg" alt="Image Thumbnail">
  <figcaption>This is the caption</figcaption>
</figure>

The caption appears below the image.

Below, we add some styling to the caption.

<!-- Markup in HTML file -->
<figure>
  <img src="assets/img/gallery-66-1.jpg" alt="Image Thumbnail">
  <figcaption class="figure-caption">This is the caption</figcaption>
</figure>

/* Styling in CSS file */
.figure-caption {
  font-size: 85%;
  color: #6c757d;
}

Add Tooltips to Images

Tooltips are small, textual hints used mostly on graphical elements to provide extra information about the element. For example, when using icons for actions, you can include a tooltip to give people clarification on the element’s function. You can also use tooltips to provide more information on an image.

When you add a title attribute to any HTML element, its value will be shown in a tooltip when the mouse moves over the element.

<img class="wide" src="assets/img/gallery-66-3.jpg"  title="This is a tooltip" alt="Image Thumbnail"/>