Displaying an alternate image
From PixyWiki
There are a number of occasions when you might want to display a secondary or alternate image for an entry.
- You may want to display a version of the image before any post processing.
- You may want to offer your viewers an alternate version of the image to get their opinion on which is better.
For whatever reason, this is a feature which has been requested a number of times and hopefully this article will explain a couple of way you can achieve this with PixyBlog.
The Idea
Because we don't want these 'alternate' images to be included in the galleries, search etc. we're going to upload them separately using the File Uploads. This will mean you will have to resize the image to the desired dimensions before you upload it. We're then going to link the uploaded file to the entry using the Reference Text #1 field which you can find at the bottom of the New Entry page (you will have to expand the Advanced Settings to see it). Simply enter the filename of the alternate image file you uploaded into the Reference Text #1 field and save the entry.
We're now ready to edit your page templates to either show the alternate image on the same page (which we will use some Javascript for), or we can create a separate page template just for displaying alternate images. Both methods are explained below.
Displaying an alternate image on the same page (using Javascript)
On the page where we display the main image, we're going to add some text which when you rollover will display the alternate image in-place of the original image. There's a working example of this here.
To do this we are going to need to add some Javascript into the <head> tag of your page, so edit your _header page template and add the following:
<Script Language=JavaScript>
<!--
function preloadImage(imgSrc) {
if (document.images) {
preload_image = new Image(800,533);
preload_image.src=imgSrc;
}
}
function swapImage(imgSrc) {
document.photo.src = imgSrc;
}
//-->
</Script>
The above assumes there is one image in your page which has the name attribute as "photo", e.g:
<img src="http://www.woklife.com/photo/gen/800/001-015794.jpg" width="800" height="533" name="photo" alt="bang_tao-beach-boat">
There are two functions; one to pre-load the alternate image, and one to swap the images.
Now we need to add the rollover text and two function calls; one to the preloadImage() function, and the other to swapImage() function. We'll put this in the _day template below where the image is displayed.
#if(!$utils.isEmpty($entry.reference1))
<script type="text/javascript">
window.onload = function() {preloadImage('$url.home/resource/$entry.reference1');}
//--!>
</script>
<p><em><a href="#" onmouseover="swapImage('$url.home/resource/$entry.reference1');" onmouseout="swapImage('$url.photo($entry.image.preview.path)');">View the original, unprocessed version of this image</a></em></p>
#end
NOTE: this works for entries with one image, but there may be problems if you use this method with multiple images per entry. This is because the swapImage() function is rather simple and in its current state only changes a single image on the page.
Displaying an alternate image in a new page
Very similar to the Javascript way, but with no Javascript and the image will be displayed on it's own page. There's a working example online here.
To do this we're going to pass the filename of the alternate image as a querystring parameter which we can then get on the new page. The idea is to create a link similar to this:
http://www.yourwebsite.com/page/Alternate?resource=IMG_235499.jpg
We can do this by editing the _day template and adding the following after the image (or in the _popupcomments if you prefer):
#if(!$utils.isEmpty($entry.reference1))
<p><em><a href="$url.page('Alternate')?resource=$entry.reference1">View the original, unprocessed version of this image</a></em></p>
#end
We now need to create a new page template which we'll base on the existing Blog template, so copy the contents of your Blog page template and create a new page template named Alternate. You can then paste the contents of your Blog into the new page template, and remove the parts about the $pager, you should end-up with something similar to this:
#includeTemplate($model.weblog "header")
<div id="Content">
</div>
<script type="text/javascript">
window.onload = function() {fadeIn('photo');window.name='main';}
</script>
#includeTemplate($model.weblog "footer")
To get the resource querystring parameter, add the following below the header" include:
#set($resource = $model.getRequestParameter('resource'))
We now have the filename of the alternate image to display, so let's add the <img> tag:
#includeTemplate($model.weblog "header")
<div id="Content">
#set($resource = $model.getRequestParameter('resource'))
<div class="entry">
<div class="entryimage">
<img src="$url.resource($resource)" alt="$resource" style="display:none;">
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {fadeIn('photo');window.name='main';}
</script>
#includeTemplate($model.weblog "footer")
That should be it. But if you like, you can further add a back link and the rollover tooltip text like so:
#includeTemplate($model.weblog "header")
<div id="Content">
#set($resource = $model.getRequestParameter('resource'))
<div class="entry">
<div class="entryimage">
<a href="javascript:history.back(1)"><img src="$url.resource($resource)" alt="$resource" style="marign:auto;border:1px solid #999;padding:10px;background-color:#ccc;" id="tip_trigger_$resource" style="display:none;" name="photo"></a>
<div id="tip_$resource" class="popupimg" style="display:none;">
<div class="popupcontent">
<div class="popupsummary">Click for previous photo</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
new Tooltip('tip_trigger_$resource', 'tip_$resource')
//]]>
</script>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {fadeIn('photo');window.name='main';}
</script>
#includeTemplate($model.weblog "footer")