I've installed the adaptive subtheme and the galleria module for displaying pictures. The problem is that in FF7,8 and also IE 7,8,9 display an error about the fact the script can't get the width and height.

After looking at the CSS file, I remove the "img {max-width:100%}" inside the html-elements.css file code and it started working on FF but IE still get find the height but found now the width.

I've try switching with the Bartik theme and the module works great so that why I post my message here.

Thanks

Comments

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Closed (won't fix)

IMO this is bug with the module, not the theme. Simple reason is that any modern script/module that manipuates images in some way needs to support max-width: 100% OR is simply not agreeable with responsive design methodologies, in which case it comes down to your own decision to use a certain module or not.

Be aware that by removing this CSS you just disabled responsive images. Probably not what you intended but that is the result. Please do not come back and complain when your users or client tell you that images are broken or breaking the layout in mobile and tablet devices.

I am going to write a long blog post on this subject later this week to begin a wider discussion so module developers are more aware of this situation (most are totally ignorant of responsive design requirements).

ergophobe’s picture

ergophobe commented

I haven't tried this, but can't you set a class on your galleria div (or whatever the closest parent element is to the images in a galleria gallery and just have something like

.galleria img {max-width: none !important;}

and then the galleria block might work.

Otherwise... I agree with Jeff - at this point in time, CSS2 properties should not be breaking your Javascript app and theme designers shouldn't have to avoid them.

ergophobe’s picture

ergophobe commented

Okay, if #2 works in some way, I can't get it to do so. I was thinking that clearing the max-width setting with a 'none' might work, but I guess not.

I did find that my galleria is just fine below the error layer. As an absolutely hack solution, you can also simply do this:

div.galleria-errors {display:none;} and it will just hide the error layer.

At least for me, the gallery is underneath and working just fine. Kind of makes me nervous to depend on that in production, but it works I guess. It would be nice to see this actually fixed, but it seems pretty squirrely.

ergophobe’s picture

ergophobe commented

Oopss.. I was editing one css file and uploading a different one.

Turns out that

.galleria-image img {max-width: none;}

Fixes it for me.

Also, you can set max-width in pixels and it works for me. Strangely, percentages other than 100% seemed to sort of work - no error messages, but no thumbnails.

I think for a responsive theme, you would need to simply not load the galleria on displays too narrow to handle it, and then set max-width:none for the galleria block.

ergophobe’s picture

ergophobe commented
Component: Subtheme » CSS/HTML

Turns out this fixes it for me only in FF, Chrome, Safari (Win), and Opera. Still broken in IE

See this issue in the Galleria queue #1308912