Phantom 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="four columns medium-six columns small-twelve columns fade-it">
    <div class="portfolio-thumbnail portfolio-box">
        <a class="popup-gallery" href="include/images/image.jpg">
            <img src="include/images/thumbnail.jpg">
            <div class="caption-portfolio">
                <h3 class="title-portfolio">Alpha
                    <span class="category-portfolio">Video Production</span>
                </h3>
            </div>
        </a>
    </div>
</div>

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

<div class="four columns medium-six columns small-twelve columns fade-it">
    <div class="portfolio-thumbnail portfolio-box">
        <a class="popup-gallery" href="include/images/image.jpg">
            <img src="include/images/thumbnail.jpg">
            <div class="caption-portfolio">
                <h3 class="title-portfolio">Alpha
                    <span class="category-portfolio">Video Production</span>
                </h3>
            </div>
        </a>
    </div>
</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="four columns medium-six columns small-twelve columns fade-it">
    <div class="portfolio-thumbnail portfolio-box">
        <a class="popup-youtube" href="http://www.youtube.com/url">
            <img src="include/images/thumbnail.jpg">
            <div class="caption-portfolio">
                <h3 class="title-portfolio">Beta
                    <span class="category-portfolio">Video Production</span>
                </h3>
            </div>
        </a>
    </div>
</div>

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

<div class="four columns medium-six columns small-twelve columns fade-it">
    <div class="portfolio-thumbnail portfolio-box">
        <a class="popup-youtube" href="http://www.youtube.com/url">
            <img src="include/images/thumbnail.jpg">
            <div class="caption-portfolio">
                <h3 class="title-portfolio">Beta
                    <span class="category-portfolio">Video Production</span>
                </h3>
            </div>
        </a>
    </div>
</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="four columns medium-six columns small-twelve columns fade-it">
    <div class="portfolio-thumbnail portfolio-box">
        <a class="popup-soundcloud" href="https://w.soundcloud.com/player/url">
            <img src="include/images/thumbnail.jpg">
            <div class="caption-portfolio">
                <h3 class="title-portfolio">Gamma
                    <span class="category-portfolio">Audio Production</span>
                </h3>
            </div>
        </a>
    </div>
</div>

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

<div class="four columns medium-six columns small-twelve columns fade-it">
    <div class="portfolio-thumbnail portfolio-box">
        <a class="popup-soundcloud" href="https://w.soundcloud.com/player/url">
            <img src="include/images/thumbnail.jpg">
            <div class="caption-portfolio">
                <h3 class="title-portfolio">Gamma
                    <span class="category-portfolio">Audio Production</span>
                </h3>
            </div>
        </a>
    </div>
</div>