Skip to main content Skip to navigation
View Navigation Comet

Embedded Images

Embedded images display annotated image assets with interactive controls.

Default

The default embedded image should include a title, caption, and link (and expand button) that expands the image to an immersive view. Image is vertically centered and cropped, if necessary, to fit within defined proportions.

Acid rain, damage to marble building decoration by
Acid rain and the dry deposition of acidic particles contribute not only to the deterioration of stone on buildings and monuments, but also the corrosion of metal on cars and other outdoor objects.
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-embedded">
    <div class="comet-embedded__media">
        <div class="comet-embedded__overlay">
            <div class="comet-embedded_action-bar">
                <a class="comet-embedded_action-bar__item" title="Expand" href="/player/view/assetguid/12345">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#expand"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
                    </svg>
                </a>
            </div>
        </div>
        <div class="comet-embedded__image-wrapper">
            <div class="comet-embedded__image" style="background-image: url(/images/components/embedded-image/12345.jpg);"></div>
        </div>
        <img class="comet-embedded__full-image comet-embedded__print-image" src="/images/components/embedded-image/12345.jpg" alt="">
    </div>
    <div class="comet-embedded__copy">
        <a class="comet-embedded__link-title" href="/player/view/assetguid/12345">
            <h5 class="comet-embedded__title">Acid rain, damage to marble building decoration by</h5>
        </a>
        <figcaption class="comet-embedded__caption">Acid rain and the dry deposition of acidic particles contribute not only to the deterioration of stone on buildings and monuments, but also the corrosion of metal on cars and other outdoor objects.</figcaption>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.embedded_image(
                guid="12345",
                title="Acid rain, damage to marble building decoration by",
                caption="Acid rain and the dry deposition of acidic particles contribute not only to the deterioration of stone on buildings and monuments, but also the corrosion of metal on cars and other outdoor objects."
            )}}
                
Macro params reference

Static

Omit titles, captions, and/or expand control to display a static image.

static image
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-embedded">
    <div class="comet-embedded__media">
        <div class="comet-embedded__overlay">
            <div class="comet-embedded_action-bar">
                <a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
                    </svg>
                </a>
            </div>
        </div>
        <div class="comet-embedded__image-wrapper">
            <div class="comet-embedded__image" style="background-image: url(/images/components/embedded-image/23456.jpg);"></div>
        </div>
        <img class="comet-embedded__full-image comet-embedded__print-image" src="/images/components/embedded-image/23456.jpg" alt="static image">
    </div>
    <div class="comet-embedded__copy">
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.embedded_image(
                guid="23456",
                expandable=false,
                alt="static image"
            )}}
                
Macro params reference

With Status

Display a pill (such as “New”) to highlight a unique image status.

New
U.S. Energy Consumption, 1776–2012
A seven-line graph shows the changes in different energy sources in the United States from 1776 to 2012. Petroleum is the most widely used source, followed by natural gas, coal, nuclear power, other renewables, hydroelectric power, and wood.
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-embedded">
    <div class="comet-embedded__media">
        <div class="comet-embedded__overlay">
            <div class="comet-embedded_action-bar">
                <a class="comet-embedded_action-bar__item" title="Expand" href="/player/view/assetguid/34567">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#expand"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
                    </svg>
                </a>
            </div>
        </div>
        <div class="comet-embedded__image-wrapper">
            <div class="comet-embedded__image" style="background-image: url(/images/components/embedded-image/34567.jpg);"></div>
        </div>
        <img class="comet-embedded__full-image comet-embedded__print-image" src="/images/components/embedded-image/34567.jpg" alt="">
    </div>
    <div class="comet-embedded__copy">
        <span class="comet-pill comet-pill--new comet-embedded__pill--new">New</span>
        <a class="comet-embedded__link-title" href="/player/view/assetguid/34567">
            <h5 class="comet-embedded__title">U.S. Energy Consumption, 1776–2012</h5>
        </a>
        <figcaption class="comet-embedded__caption">A seven-line graph shows the changes in different energy sources in the United States from 1776 to 2012. Petroleum is the most widely used source, followed by natural gas, coal, nuclear power, other renewables, hydroelectric power, and wood.</figcaption>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.embedded_image(
                guid="34567",
                title="U.S. Energy Consumption, 1776–2012",
                caption="A seven-line graph shows the changes in different energy sources in the United States from 1776 to 2012. Petroleum is the most widely used source, followed by natural gas, coal, nuclear power, other renewables, hydroelectric power, and wood.",
                new=true
            )}}
                
Macro params reference

Full Size

Display full image without cropping, sized proportionally to its containing element’s width.

A Jumping Cat
A photo shows a cat jumping.
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-embedded">
    <div class="comet-embedded__media">
        <div class="comet-embedded__overlay">
            <div class="comet-embedded_action-bar">
                <a class="comet-embedded_action-bar__item" title="Expand" href="/player/view/assetguid/45678">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#expand"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
                    </svg>
                </a>
            </div>
        </div>
        <img class="comet-embedded__full-image" src="/images/components/embedded-image/45678.jpg" alt="">
    </div>
    <div class="comet-embedded__copy">
        <a class="comet-embedded__link-title" href="/player/view/assetguid/45678">
            <h5 class="comet-embedded__title">A Jumping Cat</h5>
        </a>
        <figcaption class="comet-embedded__caption">A photo shows a cat jumping.</figcaption>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.embedded_image(
                guid="45678",
                title="A Jumping Cat",
                caption="A photo shows a cat jumping.",
                full_size=true
            )}}
                
Macro params reference

Contained

Display full height and width of portrait resolution images. A dark background matte is visible in the empty horizontal space.

Folk Dancers
A group of dancers dressed colorfully.
Copy to Clipboard Press Ctrl + C to copy 
<div class="comet-embedded">
    <div class="comet-embedded__media">
        <div class="comet-embedded__overlay">
            <div class="comet-embedded_action-bar">
                <a class="comet-embedded_action-bar__item" title="Expand" href="/player/view/assetguid/56789">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#expand"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
                    </svg>
                </a>
                <a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
                    <svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
                    </svg>
                </a>
            </div>
        </div>
        <div class="comet-embedded__image-wrapper">
            <div class="comet-embedded__image comet-embedded__image--contain" style="background-image: url(/images/components/embedded-image/56789.jpg);"></div>
        </div>
        <img class="comet-embedded__full-image comet-embedded__print-image" src="/images/components/embedded-image/56789.jpg" alt="">
    </div>
    <div class="comet-embedded__copy">
        <a class="comet-embedded__link-title" href="/player/view/assetguid/56789">
            <h5 class="comet-embedded__title">Folk Dancers</h5>
        </a>
        <figcaption class="comet-embedded__caption">A group of dancers dressed colorfully.</figcaption>
    </div>
</div>
Copy to Clipboard Press Ctrl + C to copy 
{{ comet.embedded_image(
                guid="56789",
                title="Folk Dancers",
                caption="A group of dancers dressed colorfully.",
                contained=true
            )}}
                
Macro params reference

##Guidelines

  • Display the full width of the parent row or column.
  • Display image content vertically centered, filling the entire embedded container, while retaining aspect ratio.
  • Expand to an immersive view when the title or Expand button is clicked.

##Class Reference

Class Applies to Outcome

.comet-embedded__overlay

<div>

Applies an overlay over entire image. Can be used to facilitate positioning of expand icon, or applied to an anchor to make entire image clickable.

.comet-embedded__image-wrapper

<div>

Applies to outer wrapper of image to facilitate the vertical alignment of media.

comet-embedded__image

<div>

Provides styling and positioning of image, background-image: url() is set to image path in line.

comet-embedded__image--contain

<div>

Provides styling and positioning of portrait image, uses background-sizing: contain to show full height.

.comet-embedded__full-image

<img>

Displays image thumbnail to fit in parent row or columns full width.

.comet-screenreader-only

<span>

Applies to span hidden unless viewed on screen reader (fallback for SVG icon).

Macro Params Reference

Embedded Image

Param Values Description

guid

images's guid

Guid associated with image to be displayed

href

path/to/expanded/view

Sets path to expanded view, combines with guid to create link to expanded image

src

path/to/image/directory

Sets path to image directory, combines with guid to create link to image

title

false (default) or string

Sets the title

caption

false (default) or string

Sets the caption

new

false (default) or true

Displays new pill

contained

false (default) or true

Setting to true causes portrait resolution images to be displayed at full height and width, with a dark matte filling the empty horizontal space.

expandable

true (default) or false

Setting to false removes the expand control and link from title

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1