Introducing the Image Element

Properly displaying images on websites has always been a challenge that LightCMS has worked to make as simple as possible. Now, with new devices and screen resolutions such as retina displays the challenge is even greater. We're up to the task, though, and today we're announcing a new element that puts LightCMS customers even further ahead of the curve. It's the new Image Element. Take a look at the video and read more about it below.

AdaptiveImage Technology: The Right Size Every Time

Simply drop your full-resolution image into the new Image Element and LightCMS will display it at the optimal size for its placement on your site. Not only that, but LightCMS will also detect if the user has a retina display and, if so, will upgrade the resolution accordingly. Drag the Image Element to a new region and its size is automatically updated. The Image Element even accommodates responsive design, resizing the image dynamically for browsers at any width on any device, including mobile phones.

The new image element with a single image automatically output at optimal dimensions

The Image Element's AdaptiveImage technology goes a step further with a mobile-first, two-step approach to image display. When a page is requested, the Image Element immediately loads a small-scale (480px wide) version of the image, sized to fill that space needed. Then, if a larger image is needed, it swaps in the higher-resolution alternative. This all happens behind the scenes and goes largely unnoticed, but the approach offers several advantages.

First, it ensures that mobile devices get their images faster and with less bandwidth usage. Second, because the smaller image doesn't require JavaScript to load, this technology ensures that an image is displayed even on browsers that don't have JavaScript enabled. Most platforms rely exclusively on JavaScript and leave non-JavaScript browsers with no image at all. But the LightCMS Image Element provides fine-tuned image display for browsers that support it, while still ensuring that all browsers still display the image, even without JavaScript.

You can disable our AdaptiveImage technology by changing the element's settings. Doing so will cause the Image Element to output the image file exactly as it was uploaded in all cases.

Drag and Drop Right Onto Your Page

Another big upgrade with the Image Element is the ability to drag and drop one or more images right onto your page. Whenever you add an Image Element, you'll see a drop zone which invites you to drag in your images. The drag and drop functionality is available for all browsers that support it, which is most all modern browsers except for Internet Explorer. 

Of course, you can also simply click the drop zone to upload through a file system as well. Uploading this way has been improved to allow the selection of multiple images in most browsers by using cmd+click (ctrl+click in Windows).

Single Image or Photo Gallery

The new Image Element will be replacing our existing Photo Gallery Element, and it will include all of the current Photo Gallery functionality. Uploading a single image will cause the Image Element to function as described above. Uploading multiple images will automatically convert it to Photo Gallery mode. If needed, you can force a single image to behave as a Photo Gallery by checking the "Force Photo Gallery" box on the advanced tab of the element's settings.

When we launch the Image Element, all existing Photo Galleries will be automatically converted to Image Elements and will continue to function exactly as they have been functioning.

Launch Details

The Image Element is scheduled to launch next Thursday, August 23, 2012. We wanted to give you advanced notice so you would be prepared for the change and be able to communicate to your own clients as well. Our video (above) is white-label (there is no mention of LightCMS) so you can share it and embed it in your own communications about the Image Element if you choose. You can find the video here on our white-label YouTube account and get your embed code from there.

We look forward to bringing you the new Image Element. Please let us know if you have any questions in the comments below.