Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 11298
Joined: 30 Sep 2006, 07:37

TUTORIAL :arrow_down: Create dynamic image download links in X3

18 Feb 2017, 09:45

There is already an image download button available in X3 [screenshot], but perhaps you would like to achieve one or more of the following:
  • Improved visibility for download-buttons.
  • Download buttons available directly from within the gallery layout for each image.
  • Download buttons available only for specific gallery pages.
  • Option to download original full size images.
Example of images with custom download-button:
Image

Luckily, X3 is very flexible and allows you to create dynamic image links.
  1. From your panel, navigate to the page where you want to add download buttons.
  2. In page settings, click the "image" tab.
    Image
  3. In the "Default Image Description" field, add the following html:
    Code
    <a class="button small" href="{image_path}" target="_blank" download><i class="fa fa-arrow-down"></i>&nbsp;&nbsp;Download</a>
    The above is the code for a normal html link, except the {image_path}, which instructs X3 to dynamically populate the correct image into the HREF attribute. Also notice the download attribute, which tells modern browsers to download the file instead of opening it in a new window. You can carefully edit anything else at will.
  4. Next, navigate to the page settings "gallery" tab, scroll down and make sure you have enabled descriptions in image captions:
    Image
    * You might want to select "Caption Hover" so that the buttons only show when mouse cursor is over images.
  5. Test the page!
Optional
If you don't want the button as a caption OVER the image, you can instead show descriptions directly beside each image.
Image
  1. Disable "image captions" from point 4 above.
  2. On same page, scroll up and make sure "description" is available in your gallery items.
    Image
    * You can use most layout combinations (except justified).
Only show download button in popup
Perhaps you only want the download button to be available once the image is clicked and viewed from popup? Simply disable gallery captions and remove "description" from gallery items. Now, only the popup window will show the download-button:
Image

Download high-resolution images
By default, the download link points to the original uploaded image, which in most cases is large but web-friendly. If you want the download buttons to download the original, non-resized high-resolution images, follow these steps:
  1. In your gallery page, create a NEW subfolder "_large". You can call the folder whatever you want, but in this example, we use "_large" with _underscore to emphasize that it is a hidden folder.
  2. Upload the same images into this folder, but without resizing them (upload the originals). It is important that the images in this subfolder have the SAME NAME as in the parent gallery folder.
  3. For your dynamic image links in the parent gallery folder, change the code:
    Code
    <a class="button small" href="{path}_large/{file_name_ext}" target="_blank" download><i class="fa fa-arrow-down"></i>&nbsp;&nbsp;Download</a>
    * Notice how we change the HREF value to {path}_large/{file_name_ext}. This instructs X3 to generate a download-link from the PATH to current folder, with new _large/ subfolder appended, and get the same file name.