Knowledge Base

Browse through our expansive online help documentation.

Adding Media to the Portfolio in Dynamic

Dynamic 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/portfolio 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="col-xs-10 col-sm-9 col-md-3 image-thumb coolfx fadeInUp data-coolfx-delay=0.5s">
<a class="popup-gallery" href="include/images/portfolio/image.jpg"> <img src="include/images/portfolio/thumbnail.jpg"> </a> </div>

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

<div class="col-xs-10 col-sm-9 col-md-3 image-thumb coolfx fadeInUp data-coolfx-delay=0.5s">
    <a class="popup-gallery" href="include/images/portfolio/image.jpg">
        <img src="include/images/portfolio/thumbnail.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/portfolio 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="col-xs-10 col-sm-9 col-md-3 image-thumb coolfx fadeInUp data-coolfx-delay=0.5s">
    <a class="popup-youtube" href="http://www.youtube.com/url">
        <img src="include/images/portfolio/thumbnail.jpg">
    </a>
</div>

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

<div class="col-xs-10 col-sm-9 col-md-3 image-thumb coolfx fadeInUp data-coolfx-delay=0.5s">
    <a class="popup-youtube" href="http://www.youtube.com/url">
        <img src="include/images/portfolio/thumbnail.jpg">
    </a>
</div>

If you are using a Vimeo video, change the class name to .popup-vimeo when linking the URL in the previous code example.