Knowledge Base

Browse through our expansive online help documentation.

View Categories

Adding Images in Vertical

Vertical allows you to add your latest project or portfolio images into a slider.

Adding Project or Portfolio 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 slides-section within the file.
  4. Change the file names to the file names of your project/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 display your new project and portfolio images:

<section class="slides-section">
    <img data-index="1" class="slide active" src="assets/images/slide-1.jpg" alt="">
    <img data-index="2" class="slide" src="assets/images/slide-2.jpg" alt="">
    <a class="prev" href="index.html#">Prev</a>
    <a class="next" href="index.html#">Next</a>
</section>

Adding More Images to the Slider

The template only has two slides, but you can add more slides as needed. Simply follow these instructions:

  1. Perform the steps 1-3 in the Adding Project or Portfolio Images section (above).
  2. Add a new line of code in the slides-section portion, and change the data-index to the next number in sequential order.
    • For more information, refer to the code example.
  3. Change the file names to the file names of your project/portfolio images.
    • For more information, refer to the code example.
  4. Repeat steps 2-3 as needed.
  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 four new project and portfolio images in the slider:

<section class="slides-section">
    <img data-index="1" class="slide active" src="assets/images/slide-1.jpg" alt="">
    <img data-index="2" class="slide" src="assets/images/slide-2.jpg" alt="">
    <img data-index="3" class="slide" src="assets/images/slide-3.jpg" alt="">
    <img data-index="4" class="slide" src="assets/images/slide-4.jpg" alt="">
    <a class="prev" href="index.html#">Prev</a>
    <a class="next" href="index.html#">Next</a>
</section>