Fusion allows you to add site images for the image gallery and client sections of the template.

Adding Featured Gallery Images

You can create your own image or use a licensed photo to display as gallery imagery in Fusion. To add a new gallery image, follow these instructions:

1. Add your custom images to the directory/folder where you will store your images. For example, this could be a folder called images for all of your site’s graphics.
2. Open the index-home.html file in your code editor.
3. Search the code for the specific section you wish to add custom gallery images to.
4. Type the directory/folder path and name for the image.
5. Save the index-home.html file.
6. Repeat steps 1-5 as necessary.

The previous instructions can be repeated for all of the template files containing images: portfolio.html and project-details.html.

Here is the code which you need to modify to add new images to the featured work gallery section:

<div id="recent-gallery" class="royalSlider rsDefault visibleNearby">
    <a class="rsImg" href="assets/images/project-1.jpg" data-rsw="566" data-rsh="375"></a>
    <a class="rsImg" href="assets/images/project-2.jpg" data-rsw="566" data-rsh="375"></a>
    <a class="rsImg" href="assets/images/project-3.jpg" data-rsw="566" data-rsh="375"></a>
    <a class="rsImg" href="assets/images/project-4.jpg" data-rsw="566" data-rsh="375"></a>
    <a class="rsImg" href="assets/images/project-5.jpg" data-rsw="566" data-rsh="375"></a>
    <a class="rsImg" href="assets/images/project-6.jpg" data-rsw="566" data-rsh="375"></a>
</div>

Adding Portfolio Gallery Images

You can create your own image or use a licensed photo to display as gallery imagery in Fusion. To add a new gallery image, follow these instructions:

1. Add your custom images to the directory/folder where you will store your images. For example, this could be a folder called images for all of your site’s graphics.
2. Open the portfolio.html file in your code editor.
3. Search the code for the specific section you wish to add custom gallery images to.
4. Type the directory/folder path and name for the image.
5. Save the portfolio.html file.
6. Repeat steps 1-5 as necessary.

Here is an example of the code which you need to modify to add new images to the portfolio gallery:

<a href="project-details.html">
    <img src="assets/images/project-1.jpg" alt="thumbnail">
    <div class="project-information">
        <div class="meta-data">
            <h4>Lorem Dolor</h4>
        </div>
    </div>
</a>

Adding Client Images

You can add client images to display the brands you’ve worked with in Fusion. To add a new client image, follow these instructions:

1. Add your custom images to the directory/folder where you will store your images. For example, this could be a folder called images for all of your site’s graphics.
2. Open the index-home.html file in your code editor.
3. Search the code for the specific section you wish to add custom gallery images to.
4. Type the directory/folder path and name for the image.
5. Save the index-home.html file.
6. Repeat steps 1-5 as necessary.

The previous instructions can be repeated for all of the template files containing images: about.html and portfolio.html.

Here is the code which you need to modify to add new images to the clients section:

<section class="clients container">
    <div class="row">
        <div class="logo animated fade col-sm-3" data-appear-bottom-offset="200">
            <img src="assets/images/client-1.png" alt="">
        </div>
        <div class="logo animated fade col-sm-3" data-appear-bottom-offset="200">
            <img src="assets/images/client-2.png" alt="">
        </div>
        <div class="logo animated fade col-sm-3" data-appear-bottom-offset="200">
            <img src="assets/images/client-3.png" alt="">
        </div>
        <div class="logo animated fade col-sm-3" data-appear-bottom-offset="200">
            <img src="assets/images/client-4.png" alt="">
        </div>
    </div>
</section>

Adding Slider Images

You can create your own image or use a licensed photo to with in Fusion. To add a new client image, follow these instructions:

1. Add your custom images to the directory/folder where you will store your images. For example, this could be a folder called images for all of your site’s graphics.
2. Open the index-home.html file in your code editor.
3. Search the code for the specific section you wish to add custom gallery images to.
4. Type the directory/folder path and name for the image.
5. Save the index-home.html file.
6. Repeat steps 1-5 as necessary.

Here is the code which you need to modify to add new images to the slider section:

<ul class="project-slider">
    <li><img class="bg-check" src="assets/images/slide-1.jpg" alt=""></li>
    <li><img class="bg-check" src="assets/images/slide-2.jpg" alt=""></li>
    <li><img class="bg-check" src="assets/images/slide-3.jpg" alt=""></li>
</ul>