Adding Portfolio Images in Prism

Prism allows you to add site images for the project page of the template.

Adding Featured Project Images

You can create your own image or use a licensed photo to display as gallery imagery in Prism. 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 project.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 project.html file.
  6. Repeat steps 1-5 as necessary.

Here is the code which you need to modify to add a new featured image to the featured work section:

<div class="work">
    <img src="../assets/images/detail-1.jpg" alt="">
</div>

Here is some sample code If you are adding more than one featured image to the featured work section:

<div class="work">
    <img src="../assets/images/detail-1.jpg" alt=""> 
    <img src="../assets/images/detail-2.jpg" alt=""> 
    <img src="../assets/images/detail-3.jpg" alt=""> 
    <img src="../assets/images/detail-4.jpg" alt=""> 
</div>

Adding Related Project Images

You can create your own images or use a licensed photos to display as related projects imagery in Prism. To add new related project images, 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 project.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 project.html file.
  6. Repeat steps 1-5 as necessary.

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

<div class="work row">
    <div class="col-sm-4">
        <img src="assets/images/detail-2.jpg" alt="">
    </div>
    <div class="col-sm-4">
        <img src="assets/images/detail-3.jpg" alt="">
    </div>
    <div class="col-sm-4">
        <img src="assets/images/detail-4.jpg" alt="">
    </div>
</div>