Blurry Images on Landing Page

[Audrey Sage]

Hi, everyone. We are building a digital collection with trade cards of varying size. We are having trouble with how Islandora is rendering our images on the collection's landing page view, though. I have attached a picture for reference. In short, since Islandora automates the width of the thumbnails, our horizonal images are small, but sharp, while our vertical images are larger and blurry. Does anyone know how to remedy this issue? We are assuming we can go into the code and set vertical and horizontal parameters for each thumbnail, but it would be ideal if we could avoid having to tweak the code for each and every object in this collection.

Any advice would be greatly appreciated! 

[Audrey Sage]

To clarify, the issue is the blurriness of the large images, not the size differential.

[md...@discoverygarden.ca]

Hi There,

It looks like the thumbnails are taking advantage of the extra width made available in its parent container. In this case, wrapped up in a dl->dt tag. This html and styles are loaded from the Islandora Solution Pack Collection. The current theme styles are overriding the layout, setting the width of the image to occupy the full width of the images parent. While this fills the space, it may lead to a thumbnail appear distorted, as the source image may be smaller.

Anyway, i have had a look at the theme source files again, and correcting this should be simple. The issue resides on line 72 of nyam_theme/sass/pages.scss. The CSS rule looks like this:

.islandora-basic-collection-wrapper img {
  max-height: 30em;
  width: 100%;
}

Removing the width, or setting it to auto, will change this:


to this:



This will keep the image dimensions and aspect in check.  Keep in mind, the current theme is using SASS and Compass to compile Syntactically Awesome Style Sheets to CSS, which the theme will load. So you COULD change the .CSS file (pages.css, line 115) but i would recommend modifying the source (page.scss) and running 'compass compile' in the theme directory. Before doing this, be sure to make a backup of the theme, in case any additional development was done modifying the compiled CSS.

Thank you,

Morgan Dawe

md...@discoverygarden.ca

DiscoveryGarden Inc.
902-367-3851
155 Queen St
Charlottetown, PE
http://www.discoverygarden.ca/

[Audrey Sage]

Thank you so much! We will try this out and get in touch if we have further questions.

Best,

Audrey

[Brandon Weigel]

A very simple option for changing the CSS (not sure how well it scales, but works for us) is to use the Drupal CSS Injector module (https://www.drupal.org/project/css_injector), which would avoid your having to modify the theme. You could use the Injector as your long-term solution, or use it temporarily to make sure the CSS change works as you want it to and then change your theme when ready.

[Audrey Sage]

Thanks, Brandon! I will try that first :)

[Robin Naughton]

Hi Morgan and Brandon

 

Thanks for your suggestions on how to fix the blurry images. We’ve checked out the CSS Injector Module and used the style to update our site.  Images are clear.  It is a nice tool that we can make good use of to adjust our CSS as needed.

 

Thanks,
Robin.

 

----------------------------------------------------------------

Robin Naughton, PhD

Head of Digital

(212) 822-7325 | rnau...@nyam.org

 

The New York Academy of Medicine

LIBRARY

1216 Fifth Avenue, New York, NY 10029

 

NYAM.org

 

From: Audrey Sage [mailto:aul...@gmail.com]
Sent: Thursday, October 06, 2016 11:22 AM
To: islandora
Cc: Robin Naughton
Subject: Re: Blurry Images on Landing Page

 

Thanks, Brandon! I will try that first :)

On Thursday, October 6, 2016 at 7:57:07 AM UTC-4, Brandon Weigel wrote:

A very simple option for changing the CSS (not sure how well it scales, but works for us) is to use the Drupal CSS Injector module (https://www.drupal.org/project/css_injector), which would avoid your having to modify the theme. You could use the Injector as your long-term solution, or use it temporarily to make sure the CSS change works as you want it to and then change your theme when ready.

On Wednesday, October 5, 2016 at 5:33:33 PM UTC-3, Audrey Sage wrote:

Thank you so much! We will try this out and get in touch if we have further questions.

 

Best,

Audrey

On Tuesday, October 4, 2016 at 1:48:45 PM UTC-4, md...@discoverygarden.ca wrote:

Hi There,

It looks like the thumbnails are taking advantage of the extra width made available in its parent container. In this case, wrapped up in a dl->dt tag. This html and styles are loaded from the Islandora Solution Pack Collection. The current theme styles are overriding the layout, setting the width of the image to occupy the full width of the images parent. While this fills the space, it may lead to a thumbnail appear distorted, as the source image may be smaller.

Anyway, i have had a look at the theme source files again, and correcting this should be simple. The issue resides on line 72 of nyam_theme/sass/pages.scss. The CSS rule looks like this:

.islandora-basic-collection-wrapper img {
  max-height: 30em;
  width: 100%;
}

Removing the width, or setting it to auto, will change this:

to this:

This will keep the image dimensions and aspect in check.  Keep in mind, the current theme is using SASS and Compass to compile Syntactically Awesome Style Sheets to CSS, which the theme will load. So you COULD change the .CSS file (pages.css, line 115) but i would recommend modifying the source (page.scss) and running 'compass compile' in the theme directory. Before doing this, be sure to make a backup of the theme, in case any additional development was done modifying the compiled CSS.

Thank you,

Morgan Dawe

md...@discoverygarden.ca

DiscoveryGarden Inc.
902-367-3851
155 Queen St
Charlottetown, PE
http://www.discoverygarden.ca/


On Tuesday, October 4, 2016 at 1:59:55 PM UTC-3, Audrey Sage wrote: