Dear Devin,
Devin Bougie wrote:
[..] we would greatly appreciate instructions
on how to duplicate the presentation of images in the CERN Document
Server.
The next release of CDS Invenio will include a more advanced example
of format element for displaying photos (and we should definitely try
to do the same with videos). In the meantime, please find below a
skeleton of such a format element (I am not including the code of the
element we use, since it contains very CERN-specific settings that
might make things unnecessary difficult to understand). Note that we
iterate over the files using the BibDocFile library, instead of
iterating over the MARC fields. That has proven to be much simpler
when dealing with files:
from invenio.bibdocfile import BibRecDocs
def format(bfo, separator=" ", style='', print_links='yes'):
'''Lists the photos of a record. Display the icon version, linked to
its original version.'''
photos = []
bibarchive = BibRecDocs(bfo.recID)
for doc in bibarchive.list_bibdocs():
if doc.get_icon() is not None:
original_url = doc.list_latest_files()[0].get_url()
icon_url = doc.get_icon().list_latest_files()[0].get_url()
name = doc.get_docname()
img = '<img src="%s" alt="%s" style="%s">' % (icon_url,
name, style)
if print_links.lower() == 'yes':
img = '<a href="%s">%s</a>' % (original_url, img)
photos.append(img)
return separator.join(photos)
You might want to access other properties of your images, to display for
eg. a description for each picture, or the file size:
description = doc.list_latest_files()[0].get_description()
size = doc.list_latest_files()[0].get_size()
More:
<http://cdsware.cern.ch/invenio/code-browser/invenio.bibdocfile.BibDocFile-class.html>
We are also currently working on simple methods to access the EXIF
metadata embedded in uploaded photos, but that will come later.
Specifically, we would like the ability to zoom into a
particular image and then move back and forth between the images in
that record. [..]
We did that using the Highslide library <http://highslide.com>, but any
other similar library would work. It is usually just necessary to plug a
few JavaScript instructions in your code to get the desired effect.
JQuery and some of its plugins can usually do that with a minimum number
of lines of code (Eg:
<http://leandrovieira.com/projects/jquery/lightbox>. You will find much
more if you search for 'jquery lightbox' on the web.)
Note that you will have to include the javascript/css code and imports
right inside the body of your page (through your element), since you
cannot modify your page header from inside your format elements. Eg:
[...]
return '''<script type="text/javascript"
src="%(CFG_SITE_URL)s/js/jquery.js"></script>
<script type="text/javascript"
src="%(CFG_SITE_URL)s/js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css"
href="%(CFG_SITE_URL)s/img/jquery.lightbox-0.4.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
</script>
''' % {'CFG_SITE_URL': CFG_SITE_URL} + \
'<div id="gallery">' + separator.join(photos) + '</div>'
(or better, include this additional markup in the format template where
you call your format element, that is cleaner)
Zooming on images will only be possible if you create an icon for the
images. If your images are too large, you might also want to zoom on a
lower resolution version of the original image. Unfortunately we
support only one icon for each file for the moment. A workaround is to
create mid-size icons (eg. 300px width), and link to the same image as
the thumbnail when zoomed. We use this trick here for example:
<http://cdsdev.cern.ch/record/1148650>
Best regards
--
Jerome Caffaro ** CERN Document Server ** <http://cds.cern.ch/>
