Search…

X3 Photo Gallery Support Forums

Search…
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Downloading pop-up image on mobile not working?

21 Nov 2018, 03:46

Hi, my first post here. It is an excellent gallery thanks.

* just tested, the button would not download directly in IE either. Searched throught network but have not find a solution...

In my application, I may open the gallery to my clients, so they can download the imgaes freely. Now the safari in iOS12 has 3D touch, which can download an image  (in pop-up mode, which is in photoswipe scripts I think) file quite easily. However, this is limited with an image file in the html, not embedded in CSS. So long-tap would not work any more.

Yes, I found there is a 'download' button setting, and the trick to put some code into description field to add the button. It works on my PC/Chrome perfectly: click it, and the image downloaded. However, on my test in Safari in iOS12, clicking the download button would open a new tab, then you can long-tap, and save it in the phone.

So here are some question:

1, Is there any way to properly insert some codes, by clicking the download button on mobile, it simply saves the image into phone picture app?

2, Or even better, can we find a way to release the image out of CSS, or by all means, long-tap/3D touch can save a pop-up image directly to the phone?

3, This may ask too much... is it possible to 'select' multiple images in thumbnail view, then click download and get all of them? Not necessarily via a zip file because I don't think iOS platform likes it, but save in batch would help a lot.

In all, I plan to use the gallery as a delivery platform, so after an events, my guests can view and download the images by themselves. Of course the imgage will not be huge or it can be very slow.

Any comment is welcomed. Thanks!

Leon
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Downloading pop-up image on mobile not working?

21 Nov 2018, 07:36

ok I think I figured it out.

It is in the photoswipe. Two points.

Firstly in CSS, -webkit-touch-callout: none stops the callout menu.

Secondly in JS, 
Code
isClickableElement: function(el) {
    return el.tagName === 'A';
}
The option isClickableElement function allow only A tag to be clickable, that's why IMG tag will never be clicked. I tried to modify it 
Code
isClickableElement: function(el) {
    return el.tagName === 'A' || el.tagName === 'IMG';
}
I will work, safari can save the image, however, the background - which is the thumbnails, will be able to moved along with touch as well. Not nice way to do it.

 While iOS safari does not support download attribute in A tag, so button is  a no-go either.

I think for now, there is no perfect solution for mobile devices easily downloading the image. :(
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Downloading pop-up image on mobile not working?

21 Nov 2018, 09:01

Although I am not 100% sure what you are trying to achieve, essentially, there are two elementary points to make here:

1. Photoswipe
As you may know, we use Photoswipe at the core of the X3 popup. Since Photoswipe needs to hijack multiple touch gestures (zoom/swipe) on the popup image, it also needs to block the context-menu (which normally displays a "download" link when you touch and hold on an image for a short while) using CSS "-webkit-touch-callout: none" ... As you already figured out. This is just how Photoswipe works, and although I don't have a reference here right now, I can remember reading why it had to be like that. One could overwrite the CSS, but I believe that would be counter-productive.

That code you are referring to in your second post, is about selecting specific tags that are OVERLAYING photoswipe, that will block touch behavior on Photoswipe. It should only be used strictly when necessary though ... By default, it is applied to only A <a> tag, which blocks all swipe/touch events from affecting photoswipe when you move finger over a link. If you apply it to more tags (or the image itself), you are ultimately blocking photoswipe touch/swipe behavior.

2. Download button
Thus, because it's not easy to download an image from mobile/touch devices in the popup, there is a "download" button option in the sharing dropdown AND an option to add an even more obvious "download" button directly in the caption. The download buttons uses an attribute "download", which is supported by almost all browsers, except IE11 and some iOS browser. See list of supported browsers:
https://caniuse.com/#feat=download

Thus, in browsers that do not support the download-attribute, the image will open in new tab where the visitor can easily download the image from tapping the image (opening the context menu > download), or just clicking the native share icon in browser where they can save to photos. Not perfect, but then again, it is a logical workaround, which is only required for those few browsers that do not support the download attribute. Also, statistically, most users who want to download many images would normally be doing it from their desktop device.

The final solution would be to create a simple PHP script download.php?image=path/image.jpg, which could force-download a file. A bit clumsy just to support a few browsers, and would need to be secured.
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Downloading pop-up image on mobile not working?

21 Nov 2018, 09:37

Thanks for the quick reply mjau. My purpose is to provide an easy interface for the user to download images. I am a photographyer, after each events, I generate hundreds of images, and I will put them online, so the guests can help themselves to download maybe, only a few they like, on their phones.

A preferred way is long-press the pop-up image and save. However photoswipe makes it quite difficult. I am quite sure that removing '-webkit-touch-callout: none' alone would not fix it, instead, the img tag needs to be unblocked...

However, there is one browser, that can extract the image, even with standard photoswipe configuration. It is a mystery and I have no idea how they achieve it.

click download button - open a new tab - then save it, well it is a workaround, but I am just afraid I would recieve quite a lot of complaints from my customer... so I try to seek a one-step solution. PHP is possible, is javascript would do? Just searched around, something like this?
Code
<a href="javascript:void(0);"
 onclick="document.execCommand('SaveAs',true,'file.html');"
 >Save this page</a>
 mobile devices is a trend, and I believe in the near future more apps will be optimized for them. Maybe photoswipe will improve to adapt? Or maybe Safari on iOS simply accept the download in <a> tag...
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Downloading pop-up image on mobile not working?

21 Nov 2018, 12:59

littlelio wrote:A preferred way is long-press the pop-up image and save. However photoswipe makes it quite difficult. I am quite sure that removing '-webkit-touch-callout: none' alone would not fix it, instead, the img tag needs to be unblocked...
I tried and it works in iOS Chrome, but not in iOS Safari:
Code
.pswp__img {
  -webkit-touch-callout: default !important;
}
Really not sure about "unblocking" the IMG tag. There are reasons why events need to pass through interface elements down to photoswipe so that swipe gestures can apply (which always start with a touch). Maybe. Here are some interesting threads, probably the second one might be a good lead:
https://github.com/dimsemenov/PhotoSwipe/issues/1216
https://github.com/dimsemenov/PhotoSwipe/issues/99
littlelio wrote:A preferred way is long-press the pop-up image and save.
I would prefer a download "button" as faster and more accessible than a "long-press" procedure, but of course it's not elegant if the file has to open in a new tab first. It works though, and statistically, it would be less than 10% of visitors that don't support the "download" attribute, which is the "modern" and clean way forwards.
littlelio wrote:However, there is one browser, that can extract the image, even with standard photoswipe configuration. It is a mystery and I have no idea how they achieve it.
You mean a browser on iOS?
littlelio wrote:
Code
<a href="javascript:void(0);"
 onclick="document.execCommand('SaveAs',true,'file.html');"
 >Save this page</a>
Surely a dead-end. Explorer-only method, and will certainly not work in iOS, which is strict for reasons.
littlelio wrote:mobile devices is a trend, and I believe in the near future more apps will be optimized for them. Maybe photoswipe will improve to adapt? Or maybe Safari on iOS simply accept the download in <a> tag...
I do think it's strange that the Photoswipe github issue links are not explained by the author. It is possible Safari will accept the download attribute, as modern HTML5 is the way forward for most browsers. However, this is all part of iOS security, and there really doesn't exist "download" like it exists on other devices.
littlelio wrote:PHP is possible, is javascript would do?
And some quick research showed me that PHP will not help on iOS, because there simply isn't any "download" in iOS. You can "save to photos" as an iOS-specific feature, but you simply can't download files like you can on most other devices..

I really can't make any great suggestions in regards to making it work perfectly on iOS. You can try to hack a bit more at Photoswipe JS/CSS, but it will require effort and end result will be "hacky". Personally, I would add the iOS Chrome fix I referenced up top, and just accept that a small percentage of the visitors will have to open the image in new tab before downloading it.
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Downloading pop-up image on mobile not working?

24 Nov 2018, 01:55

There is a web browser called 'QQ browser', which is popular here in China. A very popular social app in China, called 'Wechat', from the same company Tencent, use the QQ browser as the internal web page viewer. Inside this browser, long-tap the image in photo gallery, and it will show a context menu including the 'save as' option. Maybe it is not that special, the important thing is that the links will be mostly shared via this Wechat app, so a click will bring the user to the page directly.

There are also other platform shows the same function, but since they are not using photoswipe, it is different story. But so far, I think X3 is fantastic, and there should be always a way to find a walkaround. Thanks a lot.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Downloading pop-up image on mobile not working?

24 Nov 2018, 06:14

How QQ browser manages to show the touch callout menu, I don't know, but likely it's javascript engine doesn't work the same as other browsers. Also not sure why the "-webkit-touch-callout: default" fixes it for Chrome, but not for Safari. To conclude, I am not sure why Photoswipe has to block this event, unless there are some reasons I am not aware of ... I will perhaps look further into it at some point.
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Downloading pop-up image on mobile not working?

26 Nov 2018, 08:03

That's the fun part of coding a website: you will never know what the client browser is, or behaves...

photoswipe is a quite rogust API, but there are too many applications, for example, blocking the downloading or encouraging the downloading action are complete two extremeends. We really need to have an open mind when developing anything...