Citation Component

The citation component is can be fully configured in AEM: The text and images all come from AEM.

You can use it:

• like an Editorial Component: to quote a person with an image
• like an image with some text on  top.

• All fields in the component are optional: Example: you are free to fill in only an image or to omit the author. 
• The component accepts any kind of image: PNG, JPEG or even an animated gif.
• The component has multiple layout options
• The fontsize of the title is dynamic: long titles can shrink in fontsize.
• The component can contain a hyperlink (optional) to an article-id or an aem-page.
  

You can choose to give this component a fixed aspect ratio. This way, it will always scale proportionally. This can be usefull to align multiple items in a row, or to show the full image without cropping.

Text will never be cropped: when the component is too small to fit all the text, it will grow despite the chosen aspect-ratio to ensure all the text is readable.

As you might of seen in the example above of the watch: you can position the title inside the component.

The title positioning behaves different when you use a aspect-ratio or not.

When no ratio is defined, the title positioning adds space above or below the title. This can be used to :

• show a specif section of the image. Example: the head of a person is often situated at the top of the image, so you don't want a title there.
  
• make the component larger, without choosing an aspect ratio
  

The title positioning interacts with the ratio in two ways:

1.  When choosing "regular", the title will not claim additional space above or below.
   
2. When choosing "large" or "extra large", the title will claim additional space. If it is a short title, it will often still fit in the aspect ratio. If it's a long title, it will ignore the aspect ratio and grow lager.  

The aspect ratio will scale proportionally, so the text will take much more space in the component on smaller viewpoints.
When you want to show a specific part of the image, you'll want to do this on every viewport. To ensure this, you can use the combination of options (aspect ratio + title positioning). Example below:  

You can find an example of image positioning below: depending on one of the 9 options, you can choose the location of the focus of the image  

The grid can have an impact on the component: like most components, the citation can stretch with the columns, to take an equal height as other components. This is done on the row, not on the component itself.