Item page image issues - please help

Hello. I’m hoping someone can help me because I’m pretty frustrated and can’t find answers to my issues searching online. I’m using the Foundation theme/Inkwell (though it doesn’t matter what theme I try - the same thing happens).

I’ve read that OpenSeadragon is the default viewer, which I would be happy about because I’ve used it on other sites and like it. But it doesn’t seem to be active on my site… or maybe I’m just misunderstanding something about how it would work by default in Omeka-S. All of the images on item pages are displayed as just an image without the ability to zoom in and out, etc., though you can click on the image and the media page opens. When I inspect source on the image on the item page it doesn’t mention OpenSeadragon anywhere, and all I see is a div class of media renderer. Should I be seeing something regarding OpenSeadragon when I inspect this image? I looked around at other Omeka-S sites last night and I know on at least one I could inspect and see a mention of Seadragon, but I can’t remember what site it was.

Can someone help me understand if something is broken or if what I’m seeing is how things are supposed to be?

If all is well, I’d prefer to use what I currently have over something like the Universal Viewer (which is not working at all for my videos), but what I have is too narrow to watch videos or read PDFs embedded on the page. How can I adjust the width of the image/video/PDF? It looks like the iframe for a video is 420 width x 315 height , and the PDF embed and rendered image seem near the same – where exactly would I want to make changes to this? I’d like all of those to be a bit wider.

Or, is there a different viewer that would work for pdf/image/video?

Thank you.

OpenSeadragon is only used when you add media of the type “IIIF Image” (which are links to images hosted on external IIIF image services). The normal display is just to directly embed images, videos, etc.

Ok. Please forgive me if these questions are silly because this stuff is a bit above my head. I do have Image Server and IIIF Server installed – are those not something that I can make work with OpenSeadragon? Would I need to install something like Cantaloupe to make OSD work? If so, would you know of a source that can help me link it with Omeka to make it work? I do have someone who will assist me who does development work, but unfortunately with different languages, etc. so they don’t know what to do but will be able to figure it out with a little direction. Thank you.

Hi Sarah,
Could you please let me know how you’ve figured out Removing a linked thumbnail image from the item show page?
I’m having exactly the same problem :confused:
Many thanks in advance!

(sorry for asking this here, but your other topic is now closed)

Hi! Are you using Thanks Roy too? My partner added some coding or removed some and made the thumbnail go away - I can ask him to look through his notes to find what he did and I guess paste it here. Just let me know what theme you’re using - not sure if it will work if it’s not the same as me.

Hi Sarah, many thanks for your promp reply! I’ve tried with Thanks Roy, as well as with other themes, and the same problem happens… Yes, it would be great if you could paste the answer here. Thanks again!

Try pasting this whole thing (below) in the CSS editor (module). I’m not positive this is what makes the change, but think it is (we made a lot of changes and didn’t document them all).

.value.resource.items .resource-link img {
display:none;
}

I’ve tried pasting it in different places, including ‘theme-name’ (Thanks Roy too)/ asset/css/style.css, but it’s not working…
Could you please confirm the name of the file and folder where it should be pasted?

No, you need the module CSS Editor installed. Then once you have that activated you go into that, which will be listed under each site like pages, navigation, etc. are, and you paste it into a little box in the editor.

Sorry, right :wink:

  1. I’ve installed the CSS Editor module;
  2. activated it;
  3. pasted in the CSS editor box:
    .value.resource.items .resource-link img {
    display:none;
    }
  4. clicked ‘Save’: “CSS successfully updated”.

However, the item show pages still display thumbnails…
(I’ve installed/uninstalled the module, refreshed db and web pages, tried other browsers, etc., just in case, but nothing changes)

Strange. I don’t know then. I deleted that code from my CSS editor and the thumbnails return, I pasted it back into the editor and they go away again. It should work for you! Here are my partner’s notes from when he added the code for me. I don’t see any other changes that were related to this.

  1. CSS Editor:
    .value.resource.items .resource-link img {content:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQqPdtIeDQvbV5D_a2QYVRs0K7fJZUCaK84Q&usqp=CAU)}

2b) Notes:
The content:url(…) above is a link to a fake image used for testing. When done testing, use this instead to remove the thumbnail completely:
.value.resource.items .resource-link img {display:none}

Try using that test link with the image url and see if that works, and if you can get that to work then try the display:none. Let me know - I can see if he has time to take a look at it again to check whether he made a change elsewhere that this code needs to work. I don’t think so though.

Still not working…

  1. deleted everything in my CSS Editor box.
  2. copied/pasted:
    .value.resource.items .resource-link img {content:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQqPdtIeDQvbV5D_a2QYVRs0K7fJZUCaK84Q&usqp=CAU)}
    But nothing happened on the Item page (couldn’t see the cat in the browser).
  3. And then, again:
    .value.resource.items .resource-link img {
    display:none;
    }
    But the thumbnails are still there.

Do you have a live site you can link? I’d be happy to help, and it’d be easiest to assist if I could look at your use case directly.

No, at this stage it’s hosted locally in my computer. But I can share files and screenshots.

I don’t know then. We looked at the files he’d changed (lots of other changes) and he said there weren’t any changes elsewhere for this - it’s just that code.

He said all he did to isolate this originally was to inspect the thumbnail image to discover the css classes for it, so maybe do the same and see if the ones for you are for some reason different. If they are, try subbing those in the code until it works?

In case it’s relevant, I’m using Thanks, Roy version 1.0.

I’ll take screenshots. Can you capture your item page, highlight what you are trying to hide, and then what’s currently in your CSS Editor configuration?

Finally managed to remove all linked thumbnail images from Item Show pages (worked well with different themes too)!

In my case, the page source (html on the browser) indicates: <div class=“value resource item_sets”
Hence, I needed to write in the CSS Editor:

.value.resource.item_sets .resource-link img {
display:none;
}

Many thanks Sarah and Kim, for all your help and patience! :smiley:

Strange! I wonder why it was item sets for you rather than item. We must have some different settings in the theme, maybe? Anyway, I’m glad it worked for you in the end! :slight_smile:

I’m guessing that the resource used was an item set and therefore it had the item_set class. (Like using a “Children’s Literature” item set as a subject value for item “Goodnight Moon”.) I think a more generalized solution would be

.value.resource .resource-link img {
display:none;
}

This topic was automatically closed 250 days after the last reply. New replies are no longer allowed.