Customizing image display in items/show.php

I’ve searched high and low across the various Omeka forums and documentation, and still can’t solve my issue. Hoping I’m missing a simple fix, as I’m a php noob, but here goes:

I’m using a lightly customized version of the Avantgarde theme. Out of the box, the items/show.php page displays an image thumbnail, which links to a full-size version, using the following code:

<div id="item-images">
         <?php echo files_for_item(array('imageSize' => 'fullsize')); ?>
</div>

I adjusted the “Fullsize Image Size” setting under Appearance > Settings > Derivative Size Constraints to 1200px (my originals vary between 800px and 1200px), to ensure max display.

This is not replacing the thumbnail with the original sized image, however. I’ve been hacking away at the php above, to no avail. I’ve checked and double-checked my css to make sure nothings being constrained via css. I’ve tried referencing this documentation, to no avail (probably the wrong approach, anyway).

I’d love some guidance here if possible! Thanks very much in advance.

If I understand correctly you want the original image to display and not the thumbnail?
If that is the case you need to replace your code with

<?php $filesCount = count($item->Files);?>
            <?php $images = $item->Files;?>
                <?php foreach ($images as $image): ?>
                    <?php if ($filesCount === 0): ?>
                        <div class="no-image">No images to display.</div>
                    <?php endif; ?>
                    <?php if ($filesCount === 1): ?>
                        <img class='itemimage' src="<?php echo url('/'); ?>files/original/<?php echo $image->filename; ?>" />
                    <?php endif; ?>
                    <?php if ($filesCount > 1): ?>
                            <img class='itemimage' src="<?php echo url('/'); ?>files/original/<?php echo $image->filename; ?>" />
                    <?php endif; ?>
                <?php endforeach; ?>

I’m a php-noob as wel, so hope I could help anyway :slight_smile:

Yes, this does it! Thank you so much, I’ve been trial-and-erroring it for a couple of days now to no avail. Now I’m off to play with this so I understand exactly what it’s doing. :smiley:

Thanks again!

There’s no need to check $filesCount inside the loop. Both the conditions $filesCount === 1 and $filesCount > 1 give the same action so why do you want to differentiate them? … or maybe I missed something?

Wouldn’t it be better to just use Omeka’s native method like i.e:

echo file_markup($item->Files, array('imageSize' => 'fullsize'));

You can also customize the HTML output of the function as described here.

BTW
I do not recommend to display original files on the item show page. The files can have sometimes a bigger number of MB’s and if an item has them more, the page load time may by significantly slower.

Thanks, @miniol. The code string you provided still is only displaying the thumbnail on the item record, rather than fullsize (the issue I’m still confounded on is why the ‘fullsize’ value is not being honored, as with my original code in my original post; I’ll need to mess around some more to troubleshoot that specific issue but for now this feels like a good solution).

I hear you on both the redundancy of code re: the file counts, and will adjust accordingly.

The trade-off of load times vs. displaying the full image without forcing the user to click through to another page is likely worth it to me for now. I’ll almost certainly be making substantive changes to how images can be navigated (exploring the use of light box/carousel-type displays, etc), but my current install is an MVP/proof of concept, so it feels like an acceptable trade-off for now.

I really appreciate the input!

Sounds fixed (yay!), but want to add why your original attempt of changing the derivative image size settings didn’t work.

Those constraints are applied when the original file is added and Omeka creates the derivatives. After that, Omeka just displays the derivative that was created. Thus, that change doesn’t affect the display.

This is strange since the code works for me. Take a look at the image links produced by the code on your public page (I mean the path in src attribute of the tag). Do they contain path to the /files/fullsize directory?
If so, the problem is with your derivative images - as @patrickmj wrote.

You can regenerate your derivatives using DerivativeImages plugin.

@miniol @patrickmj

Thanks so much for the added detail. I went ahead and reverted the code to try and pull in the fullsize derivative per @miniol’s code above and verify the file path. The file path of the thumbnail itself appears to be to the /items directory (at least, that’s the path that displays on hover over the thumb). The thumbnail then links to the /files/original directory. Nowhere does the /files/fullsize directory seem to come into play.

I do have a /files/fullsize directory, and the images in that directory are the correct (original) sizes. I’ve tried rebuilding the images using the DerivativeImages plugin, with no change in the resulting image size displayed on the item record.

I’ve double-checked, and my fullsize image dimensions are set to 800px, so I’m not sure what’s up. Seems like for some reason, my code isn’t referencing the right directory?

This is what I added to my show.php file: <?php echo file_markup($item->Files, array('imageSize' => 'fullsize')); ?>

Thanks,
J.

Do you have a publicly available URL to a page showing the problem? It’d be easy to tell from that what type of file is being used for the thumbnail (or you can do it yourself with the web inspector in your browser) or if something else is constraining the display size. No thumbnail will be in the “items” directory so that’s a bit of a misdirection from the hover text, I believe.

Here’s an example record (the rest of the records/collections are still private for now so if you browse around you’ll hit 404s): http://michaelsand.com/archives/items/show/742

According to my web inspector, it does appear to be calling the file from /files/fullsize; I’ve double-checked and all files in that folder are accurately sized (800px wide).

<a class="download-file" href="http://michaelsand.com/archives/files/original/ec9e8d1ba11d7e6a8455ea41672444a0.jpg"><img class="full" src="http://michaelsand.com/archives/files/fullsize/ec9e8d1ba11d7e6a8455ea41672444a0.jpg" alt="http://michaelsand.com/archives/items/Metro-Dist-Franklin-Park-Site-m005.jpg" title="http://michaelsand.com/archives/items/Metro-Dist-Franklin-Park-Site-m005.jpg"></a>

(Aside: The alt and title texts appear to be automatically assigned the original file URL, so now I’ll also need to figure out how to override those. I’ll start looking into that shortly.)

Thanks,
Jess

Thanks.

Your problem is the usual one in these cases: CSS. The constraint is a height style on .item-file a, limiting the height to 9em, about 140 pixels or so with your font size.

@jflatnes Wow, thank you! I had a feeling it was something really simple I was overlooking. So appreciate everyone’s time on this thread!

J.

Hi! This post was really useful, because I’m dealing with the same issue that Jess was dealing with, so I appreciate the responses from @miniol, @patrickmj, and @jflatnes.

I’ve edited my show.php file, and a miniature version of the full-size item is showing up, rather than the square thumbnail - alas, it’s still miniaturized. I’ve looked at the CSS, specifically at the item-file a – but I’m not seeing an obvious setting to adjust.

Any suggestions appreciated! This is for the Rhythm theme, and you can see an example of what I’m describing here.

1 Like

Take a look at your style.css, code lines 130 and 694. You have defined the img height constrain in those two points.

1 Like

thanks so much, @miniol! That was exactly what I needed.