The current CSS forces images to be up-scaled beyond image style

a.media-gallery-thumb img,
.media-gallery-detail img {
  height: auto;
  overflow: auto;
  width: auto;  /* Make image take only as much as needed */
}

This also fixes gallery page line up issues.

CommentFileSizeAuthor
#16 start-gal.jpg113.33 KBMSR-Hamm
#16 test1-gal.jpg69.27 KBMSR-Hamm
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

totap’s picture

totap CreditAttribution: totap commented

Doesen't work for me well :/
"width: 100%;" is good if there is no conflict with others modules (i.e. Taxonomy tanslation).
"width: auto;" there is problem with resolution of thumbnails and their height

bkosborne’s picture

bkosborne
Primary language English
Location New Jersey, USA
CreditAttribution: bkosborne commented
Priority: Normal » Major

Why is the module messing with the dimensions in CSS at all? That should be up to the themer, or just use an image style that scales to the desired width. This really confused me.

bkosborne’s picture

bkosborne
Primary language English
Location New Jersey, USA
CreditAttribution: bkosborne commented
Priority: Major » Normal

I was running into to other problems that made this one seem worse. Using a non-standard output theme (like Adaptive Theme), this module doesn't work that well.

Anyway - I understand that the width is 100% so that the images scale up to fit within their 'grid' width.

NancyDru’s picture

NancyDru
she/her/hers
Primary language English
Location Boston
CreditAttribution: NancyDru commented
Version: 7.x-1.0-beta6 » 7.x-1.0-beta7

Still present in beta7. This still fixes it.

Corbey’s picture

Corbey CreditAttribution: Corbey commented

What css file are you putting this in? It doesn't seem to be doing anything for me..

NancyDru’s picture

NancyDru
she/her/hers
Primary language English
Location Boston
CreditAttribution: NancyDru commented

Line 385 of sites/all/modules/media_gallery/media_gallery.css

Corbey’s picture

Corbey CreditAttribution: Corbey commented

Hmm that's where I put it, but still nothing. I'm using Adaptive Themes, if that makes a difference?

NancyDru’s picture

NancyDru
she/her/hers
Primary language English
Location Boston
CreditAttribution: NancyDru commented

Use Firebug to fine out if it is being overridden somewhere else.

KirstenLangholz’s picture

KirstenLangholz CreditAttribution: KirstenLangholz commented

Adding the following code to my theme css file did the trick for me:

.node-media-gallery.node-teaser { width: 25%; float: left; }

If you need four galleries in a row...

Corbey’s picture

Corbey CreditAttribution: Corbey commented

#9 worked for me, thanks!

Note: with Adaptive Themes (or maybe just Corolla) this needs to be changed to:
.article-media-gallery.article-teaser { width: 25%; float: left; }

ericinwisconsin’s picture

ericinwisconsin CreditAttribution: ericinwisconsin commented

Which file, specifically, is that put in to?

ericinwisconsin’s picture

ericinwisconsin CreditAttribution: ericinwisconsin commented

Ok, got it! I was confused by some people's comments about having to put it in their theme css file. (Which one is that, btw?)

I'm using the Corolla Adaptive Theme and so I put:

.article-media-gallery.article-teaser { width: 25%; float: left; }

On line 385 of sites/all/modules/media_gallery/media_gallery.css

This seems to have solved the problem!

BTW, it also seems to work with the Pixture Reloaded Adaptive Theme as well.

Cheers!

KirstenLangholz’s picture

KirstenLangholz CreditAttribution: KirstenLangholz commented

Dear Eric,

you should place the css code into the .css file of your theme. In case of an update of media gallery, all the changes would be lost again ;)

You should put it into css/page.css to keep it safe.

ericinwisconsin’s picture

ericinwisconsin CreditAttribution: ericinwisconsin commented

Thanks, Kirsten!

jenni4’s picture

jenni4 CreditAttribution: jenni4 commented

Wow! I've been learning drupal for a little over a week now and this is the FIRST issue to which I've found a resolution! Thanks 1000x's!

MSR-Hamm’s picture

MSR-Hamm CreditAttribution: MSR-Hamm commented
FileSize
test1-gal.jpg69.27 KB
start-gal.jpg113.33 KB

Does not helped me at all!

I have no problems with the size of the thumbnails when a gallery is shown (like test1-gal-jpg), my problem is on the starting page of all galleries (start-gal.jgp).

What can I do?

lsolesen’s picture

lsolesen CreditAttribution: lsolesen commented

This is somewhat related to: http://drupal.org/node/1076192

Tobbetobbe’s picture

Tobbetobbe CreditAttribution: Tobbetobbe commented

The css change from NancyDru does solve the problem of images scaling up beyond their image style. But it creates other problems. As #1 "width: auto;" creates a problem with resolution of thumbnails and their height.

Also, with width: auto, images can display wider than they should on a gallery details page, causing the description not to show.

So, does anyone have an idea of how to avoid images to be scaled up on a gallery details page, without breaking other functionality of the media gallery module.

Tobbetobbe’s picture

Tobbetobbe CreditAttribution: Tobbetobbe commented

Ok, the problem with images displaying to wide on a gallery details page, could probably be solved with specifying the image style to the exact width that my theme uses on a gallery details page.

But how to avoid the width: auto affecting thumbnails?

lsolesen’s picture

lsolesen CreditAttribution: lsolesen commented
Status: Active » Postponed (maintainer needs more info)

Could any of you please test with the latest dev. There has been fixes to the theme issues.

lsolesen’s picture

lsolesen CreditAttribution: lsolesen commented
Status: Postponed (maintainer needs more info) » Closed (fixed)

Closing, as I guess it has been resolved in latest dev.