Knowledge Base

Browse through our expansive online help documentation.

View Categories

Adding Media to the Portfolio in Sub-Zero

Sub-Zero uses a third-party tool – Magnific Popup – for displaying your portfolio items as popups. By default, we provide you with the ability to link images and videos in the template. If you would like to link other items, please refer to the Magnific Popup documentation.

Linking Popup Images

To link popup images, you will need to provide a thumbnail of your image as well as a larger version of the image on your server. You can start by following 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 applicable HTML file in your code editor.
  3. Type the directory/folder path for the thumbnail and image.
  4. Save the file and view the changes in your web browser.

Here is the code which you need to modify to link a new thumbnail image:

<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
    <a class="popup" href="include/images/image@2x.jpg">
        <span class="project-hover">
            <span>Alpha
                <b>Product Photography</b>
            </span>
        </span>
        <img src="include/images/thumbnail@2x.jpg">
    </a>
</div>

Here is the code which you need to modify to link a new portfolio image:

<div class="desktop-four columns tablet-six columns mobile-six columns mix photo project-item">
    <a class="popup" href="include/images/image@2x.jpg">
        <span class="project-hover">
            <span>Alpha
                <b>Product Photography</b>
            </span>
        </span>
        <img src="include/images/thumbnail@2x.jpg">
    </a>
</div>

Linking Popup Videos

Linking videos in the popup is very similar to linking images but with a slight modification. You can start by following these instructions:

  1. Add your custom thumbnail image 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 applicable HTML file in your code editor.
  3. Choose the video file you wish to link from YouTube, Vimeo, etc.
  4. Copy the video’s URL and paste it into the href attribute.
  5. Save the file and view the changes in your web browser.

The popup does not play video when viewing the files locally on your hard drive. You will need to upload it to your server.

Here is the code which you need to modify to link a new thumbnail image:

<div class="desktop-four columns tablet-six columns mobile-six columns mix video project-item">
    <a class="popup-youtube" href="http://www.youtube.com/url">
        <span class="project-hover">
            <span>Beta
                <b>YouTube Videos</b>
            </span>
        </span>
        <img src="include/images/thumbnail@2x.jpg">
    </a>
</div>

Here is the code which you need to modify to link a new video URL:

<div class="desktop-four columns tablet-six columns mobile-six columns mix video project-item">
    <a class="popup-youtube" href="http://www.youtube.com/url">
        <span class="project-hover">
            <span>Beta
                <b>YouTube Videos</b>
            </span>
        </span>
        <img src="include/images/thumbnail@2x.jpg">
    </a>
</div>

Linking SoundCloud Audio

Linking SoundCloud audio files in the popup is a bit more involved. You can start by following these instructions:

  1. Add your custom thumbnail image 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 applicable HTML file in your code editor.
  3. Choose the audio file you wish to link from SoundCloud.
  4. Copy the src attribute within code snippet available under the “Embed” tab in the “Share” popup.
  5. Paste the audio’s src attribute into the href attribute in the code. Alternatively, you can paste the src attribute into a new HTML file (e.g. audio-file.html) and use this link within the href attribute.
  6. Save the file and view the changes in your web browser.

The popup does not play audio when viewing the files locally on your hard drive. You will need to upload it to your server.

Here is the code which you need to modify to link a new thumbnail image:

<div class="desktop-four columns tablet-six columns mobile-six columns mix audio project-item">
    <a class="popup-soundcloud" href="https://w.soundcloud.com/player/url">
        <span class="project-hover">
            <span>Gamma
                <b>Audio</b>
            </span>
        </span>
        <img src="include/images/thumbnail@2x.jpg">
    </a>
</div>

Here is the code which you need to modify to link a new audio URL:

<div class="desktop-four columns tablet-six columns mobile-six columns mix audio project-item">
    <a class="popup-soundcloud" href="https://w.soundcloud.com/player/url">
        <span class="project-hover">
            <span>Gamma
                <b>Audio</b>
            </span>
        </span>
        <img src="include/images/thumbnail@2x.jpg">
    </a>
</div>

Media Data Filters

Remember to adjust the data-filter in the .filter class and the filter name (i.e. photo, illustration, video, etc.). In the following example, the audio filter has been applied to the .filter class in the HTML file.

<div class="desktop-four columns tablet-six columns mobile-six columns mix audio project-item">

These changes are necessary so that when a user clicks a link in the portfolio section, the filter sorts and displays the correct portfolio detail (i.e. all photos, all illustrations, etc).