Hello

Thank you for making this module. I'm not sure I understand how to properly use it.
I followed the instructions in readme.txt. I see how in image styles, I can set the breakpoints for various screen resolutions. What I don't understand, is how I tell the image what size to be at those resolutions. For example, if I have 2 breakpoints, 360 and 1024. At 360 I want the image to be 150px wide, and at 1024 I want it to be 500px wide, how do I make this happen?

Thank you

Comments

quantos’s picture

Via css. You set the width of its containing block (div/whatever) to whatever size you want (at any given media query size) or you could set a percentage width for the same containing block - and the default adaptive image css (img width:100%) does the rest for you. Make sense?

Q

Lukas von Blarer’s picture

No, I don't understand that either. How can I configure this module to use ah 400px wide image on 1024px screen width and a 200px wide image on 480px screen width? Do I have to create the breakpoint according to image size and not to screen size? So i would create a breakpoint at 400 and one at 200?

This is really not obvious to someone not used to Adaptive Images. We should add that to the Readme.txt.

itkadmin’s picture

Sorry I took so long to reply, I've been travelling.

I get the idea of using CSS/media queries for image size, what I don't get is what Adaptive Image does. I can set the image size via css to display at different sizes depending on the media, but if I do that, the full image is still being downloaded. If I tell an 800px wide image to display at 200px on a phone in CSS, it is still loading the large image, just displaying it at a different size. I'm looking for something that says "If the media is a phone, display the 200px wide version of the image, if it's a computer, display an 800px wide version etc.."

If I'm controlling the image size via CSS, what is adaptive image doing?

joachim’s picture

Category: support » bug

I'm similarly confused.

I see I can edit the image effect 'adaptive' to set breakpoints, but I don't see where I set the image size for each one.

This definitely needs some documentation -- without it the module cannot be used.

erichomanchuk’s picture

It looks to me that setting the adaptive image breakpoints on an image will create images equal to those breakpoints.

Adaptive 900, 720, 320

So at 320px and below I get a 320px image. Less then or equal to 720px and greater then 320px I get the 720px image. Greater then 720px I get the 900px image.

If you trying to see these changes happen on your web browser you wont because the javascript is based off of screen.width or screen.height, which ever one is bigger.

On my Imac my screen width is 2560 so I only ever get the 900px image. Its not browser window.

Mark_L6n’s picture

#5 appears to be correct to me as well. That's a big shortcoming for narrow images. You can easily think of images 10% or 5% of screen width that would then get loaded at 10 or 20 times their size because of this behavior.

joachim’s picture

> Its not browser window

That's a bit of an inconvenience too, as it makes testing this much harder. Also, surely for users it's the browser window size that really matters.

itkadmin’s picture

I still haven't sorted this out.

I have found that the Responsive Images and Styles does what I need. http://drupal.org/project/resp_img

It's a bit convoluted, but it is flexible enough I can use different responsive image settings in various parts of the site.

Maybe adaptive image does this too, I just can't figure out how.

n1k’s picture

Adaptive Image doesn't check your window size. It grabs the entire screen resolution. Maybe try to combine it with an Omega based Theme. The resizing should happen via CSS Media Querys not with the module.
I would say it's working as designed or are you facing a different problem?

n1k’s picture

Status: Active » Postponed (maintainer needs more info)

Status update

sanduhrs’s picture

Status: Postponed (maintainer needs more info) » Closed (duplicate)

The statement in #5 is correct.
There is a feature request, that allows for style selection per breakpoint: http://drupal.org/node/1355420