How to customize Browse and Browse Item Sets pages

Omeka S
1

Is there a way to customize the built-in pages Browse and Browse Item Sets? I’d like to make the thumbnail images much smaller in order to get more items on a page.

2

You can do this easily with the CSS Editor module. You will find the way to call thumbnails on browse pages is .resource-list img. You may need to be more specific in case this exact selector also gets applied elsewhere.

You can also just resize all of your thumbnails to smaller dimensions:

https://omeka.org/s/docs/user-manual/configuration/#thumbnails

Which will affect everywhere they appear.

3

Thanks. I changed my PHP config file and set the maximum pixel dimensions from 800 /200 / 200 to 200 / 100 / 100, but the end-user interface still displays the same large images. Do I need to restart PHP or something?

4

Actually, using the PHP config file changed the size of the thumbnail images on my Search Results page, but not my Browse and Browse Items pages.

Using CSS I changed the image size on the Browse page:

.resource-meta {
width: 50px;
height: auto;
font-size: 100%
}

That works, but I can’t figure out how to change the link text. It’s way too big.

Here is the source for one item in the Browse page:

<li class="item resource ">
<div class="resource-meta ">
<a class="resource-link" href="[&#x2F;Staging&#x2F;s&#x2F;pir-vilayat-inayat-khan&#x2F;item&#x2F;36](https://pvikarchives.com/Staging/s/pir-vilayat-inayat-khan/item/36)"><img src="[https&#x3A;&#x2F;&#x2F;pvikarchives.com&#x2F;Staging&#x2F;application&#x2F;asset&#x2F;thumbnails&#x2F;audio.png](https://pvikarchives.com/Staging/application/asset/thumbnails/audio.png)" alt=""><span class="resource-name">Test Audio 02</span></a> <div class="description ellipsis">test file</div>
</div>
</li>

I have tried customizing the css for class="resource-meta " , class=“resource-link”
and class=“resource-name”, all to no avail. I can’t get the text size to get smaller.

Do you have any idea how to fix this?