How is the resizing done?
Resizing is done server-size, using Concrete5's getThumbnail function. When the image is first added to a page, the browser measures the width of the area / layout using javascript and sends the width back to the server using an AJAX call. The server responds with a URL for the corrently resized image to use. This value is cached for the next user, and is periodically updated.
Doesn't that add lots of extra load to the page?
Not really. If the width is cached then there's no extra overhead over a normal image request. If it's not cached, there is one extra AJAX request per page load (all auto-sized image blocks send their data in a combined AJAX request).
What versions of Concrete5 are suopported?
Currently we are listing this as 5.6.0.2 but we know that it will work on 5.5 and possibly earlier versions. Once we have taken the time to test the addon thoroughly on 5.5 and earlier in all browsers, we will update the minimum requirement for the block.
Will this stretch a small image?
No. The image will be downscaled to fit the area, but will not be stretched if it's smaller than the area. There is the option to center an image if it is smaller than the area it's placed in.
Why do dropshadows not show when I place this block in the sidebar?
Many Concrete5 themes use the overflow:hidden CSS property to hide any content that overflows the sidebar area. There are 2 workarounds to this problem.
1. Add a few pixels of margin to your Auto-sized image block.
2. Add the following CSS to main.css in your theme, to allow the overflow to be visible.
#sidebar {
overflow: visible!important;
}
Does the border width / padding / margin get included in the width calculations?
Yes. If you place the block in a 300px wide area, and there is a 2px border around the image, the resulting size will be 296px wide. The border width is calculated from the DOM, so it doesn't matter if the border is applied using the Suto-sized Image settings page, or manually via your own CSS.
How is height calculated?
Only the width is auto-sized. The height is always kept in proportion to the width of the image (ie it will never crop or stretch an image).
Why is there a delay in resizing when I move the block between areas?
While you are editing a page, the script checks the size of the image blocks every 5 seconds or so to see if you have moved a block or resized an area. If it detects that the area has changed, the image will resize. So a delay of a few seconds when moving a block or resizing a layout is normal.
Why do the images get a bit larger every time I exit edit mode?
When you are in edit mode, all the areas are a little smaller than usual due to the dotted red border around each block. So while in edit mode, the images are always a few pixels smaller to accommodate this. When you leave edit mode, the images grow to fill the new space available (without the red borders).
Does this support mobile templates?
Currently the mobile theme will be served the same sized image as the desktop version. Currently this works fine (ie it doesn't brea the page) but we plan to improve support for mobile themes going forward.
Will you be adding support for round corners in IE?
In order for this to be supported in old version of IE, you need a javascript library like CurvyCorners. Unfortunately the license for CurvyCorners doesn't let us distribute it as a part of this package. So instead, we will aim to test CurvyCorners and make sure it works, then provide instructions on how to integrate this if you want it. The extra HTML added by CurvyCorners does make the block more complicated.
Will you be adding support for dropshadows in older versions of IE?
This is something we will be unlikely to add support for. For our websites, we normally just let the dropshadow disappear for older IE browsers.
How do I configure ColorBox?
Colorbox has a great range of API options which are all documented on their website. Simply copy-paste the options you want, one per line, into the settings page of Auto-sized Image. There are some examples of how to do this on the settings page itself. Just be careful that some options require quotes around them, and others don't.
Can I use a different popup library to Colorbox?
Sure. Colorbox is my personal favourite, but if you already have something else installed on your site it would be madness to run 2 popup systems at the same time. The settings page allows you to disable Colorbox. Next, you will need to attach a lightbox event to target "a.auto_sized_image_lightbox" links. If you need to modify the rel attribute, you may also need to override the view or create a custom template.
Does this support responsive layouts?
Not currently - the image block will resize to one fixed size which is then served to all visitors. Currently it does not serve multiple versions for different sized browsers.