Azure allows you to add images to display your latest projects or portfolio images.

Adding Project Thumbnails & Images

To add your own images, follow these instructions:

1. Select the images from your PC that you want to showcase and resize them, if necessary.
2. Copy those images to the assets/images folder.
   • If you’re testing the template locally on your PC, then simply copy those images.
   • If you’ve already uploaded the template to your host’s server, then FTP those images into the assets/images folder.
3. Open the index.html file in a code editor and look for the projects section within the file.
4. Change the file names to the file names of your project/portfolio images.
   • You will need to change this in two places in the code for both the thumbnail and portfolio images. For more information, refer to the code example.
5. Repeat step 4 as needed.
6. Save the file and view the updates on your PC.
   • If you’re testing locally, simply drag the index.html file into an empty tab of your favorite internet browser.
   • If you’ve already uploaded the template to your host’s server, then FTP the updated index.html file, and then view it in your browser.

Here is the code which you need to modify to link a new thumbnail and portfolio image:

<a href="assets/images/project-1.jpg" data-fancybox class="image conform thumbnail"><img src="assets/images/project-1.jpg" alt=""></a>
...
<a href="assets/images/project-2.jpg" data-fancybox class="image conform thumbnail"><img src="assets/images/project-2.jpg" alt=""></a>
...
<a href="assets/images/project-3.jpg" data-fancybox class="image conform thumbnail"><img src="assets/images/project-3.jpg" alt=""></a>
...
<a href="assets/images/project-4.jpg" data-fancybox class="image conform thumbnail"><img src="assets/images/project-4.jpg" alt=""></a>
...
<a href="assets/images/project-5.jpg" data-fancybox class="image conform thumbnail"><img src="assets/images/project-5.jpg" alt=""></a>
...
<a href="assets/images/project-6.jpg" data-fancybox class="image conform thumbnail"><img src="assets/images/project-6.jpg" alt=""></a>

Adding Your Own Avatar Image

You can also add your own avatar in the header section of Azure by following these instructions:

1. Select the avatar image from your PC that you want to showcase and resize it, if necessary.
2. Copy your avatar image to the assets/images folder.
   • If you’re testing the template locally on your PC, then simply copy the image.
   • If you’ve already uploaded the template to your host’s server, then FTP the image into the assets/images folder.
3. Open the index.html file in a code editor and look for the header section within the file.
4. Change the file name to the file name of your about avatar image.
5. Save the file and view the updates on your PC.
   • If you’re testing locally, simply drag the index.html file into an empty tab of your favorite internet browser.
   • If you’ve already uploaded the template to your host’s server, then FTP the updated index.html file, and then view it in your browser.

Here is the code which you need to modify to display your avatar about image:

<a href="#" class="image profile"><img src="assets/images/profile.jpg" alt=""></a>