Saving cropped image in a specific folder

[Stefanowitsch]

Is there away to configure the cropping plugin that the cropped images get saved to a specific "cropped" folder, neither than using the same folder as the other images?

My problem is that I am using Adaptive Images and this plugin needs to have access to the assets folder. Thus when cropping an image in the backend it results in an error because the cropped image gets affacted by Adaptive Images.

 

[AndZyk]

Hello Stefanowitsch,

I never used the plugin Adaptive Images, but I would highly recommend you to checkout Resonsive Images. If you want to use them today there is the popular polyfill Picturefill and if you want to use Reponsive Images in combination with lazy loading there is the awesome plugin lazysizes. There is also the module MarkupSrcSet by @tpr, but I never used it and prefer to include the markup myself.

You have to get used to the markup at the beginning, but it is worth the effort.

As far to your question: I don't think it is possible to use an different folder for uploaded images:

Regards, Andreas

[Stefanowitsch]

Too bad that's not possible...

I have tried several other responsive image plugins but since they all work in the same way I always get problems when copping an image. 

[AndZyk]

Here is an example, how you could use Responsive Images with srcset for retina images in combination with lazysizes:

<?php
$image = $page->image->size(800, 600);
$imageRetina = $page->image->size(1600, 1200);

echo "
		<img class='lazyload'
			 src='{$config->urls->templates}images/1x1.gif'
			 data-sizes='auto'
			 data-src='{$image->url}'
			 data-srcset='{$image->url}, {$imageRetina->url} 2x'
			 width='{$image->width}'
			 height='{$image->height}'
			 alt='{$page->image->description}'>
	";

It is not that difficult, but you have to get used to the markup. Also be sure to check on different devices, if it actually works (for example retina devices). The Chrome developer tools are also good in debugging Responsive Images.

[szabesz]

More on the topic with module recommendations: 

 

[Stefanowitsch]

To everyone that has encountered the same problem, here is the simple solution:

You have to block the Adaptive Images access to the image folder when working in the PW backend.  Go to your htacess file and edit this line of code in the Adaptive Images block like this:

# don't apply the AI behaviour to images inside AI's cache folder:
RewriteCond %{REQUEST_URI} !ai-cache
RewriteCond %{QUERY_STRING} !nc

Background: I noticed that whenever an image is displayed in the backend, PW add's a parameter called "nc" to the file. I use this parameter to identfy when i DO NOT want Adaptive Images to scale the image