Issue with Thumbnail Sizing in Center Row Theme

[HKtoWH]

Hello, I’m very new to web development and have recently undertaken moving an Omeka S site developed on my school’s server to independent hosting. While the site has been transferred without issue, there appears to be a problem with the thumbnail formatting in item showcase a blocks which wasn’t present on the original site.

Regardless of the “Thumbnail Size” setting of images in the item showcase block, all images appear very small when presented on the site (See here). This only appears to be an issue for item showcase blocks with more than one item.

Following the instructions of this thread I resized the thumbnail settings in the local.config.php file from (Large=800, Medium=200, Small=200) to (Large=800, Medium=400, Small=200). Using the DerivativeImages module I tried to regenerate the thumbnails after modifying the config file, but they seem to have been unaffected. As this is my first time attempting anything like this, I’m unsure if it was a simple mistake in either modifying the file or regenerating the thumbnails (the module seems to have processed without issue).

Does anyone have experience with anything similar? A solution might be replacing the affected item showcase blocks with media embedded blocks which do not appear to have this issue. However, the site is already quite large and it would be preferable not to have to go through and replace them all.

Thanks so much for any help and advice!

[jflatnes]

Do you have an image or example of what you want them to look like instead?

This just appears to be a simple CSS issue that could be resolved by editing the theme or using something like the CSS Editor module. Two things constrain the sizes of those images in the showcase blocks with multiple items: the height of each image is limited to 7rem (in this case 126 pixels), and the width of each item is limited to 25% of the total page width.

You can modify and increase those limits, but only a certain amount can be done and still maintain the side-by-side layout they have now.

[HKtoWH]

Thanks for your response John, here is an image from elsewhere on the site using the Media embed block which is similar to how I had it before:

Essentially two medium sized images aligned next to each other, albeit closer than the Media embed blocks orient them.

If CSS Editor is the best solution I think I can look into creating those changes on my own. Thanks again for your help.

[jflatnes]

The kind of extra CSS rules you’d be looking at would be something like:

.item-showcase .resource.item:not(:only-child) {
    width: 45%;

.item-showcase .resource.item:not(:only-child) img {
    max-height: 14rem;
}

Which will lay things out with 2 on a row, and allow the images to be larger.