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:
- 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.
- Open the project.html file in your code editor.
- Search the code for the specific section you wish to add custom gallery images to.
- Type the directory/folder path and name for the image.
- Save the project.html file.
- 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:
- 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.
- Open the project.html file in your code editor.
- Search the code for the specific section you wish to add custom gallery images to.
- Type the directory/folder path and name for the image.
- Save the project.html file.
- 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>