How can I display scaled down version of my image as a thumbnail instead of a cropped image? This is for items pulled from Omeka in a Neatline exhibit. It defaults to square thumbnail. I am using Neatlight theme.
Thanks
How can I display scaled down version of my image as a thumbnail instead of a cropped image? This is for items pulled from Omeka in a Neatline exhibit. It defaults to square thumbnail. I am using Neatlight theme.
Thanks
Omeka generates these thumbnails for you, and the default item page only loads the square thumbnail. To get Neatline to display another thumbnail, you'll need to create a theme for your exhibit, as described on Creating Themes for Individual Neatline Exhibits.
In that Neatline exhibit theme, create an item.php file, and in it, you can include any mark up you want. The item_image will let you use different thumbnails.
For example, if your item.php file contained just this, it would display the full thumbnail (but nothing else):
<?php echo item_image('thumbnail'); ?>
OK, but my item.php looks like this and I don't know where to stick the code you provided:
<?php
/* vim: set expandtab tabstop=2 shiftwidth=2 softtabstop=2 cc=76; */
/**
* @package omeka
* @subpackage neatline
* @copyright 2012 Rector and Board of Visitors, University of Virginia
* @license http://www.apache.org/licenses/LICENSE-2.0.html
*/
?>
<?php
$dublin_sep = all_element_texts('item',array(
'return_type' => 'array',
'show_element_sets' => array('Dublin Core')
));
$dados_neatline = "";
//Dados exibidos antes das figuras
if (isset($dublin_sep['Dublin Core']['Description']))
$dados_neatline = $dados_neatline." <div class='element-text'>".$dublin_sep['Dublin Core']['Description'][0]."</div>
";
$str = "Source: ";
$dados_neatline .= $str;
if (isset($dublin_sep['Dublin Core']['Source']))
$dados_neatline = $dados_neatline." <div class='element-text'>" .$dublin_sep['Dublin Core']['Source'][0]."</div>
";
echo $dados_neatline;
//Dados que serão exibidos depois das figuras
$dados_neatline_pos = "";
if (isset($dublin_sep['Dublin Core']['Contributor']))
$dados_neatline_pos = $dados_neatline_pos." <div class='element-text'> <b> Contribuidor: </b> ".$dublin_sep['Dublin Core']['Contributor'][0]."</div>";
if (isset($dublin_sep['Dublin Core']['Rights']))
$dados_neatline_pos = $dados_neatline_pos." <div class='element-text'> <b> Permissões: </b>".$dublin_sep['Dublin Core']['Rights'][0]."</div>";
//php echo all_element_texts('item',array(
// 'return_type' => 'html'));
?>
<!-- Files. -->
<!-- The following returns all of the files associated with an item. -->
<?php if (metadata('item', 'has files')): ?>
<div id="itemfiles" class="element">
<?php
set_loop_records('files', get_current_record('item')->Files);
foreach(loop('files') as $file): ?>
<div class="file-display">
<!-- Display the file itself-->
<?php
//getting data file
$dublin_files = all_element_texts(
$file,
array('show_element_sets' =>
array ('Dublin Core'),
'return_type' => 'array'));
//Verify if the file is a image, if is insert code to the lightbox
if (stripos(get_current_record('file')->mime_type,'image') !== false) {
//Construct label to picture view on lightbox
$label_pic = "";
if (isset($dublin_files['Dublin Core']['Title']))
$label_pic = $label_pic." <span class='lb-caption-bold'>Title: </span>".$dublin_files['Dublin Core']['Title'][0]."
";
if (isset($dublin_files['Dublin Core']['Description']))
$label_pic = $label_pic." <span class='lb-caption-bold'>Description: </span>".$dublin_files['Dublin Core']['Description'][0]."
";
if (isset($dublin_files['Dublin Core']['Creator']))
$label_pic = $label_pic." <span class='lb-caption-bold'>Creator: </span>".$dublin_files['Dublin Core']['Creator'][0]."
";
if (isset($dublin_files['Dublin Core']['Date']))
$label_pic = $label_pic." <span class='lb-caption-bold'>Date: </span>".$dublin_files['Dublin Core']['Date'][0]."
";
if (isset($dublin_files['Dublin Core']['Rights']))
$label_pic = $label_pic." <span class='lb-caption-bold'>Copyrights: </span>".$dublin_files['Dublin Core']['Rights'][0]."
";
echo file_markup(get_current_record('file'),array('linkAttributes' => array('data-lightbox' => 'setimages', 'title' => $label_pic )));
}
else {
echo file_markup(get_current_record('file'));
}
?>
<!-- Display the file's metadata -->
<div class="file-metadata">
<?php
/*verificando se possui os campos*/
/*depois verificar quais campos serão exibidos*/
if (isset($dublin_files['Dublin Core']['Title'])) :
?>
<h4> <?php echo $dublin_files['Dublin Core']['Title'][0] ?> </h4>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php
$dublin_sep = all_element_texts('item',array(
'return_type' => 'array',
'show_element_sets' => array('Dublin Core')
));
echo $dados_neatline_pos;
?>
<hr />
<!-- Link. -->
<?php echo link_to(
get_current_record('item'), 'show', 'View this record in digital library'
);
?>
This is using the file_markup helper to generate the image markup for the file. You can read about the parameters it needs at http://omeka.readthedocs.org/en/latest/Reference/libraries/globals/file_markup.html.
Specifically, you can pass as part of the property array the values "image_size" => 'thumbnail'.
Also, this is the item.php inside your theme, in the neatline/exhibit/themes/EXHIBIT-SLUG directory. Again, see http://neatline.org/2014/04/01/creating-themes-for-individual-neatline-exhibits/
Eric,
The code I posted is from the item.php file that's in my Neatline exhibit specific theme.
I just added the following per Wayne's instructions and it's not working:
echo file_markup(get_current_record('file'),array('linkAttributes' => array('data-lightbox' => 'setimages', 'image_size' => 'thumbnail', 'title' => $label_pic )));
any idea what I'm doing wrong here?
I made a typo; it's 'imageSize' not 'image_size' (http://omeka.readthedocs.org/en/latest/Reference/libraries/globals/file_markup.html#usage)
still square:
echo file_markup(get_current_record('file'),array('linkAttributes' => array('data-lightbox' => 'setimages', 'imageSize' => 'thumbnail', 'title' => $label_pic )));
You have the imageSize in your link attribute array, not the props array; it needs to be at the same level as the linkAttributes. PHP is horrible for having array parameters that accept arrays and other hashes. Try moving it the image size just before linkAttributes.
Great thanks. It's working but how do I make them display side by side and one after the other?
HTML's just not great at scrolling left-to-right, so there's not a great way to ensure that it will always happen. However, you can encourage the images to display side-by-side this way:
Take the line here
<div class="file-display">
and replace it with
<div class="file-display" style="float: left;">
If you're not careful, this can have some funky side effects, and as I said, it won't force them to display side-by-side. But if there's room in the enclosing area, they should stack from the left.
OK, thanks. I need to add space between them. Right now they look like they are connected. How would I do that?
<div class="file-display" style="float: left; margin-right: 1em;">
You may need to play with the value of margin-right. See https://developer.mozilla.org/en-US/docs/Web/CSS/length