X3Photo Gallery Forums

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:


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.
   
3. In the "Default Image Description" field, add the following html:
   Code Select all

   <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:
   
   * 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.

1. Disable "image captions" from point 4 above.
2. On same page, scroll up and make sure "description" is available in your gallery items.
   
   * 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:


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 Select all

   <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.

raffi wrote:I don't have the regular download button, does it mean we have disabled in the past ?
even if my last entry is present 

Code Select all

    {
      "id": "download",
      "icon": "download",
      "label": "Download",
      "url": "{{raw_image_url}}"
    }

This is because you have set "Block image downloads" in Settings > Advanced, which simply blocks all image downloads. Why would you want to enable image downloads globally, yet block downloads Settings > Advanced? Both are global settings, and you will either block downloads or not.

With the options in this post, it is possible to allow downloads for SOME folders.

raffi wrote:And trying to follow you explanation : I don't have the "Image" tab in my X3.27.6 !?  Strange.

Sorry, options under "image" tab were moved to Gallery > Captions > Caption Defaults, because they are caption-related for the entire gallery/page.

raffi wrote: If I remove the global disallow for downloading pictures, then I can see the download button as expected, but my goal is :

• to disallow download from the public galerie, 
• and allowing download in private galerie only.

But this definitely is not the way to do it. Blocking downloads will BLOCK ALL DOWNLOADS. Even if you managed to ENABLE downloads in the sharing toolbar, what would be the point of that if you are trying to block downloads? These are global settings, and have nothing to do with password-protected pages.

raffi wrote:In the past you helped me to make this configuration possible, and as far I remember it was a custom code you injected to my X2.

Mmm, perhaps it was something similar? There is no way to automatically add download buttons for password-protected pages, even with custom javascript ... The password mechanism is server-side, but the page itself (once served to visitor after login) is just normal.

In this post, you will find a way to add custom download-button on a per-gallery basis. You can just copy-paste the code, and would only take a few seconds. It would have to be done manually for all folders where you want to include a download button, but it wouldn't take you too long.

raffi wrote:If you want to have a look, you have my login/pass in your MP.

Not sure what you want me to do :) I can't automatically add download buttons for any page you password protect.

raffi wrote:Do you mean this code ? in "Default Image Description" field 

Code Select all

<a class="button small" href="{image_path}" target="_blank" download><i class="fa fa-arrow-down"></i>&nbsp;&nbsp;Download</a>

Yes. It will display in the popup, and also in the gallery layout if you enable descriptions in a layout that supports descriptions.

raffi wrote:Because I added the code on a protected page, and download item won't be displayed unless I disable the global blocking option.

Not possible, as the the global blocking option has nothing to do with custom added links. For sake of reference, here is my test with download blocked, but with download link added (as per this post):



I logged in to your website to check what was going on. First of all, you have global settings > Popup > CAPTION disabled. Since the download button is part of the popup caption, you can't disable caption and have download button appear in the caption at the same time. You would have to enable captions at least for the pages where you want the download button.

Then I also remembered that there is already a "download button" option for popup caption settings, so you wouldn't need to use the tutorial in this post. You need to enable popup caption and the "download button" for any gallery you want the download button to appear.


Here is working example. Click a popup:
https://www.photographe-mariage.fr/portfolio/karltest/

You can still use the method explained in this post if you want the download button to display in the actual gallery layout, and not only the popup.

raffi wrote:How can I change "Download" name to set it in french in the actual configuration ? 

Go to Settings > Popup, temporarily enable "show caption" and "download button", input your own choice of TEXT for the download button. Before you click SAVE, you can un-check "show captions". It will still save the download-button text, available for the pages where you have specifically enabled it.