Adding Images in Polarity

Polarity allows you to add hero background, client, featured, and project or portfolio images in the template.

Adding a Hero Background Image

To add your own hero background image, follow these instructions:

  1. Select the image from your PC that you want to display and resize it, if necessary.
  2. Copy the 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 hero section within the file.
  4. Change the file name to the file name of your background image.
    • For more information, refer to the code example.
  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 new hero background image:

<div class="hero">
    <div class="hero-image" style="background-image:url('assets/images/background.jpg');"></div>
</div>

Adding a Featured & Project or Portfolio Image

To add a featured and project or portfolio image, follow these instructions:

  1. Select the images from your PC that you want to display and resize them, if necessary.
  2. Copy the images to the assets/images folder.
    • If you’re testing the template locally on your PC, then simply copy the images.
    • If you’ve already uploaded the template to your host’s server, then FTP the images into the assets/images folder.
  3. Open the style.css file in a code editor and perform the following searches within the file:
    • ../images/featured.jpg
    • ../images/project-1.jpg
    • ../images/project-2.jpg
    • ../images/project-3.jpg
    • ../images/project-4.jpg
    • ../images/project-5.jpg
    • ../images/project-6.jpg
  4. Change the file names to the file names of your project or portfolio image.
    • For more information, refer to the code examples.
  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 new featured project image in the index.html page:

.featured-project {
    background: url('../images/featured.jpg');
    background-position: bottom center;
    background-size: cover;
}

Here is the code which you need to modify to display your new portfolio or project images in the index.html page:

.project-1 {
    background: url('../images/project-1.jpg');
    background-position: bottom center;
    background-size: cover;
}

.project-2 {
    background: url('../images/project-2.jpg');
    background-size: cover;
}

.project-3 {
    background: url('../images/project-3.jpg');
    background-size: cover;
}

.project-4 {
    background: url('../images/project-4.jpg');
    background-size: cover;
}

.project-5 {
    background: url('../images/project-5.jpg');
    background-size: cover;
}

.project-6 {
    background: url('../images/project-6.jpg');
    background-size: cover;
}

Adding Client Images

To add client images, follow these instructions:

  1. Select the images from your PC that you want to display and resize them, if necessary.
  2. Copy the images to the assets/images folder.
    • If you’re testing the template locally on your PC, then simply copy the images.
    • If you’ve already uploaded the template to your host’s server, then FTP the images into the assets/images folder.
  3. Open the index.html file in a code editor and look for the client-logos section within the file.
  4. Change the file names to the file names of your client images.
    • For more information, refer to the code example.
  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 new client images in the index.html page:

<div class="client-logos">
    <div class="image">
        <img src="assets/images/client-1.svg" alt="">
    </div>
    <div class="image">
        <img src="assets/images/client-2.svg" alt="">
    </div>
    <div class="image">
        <img src="assets/images/client-3.svg" alt="">
    </div>
    <div class="image">
        <img src="assets/images/client-4.svg" alt="">
    </div>
    <div class="image">
        <img src="assets/images/client-5.svg" alt="">
    </div>
</div>