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.

12 comments (Add your own)

1. John wrote:
Love it, great improvement with the auto optimization. But... no Photo gallery albums, eh?

Thu, August 16, 2012 @ 10:26 AM

2. Tommy Bailey wrote:

Thu, August 16, 2012 @ 10:27 AM

3. Matthew wrote:
@Tommy, @John, Thanks!

@John, —The new image element doubles as the photo gallery. If you add more than one image it automatically transforms into the photo gallery display style.

Thu, August 16, 2012 @ 10:30 AM

4. John wrote:
@Matthew - oh yeah, I totally get that. What I was asking about is the ability to have an organized set of albums *within* a gallery. For example I have a client who does artistic flooring tile... they have 5-6 images for each "job" they did and it would be nice to have the novice client be able to organize/add these in album's within a single gallery element.

Not to take away from the improvement that this is however because I think the image optimization thing is stellar. We like what we're seeing, just hoped a gallery improvement would have included this.

Thu, August 16, 2012 @ 10:38 AM

5. Tim wrote:
Very nice. Will the AdaptiveImage Technology be extended to all images in LightCMS? Or should we continue instructing users to upload images at the desired size for optimal page load?

Thu, August 16, 2012 @ 10:48 AM

6. Tim Wall wrote:
Tim, at this point the AdaptiveImage technology is used only in the Image Element, so if users are uploading images inside text elements, they will still want to size them as desired.

Thu, August 16, 2012 @ 11:59 AM

7. DaveChap wrote:
This is great guys! The video was great, btw. Can't wait to see more of this responsive imaging come to the blog and text element (fingers crossed).

Thu, August 16, 2012 @ 1:41 PM

8. Dustin wrote:
"@Matthew - oh yeah, I totally get that. What I was asking about is the ability to have an organized set of albums *within* a gallery. For example I have a client who does artistic flooring tile... they have 5-6 images for each "job" they did and it would be nice to have the novice client be able to organize/add these in album's within a single gallery element."


I would also like to see this feature. I have a mixed martial arts organization in the Midwest that would like to be able to upload an album for each event that they have inside of one gallery. The only alternative is to create a new sub-page with a new gallery on each page and have the child pages linked in a column or somewhere relevant on the page. I see that this does promote additional used pages which is a good thing for LightCMS because it promotes upselling on the packages. Not to complain at all, just one man's opinion. I love the CMS and the team behind it, they have been nothing but delightful to work with.

Thu, August 16, 2012 @ 4:21 PM

9. Brad Mardis wrote:
Once again this makes sense and works. Thanks

Thu, August 16, 2012 @ 4:42 PM

10. Damon wrote:
Just to be clear, this ability to drag and drop images, is it something I the web designer can do, or is it something my site users can do? ie. Can I easily make a site that lets my users upload hi-res images that are nicely auto-resized?

Wed, August 29, 2012 @ 6:12 PM

11. Tim Wall wrote:
Damon, it is available to users who have the ability to log in and edit the website. It isn't available to site visitors, though. Visitors can see the images that have been added but they wouldn't be able to add images themselves.

Thu, August 30, 2012 @ 10:22 AM

12. Mike Literman wrote:
I love the slideshow and have been using it with a lot of my clients but how about adding an optional pager to it. Maybe with the option of numbers or thumbnail images so people can jump to different images?

Wed, May 22, 2013 @ 10:52 AM

Add a New Comment


Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.



Try it today. It’s Free.

Takes less than 60 secondsNo commitmentNo payment information required

Get Started