Search code examples
.htaccessmodxcontent-dispositionmodx-evolution

Content disposition link conflict

I use MODx Evolution and I included into my htaccess file the following:

<IfModule mod_headers.c>
    <FilesMatch "\.jpg$">
      Header append Content-Disposition "attachment;"
    </FilesMatch>

    <FilesMatch "\.jpeg$">
      Header append Content-Disposition "attachment;"
    </FilesMatch>

    <FilesMatch "\.png$">
      Header append Content-Disposition "attachment;"
    </FilesMatch>
</IfModule>

I have a download button for each image that can be downloaded, like this: 

<div class="box download-box">
                        <a class="button" href="[*template-variable-image*]">Download</a>

The above code works perfectly.

Now I've added another button for users to see the image in full scale in a separate browser tab with this code: 

<h2 class="thumb-caption"><span data-href="[*template-variable-image*]" target="_blank">PREVIEW</span></h2>

Now when the user clicks "PREVIEW" the content disposition attachment box appears for download. How can I get the "PREVIEW" to show the preview of the image the way I planned and NOT the content download box???

Solution

  • This is more a HTML than a MODX question. A lot of modern browsers know the download attribute in the a tag.

    So throw away the .htaccess additions and use

    <a class="button" href="[*template-variable-image*]" download>Download</a>

    You could also use javascript for this and catch all browsers. John Culviner has written a nice jQuery plugin jquery-file-download for this.