Images

Aspect ratio

To help create consistent page layouts, use one of the ratios provided for images and image containers.

<tg-aspect-ratio
    imageUrl="http://placekitten.com/300/300"
    alt="Description of image"
    preload>
</tg-aspect-ratio>

Behaviour

• Improve page performance by setting [preload] to false. This defers loading the image until required.
• Images can be displayed by either imageUrl or placing a native img tag within the tg-aspect-ratio.
• Aspect ratio scales and crops an image based on the CSS attribute background-size:cover.
• 4:3 is the most common ratio uploaded by members.
• An alt tag is used when using a screen-reader. It should describe the content of an image. In some cases an alt tag might not be appropriate. e.g decorative images.
• Content can sit inside of Aspect ratio. Content does not affect the height of the container, it is absolutely positioned on top of the background content.

Image

The Image component uses a native image element and modern css to provide consistent aspect ratios for resized images, and support for lazy loading.

Example

Show options

API options

objectFit

containcoverfillnonescale-down

objectFit (optional)

Default (null)containcoverfillnonescale-down

If objectFit is not set it will default to contain.

loading

lazyeagernull

loading (optional)

Default (null)lazyeagernull

If preload is not set it will default to lazy.

Code

<img
    tgImage
    src="http://placekitten.com/300/300"
    alt="Amazing description of the image"
    loading="lazy"
    objectFit="contain">

Copy code

Behaviour

• Improve page performance should benefit as the default [loading] is set to lazy to false. Lazy loading defers the loading of resources on the page as long as they are not needed
• Images are scaled to display the whole image. By changing [objectFit] to [fill] it will zoom in the image to fill the available space.
• ObjectFit is not supported for IE.

Circle image

Creates round images, commonly used for member avatars. When circle image is placed on a link, drop shadows are applied so it appears on the action layer.

Example

Show options

API option

bordered

boolean

Code

<img
    tgCircleImage
    src="https://trademe.tmcdn.co.nz/tm/tangram/product/documentation/images/tangram-logo-pattern.png"
    alt="Tangram logo pattern"
    height="100px"
    width="100px">

Copy code

Expanding image

Expanding image enlarges an image until it meets the height or width of its container. The parent container must be relative or absolute in order for the expanding image to be visible.

<div
    style="position: relative; width: 100%; height: 500px;">
    <tg-expanding-image
        imageUrl="https://via.placeholder.com/450x300/ffc041/b35a13"
        aria-label="description of image">
        Some content.
    </tg-expanding-image>
</div>

Image viewer

Image viewer provides controls to browse through images one item at a time. It is often used inside other components such as cards or modals.

<tg-image-viewer2
    autoRotateSpeed="0">
    <tg-image-viewer-item
        *ngFor="let image of images">
        <tg-aspect-ratio
            imageUrl="image.url"
            ratio="4x3">
        </tg-aspect-ratio>
    </tg-image-viewer-item>
</tg-image-viewer2>

Behaviour

To lazy load images as they become visible, use aspect ratio inside image viewer.

SVG

Scalable Vector Graphics (SVGs) are used for vector based images, such as illustrations and logos. Use tg-svg for any SVG content that is not a Tangram icon.

Usage

• SVGs must be set up as a component. Using a *.component.html template, create a file that contains the SVG code. The component is used inside tg-svg.
  Note: You will need to import TgSvgModule into the SVG component module, and the module that imports the SVG.
• Always minify your source SVG before adding to the component.
• Consider using Angular templating features to control your SVG. For example:
  • You may have a logo that can be white or coloured. Give your SVG component an @Input() to manage the colour or use a class if the SVG is not dynamic.
  • You may have an illustration that changes at different breakpoints. Combine your SVGs, and use *ngIf to show and hide different elements.

<tg-svg
    alt="Description of image">
    <tg-hero-svg>
    </tg-hero-svg>
</tg-svg>

Dynamic SVG content

To dynamically change SVG content at run-time, consider using the [component] input. This allows you to directly inject a reference to a component class. Any components referenced in this way must be added to the entryComponents array of an NgModule.