Adding Images in Cosmos

Cosmos allows you to add images to display your latest projects or portfolio images.

Adding Project Thumbnails

To add your own project thumbnails, 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 the portfolio 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 link a new thumbnail image:

<img class="project-image" src="assets/images/project-1.jpg" alt="">
...
<img class="project-image" src="assets/images/project-2.jpg" alt="">
...
<img class="project-image" src="assets/images/project-3.jpg" alt="">
...
<img class="project-image" src="assets/images/project-4.jpg" alt="">
...
<img class="project-image" src="assets/images/project-5.jpg" alt="">
...
<img class="project-image" src="assets/images/project-6.jpg" alt="">
...
<img class="project-image" src="assets/images/project-7.jpg" alt="">
...
<img class="project-image" src="assets/images/project-8.jpg" alt="">
...
<img class="project-image" src="assets/images/project-9.jpg" alt="">

Adding Project & Featured Images

To add your own project or featured images within the project page(s) or about, contact pages, 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 project.html, contact.html, and about.html files in a code editor
    • Project page: Look for the portfolio section within the file.
    • About/Contact page: Look for the about or contact sections within the file.
  4. Change the file names to the file names of your project/portfolio/featured images.
    • About/Contact Featured Images & Main Project Images: You will need to change this within the <img src=”assets/images/…” alt=””> section underneath the twelve columns div class. For more information, refer to the code example.
    • Recent Project Images: You will need to change this within the <img class=”project-image” src=”…” alt=””> section for the recent project 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 project.html, contact.html, and about.html files 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 project.html, contact.html, and about.html files, and then view it in your browser.

Here is the code which you need to modify to link a recent project image:

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

Here is the code which you need to modify to link a recent project image:

<img class="project-image" src="assets/images/project-3.jpg" alt="">
...
<img class="project-image" src="assets/images/project-4.jpg" alt="">
...
<img class="project-image" src="assets/images/project-5.jpg" alt="">
...
<img class="project-image" src="assets/images/project-6.jpg" alt="">