Search code examples
phphtmlgallerymodx-revolution

MODx Gallery not displaying images correctly


I have recently set up a website using MODx Revolution. I am attempting to make a gallery, using the plugin of the same name. I would like it so that you can click a link, which displays the original image, as it was uploaded. Here is the code for my gallery page:

<div class="ContentHead">[[*longtitle]]</div>
<p>This page contains galleries of various images I have taken or made. Each has a description, so feel free to browse. Clicking thumbnails will reload the page, and may take some time to load a larger version of the image - but it will get there!</p>

<p>[[!Gallery? &toPlaceholder=`gallery`]] [[!GalleryItem? &imageWidth=`900` &imageHeight=`900`]] [[!GalleryAlbums? &prominentOnly=`0` &limit=`0` &rowTpl=`galAlbumRowTplCustom` &toPlaceholder=`galleries`]]</p>

<div align="center">| [[+galleries]]</div>
<hr />
<p><a name="largeImage"></a></p>
<p> </p>

<p>[[!+galitem.image:notempty=`</p><div class="image"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /><br/>[[+galitem.description]]<br />Albums: [[+galitem.albums]] <br />Tags: [[+galitem.tags]]<br/><a href="[[!+galitem.image]]">View original image</a><hr /></div> <p>`]] 

[[!+gallery:notempty=`</p><div ><h1 style="font-size: 20px; font-weight: bold; font-family: Calibri;">[[+gallery.name]]</h1><h2 style="font-size: 18px; font-weight: normal; font-family: Calibri;">[[+gallery.description]]</h2><p> </p><h2 style="font-size: 18px; font-weight: normal; font-family: Calibri;">[[+gallery]]</h2> </div>`]]

<div style="height:600px"><!--This ensures that when a thumb is clicked, the gallery isn't pushed below the footer.--></div>

The code that is causing the problems is:

<a href="[[!+galitem.image]]">View original image</a>

which generates the following (example) url:

http://www.reflectric.com/assets/components/gallery/connector.php?action=web/phpthumb&w=900&h=900&zc=0&far=&q=90&src=http%3A%2F%2Fwww.reflectric.com%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F3%2F28.bmp

If you follow it (go ahead, try it!) on Internet Explorer (tested on 6 and 9), it shows the image just fine. On every other browser i've tested, however, it gives the same as you would get from loading the image in notepad++ or another text editor.

doing "Right-click Save As" on the image causes the php redirect to be saved, rather than the image, and "Right-click view image" gives the same as the link above.

Therefore, I am asking either a) is there a way to fix this, or b) is there a way to link to the image directly, instead of going via the php page?

Thanks for any help you can give,

Simon


Solution

  • It seems like your MIME-type configuration is incorrect. The PHP-script connector.php should tell browser that the currently served URL is an image.

    However, if you use Firebug (or Chrome Dev / Safari Dev etc) and check your response type, it will give you:

    HTTP/1.1 200 OK
    Date: Mon, 18 Jul 2011 09:11:37 GMT
    Server: Apache
    X-Powered-By: PHP/5.2.17
    Expires: Thu, 19 Nov 1981 08:52:00 GMT
    Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
    Pragma: no-cache
    Vary: Accept-Encoding
    Content-Encoding: gzip
    Keep-Alive: timeout=10, max=29
    Connection: Keep-Alive
    Transfer-Encoding: chunked
    Content-Type: text/html      <===================== INCORRECT!
    

    Content-type "text/html" is not what you want to serve, but that is what the server/php-script gives.

    Check your Apache (if that's what you fancy) configuration OR, if you're using a web hosting, your .htaccess-file.

    AddType image/jpg .jpg
    

    Similar configuration exists for other webservers (nginx, lighttpd, cherokee...) as well. If it didn't work you can tweak the connector-script (haven't checked its source) to force a MIME-type. Discussed in Show image in php script

    (I realize that is was over a month since you posted this question, but since it wasn't marked as solved I hope this will help you or someone else)