X3Photo Gallery Forums

Epic · 07 Jun 2016, 00:31

I tested my X3 on some really stupid people. They could not find the download button in the "arrow button" top right.

I added this:

<a href="http://www.epicphoto.co.za/render/w1280 ... ownload</a>

to the "Default Image Description" area but I have 2 issues.

I want a big ass button down there. How do I do that assuming I have a button picture in my root I wanna use.

And secondly the link opens in a new window and don't activate a download.

I added this to .htaccess

<FilesMatch "\.(?i:jpg|gif|png)$">
Header set Content-Disposition attachment
</FilesMatch>

but it refuses to download.

How can I do this?

Thanks in advance

07 Jun 2016, 05:31

Epic wrote:I want a big ass button down there. How do I do that assuming I have a button picture in my root I wanna use.

Why not use the button CSS class already enabled in X3? Using images for buttons is a bit backwards, and normally unfriendly to high-res retina devices.

<a class="button small">Download</a>

Epic wrote:And secondly the link opens in a new window and don't activate a download.

You can use the HTML5 "download" attribute, although it does not work in ALL browsers.

<a href="/path/{file_name_ext}" class="button small" target="_blank" download>Download</a>

Since it doesn't work for all browsers (yet), you need to keep target="_blank".
http://caniuse.com/#search=download

The only other solution to force a file to be downloaded, would be to use a PHP file proxy that routes the image and forces download. The url would be something like "download.php?image=path/to/image.jpg". Seems a bit unnecessary to pursue this ...

Epic wrote:I added this to .htaccess
<FilesMatch "\.(?i:jpg|gif|png)$">
Header set Content-Disposition attachment
</FilesMatch>

I can't say why it isn't working, but I would avoid this. In the code above, you are basically trying to set ALL requests to image files to download ... If it worked, it means it could break normal functionality when browser is loading images into a page or into the popup window.

Epic · 07 Jun 2016, 06:22

Awesome Karl!!!!!!

That is exactly what I wanted. I missed the button script you added.

Studio Graou · 07 Jun 2016, 17:33

Ce post est très intéressant car j'ai le même type de client, il faut un gros bouton download pour qu'ils comprennent.

J'ai ajouté le petit script dans .htaccess et ajouté
<a href="/path/{file_name_ext}" class="button small" target="_blank" download>Download</a>
dans Default Image Description.

Mon problème est le suivant: path ne fonctionne pas et je suis obligé de le remplacer par l'adresse du répertoire, c'est assez long car j'ai beaucoup de galeries client et ce serait bien si l'attribut path fonctionnerais correctement..

Merci

08 Jun 2016, 04:57

Studio Graou wrote:Mon problème est le suivant: path ne fonctionne pas et je suis obligé de le remplacer par l'adresse du répertoire, c'est assez long car j'ai beaucoup de galeries client et ce serait bien si l'attribut path fonctionnerais correctement..

To be honest, since there is already a download button for images, we never meant to integrate a dynamic method to create a download path for the image. I see now that it could be useful, so I will add a dynamic var {image_path} to next release. In the meantime, you need to use this javascript hack ... Add it to settings -> custom -> custom javascript:

function x3_load_page(){
  $('div.gallery.images').each(function(index, el) {
	var items = $(this).find('a');
	items.each(function(index, el) {
		var image_path = $(this).data('image'),
				title = $(this).find('h2.title'),
				description = $(this).find('p');
		if(title.length) {
			title.html(title.html().replace(/{image_path}/g, image_path));
			$(this).attr('data-title', $(this).attr('data-title').replace(/{image_path}/g, image_path));
		}
		if(description.length) {
			description.html(description.html().replace(/{image_path}/g, image_path));
			$(this).attr('data-description', $(this).attr('data-description').replace(/{image_path}/g, image_path));
		}
	});
});
}

Then you can use new {image_path} variable. For example:

<a href="{image_path}" class="button small" target="_blank" download>Download</a>

---

Pour être honnête, car il existe déjà un bouton de téléchargement pour les images, on n'a jamais voulu dire à intégrer une méthode dynamique pour créer un chemin de téléchargement de l'image. Je vois maintenant que cela pourrait être utile, je vais ajouter un var dynamique {image_path} pour la prochaine version. Dans l'intervalle, vous devez utiliser ce hack javascript ... Ajouter à paramètres -> personnalisé -> personnalisé javascript.

Studio Graou · 08 Jun 2016, 08:02

Je viens de tester, malheureusement ça ne fonctionne pas. Voici le lien que j’obtiens avec le hack:

http://galerie.studiograou.com/mariage/ ... ge_path%7D

alors qu'on devrais obtenir ceci pour télécharger l'image:

http://galerie.studiograou.com/content/ ... _A_017.jpg

08 Jun 2016, 12:22

Sorry, try this:

function x3_load_page(){
  $('div.gallery.images').each(function(index, el) {
   var items = $(this).find('a');
   items.each(function(index, el) {
      var image_path = $(this).data('image'),
            title = $(this).find('h2.title'),
            description = $(this).find('p');
      if(title.length) title.html(title.html().replace(/{image_path}/g, image_path));
      $(this).attr('data-title', $(this).attr('data-title').replace(/{image_path}/g, image_path));
      if(description.length) description.html(description.html().replace(/{image_path}/g, image_path));
      $(this).attr('data-description', $(this).attr('data-description').replace(/{image_path}/g, image_path));
   });
});

Studio Graou · 08 Jun 2016, 18:14

Merci Karl, ça fonctionne parfaitement, voici juste une toute petite correction

function x3_load_page(){
  $('div.gallery.images').each(function(index, el) {
   var items = $(this).find('a');
   items.each(function(index, el) {
      var image_path = $(this).data('image'),
            title = $(this).find('h2.title'),
            description = $(this).find('p');
      if(title.length) title.html(title.html().replace(/{image_path}/g, image_path));
      $(this).attr('data-title', $(this).attr('data-title').replace(/{image_path}/g, image_path));
      if(description.length) description.html(description.html().replace(/{image_path}/g, image_path));
      $(this).attr('data-description', $(this).attr('data-description').replace(/{image_path}/g, image_path));
   });
});
}

07 Sep 2016, 13:05

Important! The fix previously posted in this thread, is now a native feature since X3 Release [0.19]. You should be able to entirely remove the custom javascript code from your settings -> custom -> custom javascript. We have added native support for both {path} and {image_path} in image titles, descriptions and links.

{image_path}
Will be replaced by the file-path to the current image, for example /content/2.gallery/4.photos/image.jpg.

{path}
Will be replaced by file-path to the current folder, for example /content/2.gallery/4.photos/.

Variables that already existed prior to X3 Release [0.19]:

{file_name_ext}
Will be replaced by current image name, for example image.jpg.

{file_name}
Will be replaced by current image name without extension, for example image.

X3Photo Gallery Forums

Download Button Topic is solved 9 posts

Download Button

Re: Download Button

Re: Download Button

Re: Download Button

Re: Download Button

Re: Download Button

Re: Download Button

Re: Download Button

Re: Download Button Topic is solved