I configured AIS correctly using dev. I had issues with the Rewrite rules similar to #1370190: Images are rewritten to the wrong URL but the dev version's .htaccess patch fixed my issues. If I configure FlexSlider's option sets to use a specific image style, that style appears correctly but it seems as though the JS is not working in detecting my screen width. If I select 'adaptive' then I get only the original size. Additionally, when viewing the Adaptive image style that is supplied by the module (on the admin screen), resizing my screen has no effect on the url of the image. It always points to the original size.

Comments

brentratliff’s picture

Additionally, I tried it with a Flexislider content type instead of using views and it doesn't adjust. It always displays the original.

brentratliff’s picture

I also tried it without Flexislider by just changing the field display of another content type to adaptive. That is not working either. I'm sure it's a screen detection problem. I've tried it in Chrome and Safari in two themes including Bartik.

spotzero’s picture

The generated URL for the image should always be set to adaptive. Resizing your browser won't change that.

Resizing your browser should change a cookie that the AIS module's javascript sets called 'ais'. The rewrite rules are trigger by this cookie and rewrite images using the 'adaptive' image style to another image style.

The first thing to check would be if the ais cookie is being set and updated. If the ais cookie is set to a different image style, but going to an image on the adaptive style doesn't forward you to that style, you're problem is with the rewrite rules.

If the cookie isn't being set or updated, then you're having a problem with the javascript.

Let me know which situation you seem to be in, and we'll go from there.

Thanks,

brentratliff’s picture

Thanks for the troubleshooting steps. The cookie is adjusting properly with the appropriate thresholds.

brentratliff’s picture

Here are my rewrite rules:

 RewriteBase /
  RewriteCond %{REQUEST_URI} ^(.+)/files/styles/adaptive/(.+)$
  RewriteCond %{REQUEST_URI} !/modules/image/sample.png
  RewriteCond %{HTTP_COOKIE} ais=([a-z0-9-_]+)
  RewriteRule ^(.+)/files/styles/adaptive/(.+)$ $1/files/styles/%1/$2 [R=302,L]

The images are being resized and written to the files directory at path files/styles/threshold-xxx/public/slides/image.jpg.

I have checked the images and they are the right size for each threshold folder. The only missing piece is the display of these images in the html.

brentratliff’s picture

By removing the 'adaptive' folder from my styles directory, it is now working but only on browser refresh. It doesn't dynamically reload the images as I resize it. The demo at http://demo.coldfrontlabs.ca/content/adaptive-images is working properly in my browser. I should also mention that it only works when the image style is set to flexslider. It does not work when set to image:adaptive. I don't know if Display Suite could possibly cause a conflict here. Thanks again.

brentratliff’s picture

I disabled Display Suite but that didn't help. I should also mention that I'm using the 2.x branch of the Media module.

spotzero’s picture

Hey brantratliff,

The cookie and rewrite rules only control the size of the downloaded image. Image scaling in the browser is done with CSS. AIS comes with a stylesheet that tries to do that:

img.adaptive {
  max-width: 100%;
  height: auto;
}

Of course that only works if the image element has the 'adaptive' class on it.

You'll need to either add the adaptive class to the image or update your theme to scale your images.

Thanks,

brentratliff’s picture

Thanks for the response. The adaptive class is present but since it is setting max-width and the original is always downloaded, it never changes. It's got to be the rewrite rules. I deleted the adaptive folder in the files directory and it was recreated as I hoped and the original sized images were written there. However, no threshold sized images were written inside the adaptive folder. They should be, right? Or are they written in the top level styles directory under the respective threshold-xxx subs? The threshold-xxx directories don't even exist on my development server (Acquia DevCloud).

spotzero’s picture

That does sound like its the problem with the rewrite rules. Do you have a link I can try?

Thanks.

brentratliff’s picture

I set the theme to Bartik. http://jrdentistrydev.devcloud.acquia-sites.com/content/state-art-techno.... The Flexi Slide at the top is set to adaptive as is the node image display in the content area. Thanks.

spotzero’s picture

Ok, the rewrite isn't being triggered at all, but clean urls in on, so I assume the .htaccess file it being parsed.

The next thing to check it that the AIS rules:

# AIS: Adaptive Image Style
  RewriteBase /
  RewriteCond %{REQUEST_URI} ^(.+)/files/styles/adaptive/(.+)$
  RewriteCond %{REQUEST_URI} !/modules/image/sample.png
  RewriteCond %{HTTP_COOKIE} ais=([a-z0-9-_]+)
  RewriteRule ^(.+)/files/styles/adaptive/(.+)$ $1/files/styles/%1/$2 [R=302,L]

MUST come become the clean-url rules:

  # Pass all requests not referring directly to files in the filesystem to
  # index.php. Clean URLs are handled in drupal_environment_initialize().
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^ index.php [L]

Do the AIS rules come before the clean-url rules in your htaccess file?

Thanks,

brentratliff’s picture

Yes, they do. I'm running into this issue on both the dev environment you looked at and my local as well. The .htaccess file in drupal root is checked into the git repo so they should both be using it. I'm checking with Acquia to see if my .htaccess file is being recognized or if there is another one somewhere else I'm missing. Thanks again for the help.

brentratliff’s picture

Ok, I read all the module code and tested my .htaccess files on dev and local and they are being parsed. Locally, when I refresh my browser in a smaller width, the image is written to the files directory under the correct threshold-xxx directory. I have confirmed that the cookie is being properly set by the js. The image has the adaptive class as well. With the right cookie, the right classes, and the images existing in the threshold-xxx directories, I can only believe that the mechanism for downloading the correct image in the redirect is not working. Unfortunately, I do not know how to troubleshoot rewrite logic in a .htaccess file. Any ideas?

brentratliff’s picture

Here's something interesting. When I resize the browser, the image does not change. However, if I right-click the image and open it in a new tab, the correct image appears from the threshold-xxx directory based on my current screen size. I still cannot get the rewrite rules to work on the Acquia dev server though. It will not create the threshold-xxx directories.

brentratliff’s picture

Status: Active » Closed (duplicate)

I'm marking this as closed as it was a rewrite rule issue. The rules still are not working on Acquia DevCloud. Additionally, my problem is with the integration of FlexSlider in a Views Slideshow so I'll start an issue there.