component update

The component is now called image rather than photo. So you'll look for "image" in the component list when adding this component to your page. It's built on Adobe Experience Manager's standard image component with UBCMS adjustments.

The component used to spread its settings across four tabs: Image, Caption, Image Properties, and Zoom. Those have been consolidated. The caption now lives on the Image tab, right below the alt text. Link and zoom, which sat on separate tabs before, are now combined into a single "Image click behavior" setting, also on the Image tab. That grouping makes sense because an image can only do one thing when clicked, so keeping the two choices together is clearer than splitting them apart. None of these features work differently; they're just easier to find.

NextGen adds a Styles tab to many components, and the image component is one of them. It gathers the settings that control how the image looks: its shape, its width, whether it floats to the left or right, and whether it has a border. In the old component these were tucked into the Image Properties tab; now they have a clear home of their own.

This is the most significant change, so it's worth a close look. The old fixed-pixel size list, with entries like "Small Landscape" and "Medium Portrait", has been replaced. Size is now controlled by two settings that work together. Shape sets the proportion of the image, and width sets how much of its container the image fills, expressed as a percentage rather than a fixed number of pixels. Because it's percentage-based, an image set to a quarter width fills 25% of whatever container it sits in, whether that's a narrow column or the full page.

Shape sets the proportion of your image.

• Original is the default and shows your full image with no cropping. This replaces the flexible height option you used to turn on by hand in static templates; now it's automatic.
• Landscape, portrait, and square apply fixed ratios, cropping the image to that proportion.
• Panorama is a narrow, wide ratio that stays within its container. This matches the old full size option.
• Circle applies a circular crop, useful for headshots and brand elements like those in the faces and voices component.
• Superhero fills the full height and width of the browser window for a large, edge-to-edge image. It's new to NextGen and adapts as the window resizes.

Width sets how much of the container the image fills, as a percentage.

• Full width is the default and fills 100% of the column or container the image sits in. 
• Smaller sizes work the same way: an image set to a quarter width fills 25% of whatever container holds it, whether that's a narrow column or a wide one. 
• Hero width extends the image edge to edge across the screen.

Two combinations are worth knowing:

• For a large, dynamic, edge-to-edge image, use the superhero shape at full width; it flexes to the full viewport and adapts to any screen. 
• Avoid pairing the original shape with hero width, which produces an oversized image, and avoid circle with hero, which distorts the crop.

One note on the width options: the list currently includes some unusual fractions that were carried over during conversion (ie - 1/6 and 5/6) so that existing sites kept their original proportions. These will be simplified to more predictable percentages over time.

Float positions the image to the left or right of the surrounding text. Border adds a solid border or leaves the image without one.

The Advanced tab holds two options:

• Adaptive Crop works exactly as it did before; see the existing Adaptive Crop documentation. 
• Lazy load is on by default and is a web best practice: it holds off loading the image until it scrolls into view, which saves bandwidth. Leave it on unless you have a specific reason not to.

Most of the component is unchanged, so you won't need to relearn it:

• Crop and rotate, configure, and Adaptive Crop all work as before. 
• Alt text, including the option to pull it from an image's asset, behaves the same way, as do captions and their rich text editing. 
• Zoom still works the way it always has, including the automatic gallery that forms when a page has more than one zoomable image. 
• Linking is unchanged as well. 

In most of these cases, the feature has simply moved to a slightly different spot in the reorganized interface