Download Link for Image Files

This has been addressed in a few other places in a few different ways, but I'm stumped as to why I can't get it to work with our setup. We're using Featherlight as a lightbox for our image files on show.php, but we'd also like to include a download link under each image file (or somewhere on the page at least) so users can download the original size file as well. I've tried echoing metadata('file', 'uri') but it doesn't seem to be working right (I'm getting the "A current file variable has not been set to this view" error), so it probably has to do with looping the files properly. Any assistance is appreciated. Full code for show.php is below, we're using a really stripped down version of the Starter theme. Thanks!

<?php queue_js_file('featherlight', 'javascripts/vendor'); queue_css_file('featherlight'); ?>
<?php echo head(array('title' => metadata('item', array('Dublin Core', 'Title')),'bodyclass' => 'item show')); ?>
<style>
	img {width:67%; }
</style>
<div class="container">
	<div class="row">
		<div class="col-md-6">
			<?php if (metadata('item', 'has files')): ?>
			<div id="itemfiles" class="element">
	    		<p>Click on an image to open up a larger version.</p>
	    		<?php echo files_for_item(array('imageSize' => 'fullsize', 'linkAttributes' => array('data-featherlight' => 'image'))); ?>
			</div>
			<?php endif; ?>
		</div>
		<div class="col-md-6">
			<h1>Metadata</h1>
			<?php echo all_element_texts('item'); ?>
		</div>
	</div>
</div>

<?php echo foot(); ?>

Exactly right that it's about looping the files. The pattern you are using, metadata('file', 'uri') assumes that a loop called 'file' has been set up in the view. files_for_item gets around that by directly passing the array of files to the code that generates the markup.

What you are aiming for is surprisingly tricky...listing out the files as you doing them, and listing out links to the originals are both easy taken separately. Doing them together in the container for the lightbox is a combination that runs into lots of little complicating details.

The most straightforward thing to do might be to go to some of the Omeka functions that don't build as much of the HTML automatically, and do a loop in your show page that build more of the HTML itself.

So, instead of using files_for_item, this approach uses file_image, which doesn't build as much of the HTML that wraps the image, and combines it with your approach of using metadata. The expense is that you'll have to build lots of the wrapping html around the images you need yourself in the theme file.

Sketching out the basic approach looks something like this pseudocode (I haven't directly tested this)

foreach($item->Files as $file):
// generate the wrapping html, and the image itself
<a>
echo file_image('fullsize', array(), $file); // just the <img> tag
</a>

<a href="<?php echo metadata($file, 'uri'); ?>"><?php echo __('Original'); ?></a>

endforeach;

That removes all the markup that files_for_item gives you, but lets you insert that link to the original where it sounds like you want it.

Hope that helps

Thanks. Here is what I came up with:

<?php queue_js_file('featherlight', 'javascripts/vendor'); queue_css_file('featherlight'); ?>
<?php echo head(array('title' => metadata('item', array('Dublin Core', 'Title')),'bodyclass' => 'item show')); ?>
<style>
	img {width:67%; }
</style>
<div class="container">
	<div class="row">
		<div class="col-md-6">
			<?php if (metadata('item', 'has files')): ?>
			<div id="itemfiles" class="element">
	    		<p>Click on an image to open up a larger version.</p>
		    		<div class="item-file image-jpeg">
			    		<?php foreach($item->Files as $file) {
						echo '<a class="download-file" data-featherlight="image" href="';
						echo metadata($file, 'uri');
						echo '">';
						echo file_image('fullsize', array('class' => 'full'), $file);
						echo '</a><br><a href="';
						echo metadata($file, 'fullsize_uri');
						echo '" download><strong>Download Original</strong></a><br>';
			    		} ?>
			    	</div>
			</div>
			<?php endif; ?>
		</div>
		<div class="col-md-6">
			<h1>Metadata</h1>
			<?php echo all_element_texts('item'); ?>
		</div>
	</div>
</div>
<?php echo foot(); ?>

In action: http://hist-301.musselmanlibrary.org/peace/omeka/items/show/23