Help increase Thumbnail size in Emiglio Theme

Omeka Classic
1

How do you make the display thumbnails larger in search results (and the title text smaller)? I’m using the Emiglio theme. I see in Appearance > Settings > Derivative Size Constraints…

Fullsize Image Size
800
Thumbnail Size
200
Square Thumbnail Size
200

I tried increasing all of these numbers, but I didn’t notice a difference.

2

Those sizes control how big the actual images created are. The size they show up on the page is going to be controlled by CSS, so that’s where you need to look to make a change, either by editing the theme or using the CSS Editor plugin. Changing the sizes of the title text would also be done in the CSS.

3

Thank you, can you please give more guidance about how to do this?

4

Hi jflatness, can you please share more detailed information about how to make the thumbnails bigger, showing me either how to edit the theme or providing the CSS code I need to add?

6

Since you’re just starting out with CSS, you want to use the CSS Editor plugin. I would put in the following style:

.item-img {
    width: auto;
}
7

Thanks Kim. I’m on the Plugins page, and I can’t figure out how to add a new Plugin.

Once I do, how will adding “width: auto” allow me to increase the thumbnail sizes?

8

[5 new photos added to shared album] Omeka

These screenshots show my Plugins page.

9

You cannot add plugins from the administrative software interface. You need to have access to the server to upload the plugin folder (which can be downloaded from https://omeka.org/classic/plugins/). Once the plugins are uploaded, you should be able to activate them from the plugins page within your installation.

Documentation: https://omeka.org/classic/docs/

10

Thanks sharonmleon, I installed the CSS Editor plugin. My other question is still unanswered: how will adding this code allow me to increase the thumbnail sizes?

.item-img {
width: auto;
}

If I add this CSS code and decide I don’t like it, how can I delete it? Thank you.

11

Well, it would help to orient yourself with some reading about CSS and how it works. You chould start with the Mozilla docs on sizing things: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

But, any code that you add through the CSS Editor, you are free to edit or delete. The plugin basically lets you tweak the existing styles without directly editing the theme.

12

Thanks sharonmleon, I read the document but I don’t see a code that would work for the thumbnails in my search results. I tried adding and modifying a bunch of things and saw no results, including this code…

.item-img {
width: auto;
}

Can you please tell me which code would work to increase the thumbnail sizes (and reduce the title sizes) in the search results?

13

Sorry, I misremembered which images you wanted to resize. For site-wide search results (what you see from using the search in the top right):

body.search #search-results img {
   width: auto;
}

The comment about reducing title sizes makes me think you might be talking about the items-only search results, though. These are what you see by using the “Search Items” view. For that, you want the following styles.

body.items.browse .item.hentry img {
    width: auto;
}

body.items.browse .item.hentry h2 {
    font-size: 20px; // Or whatever size you prefer.
}
14

Thank you Kim, this worked nicely. Using “width: auto” on the thumbnail images made them a little bigger than I wanted, so I edited that part to read “width: 30%.” Do you think it’s a problem to use a percentage measurement rather than a pixel measurement?

15

Percentages are perfectly fine to use.

16

Hi sharonmelon, I also need to update my Emiglio theme. I downloaded the new version, but where exactly do I upload it? Is it like installing a plugin?

17

Hi kim, can you please also help me edit these buttons above the search results…

“Browse All”
“Browse by Tag”
“Search Items”

I want to remove the middle one, “Browse by Tag.”

Thank you!

18

You’ll want to consult the documentation for themes: https://omeka.org/classic/docs/Admin/Appearance/Themes/

Really, the documentation is the best place to start for most questions.

19

Thank you sharonmleon, that helped! Can you answer my other question about how to remove the button “Browse by Tag”?

20

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