Adding Images in Omega

Omega allows you to add your own project and portfolio images.

Adding a Project or Portfolio Image

To add a project or portfolio image, follow these instructions:

  1. Select the images from your PC that you want to display and resize them, if necessary.
  2. Copy the images to the assets/images folder.
    • If you’re testing the template locally on your PC, then simply copy the images.
    • If you’ve already uploaded the template to your host’s server, then FTP the images into the assets/images folder.
  3. Open the index.html and project.html files in a code editor and look for the work-item section within the file.
  4. Change the file name to the file name of your project or portfolio image.
    • For more information, refer to the code example.
  5. Save the files and view the updates on your PC.
    • If you’re testing locally, simply drag the index.html and project.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 index.html and project.html files, and then view it in your browser.

Here is the code which you need to modify to display your new portfolio or project images in the index.html page:

<div class="work-item">
    <figure class="main">
        <img src="assets/images/project-1.jpg" alt="">
    </figure>
</div>

Here is the code which you need to modify to display your new portfolio or project images in the project.html page:

<div class="work-item">
    <figure class="main">
        <img src="assets/images/project-2.jpg" alt="">
    </figure>
</div>