Download

Download allows linking to an asset for download. Optionally displays a title, description, metadata and a download action.

Github URL
Adobe URL
Source URL
Title
Standard
Content

Simple Download with only an Action Text and Download Asset configured. The Title and Description are by default taken from the provided asset.

Result

Lava flowing into the ocean

Lava flowing into the ocean
Filename
lava-into-ocean.jpg
Size
495 KB
Format
image/jpeg
Download
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/download
titleFromAsset: true
textIsRich: true
actionText: Download
descriptionFromAsset: true
Markup:
<div class="download">
  <div id="download-28221f57f4" class="cmp-download">
    <h3 class="cmp-download__title">
      <a class="cmp-download__title-link" href="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg.coredownload.jpeg">Lava flowing into the ocean</a>
    </h3>
    <div class="cmp-download__description">Lava flowing into the ocean</div>
    <dl class="cmp-download__properties">
      <div class="cmp-download__property cmp-download__property--filename">
        <dt class="cmp-download__property-label">Filename</dt>
        <dd class="cmp-download__property-content">lava-into-ocean.jpg</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--size">
        <dt class="cmp-download__property-label">Size</dt>
        <dd class="cmp-download__property-content">495 KB</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--format">
        <dt class="cmp-download__property-label">Format</dt>
        <dd class="cmp-download__property-content">image/jpeg</dd>
      </div>
    </dl>
    <a class="cmp-download__action" href="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg.coredownload.jpeg">
      <span class="cmp-download__action-text">Download</span>
    </a>
  </div>
</div>
JSON:
{"url":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg.coredownload.jpeg","title":"Lava flowing into the ocean","description":"Lava flowing into the ocean","actionText":"Download","filename":"lava-into-ocean.jpg","format":"image\/jpeg","size":"495 KB","extension":"jpeg",":type":"core-components-examples\/components\/download"}
PostCSS: CSS: Title
Title and Description
Content

By default, the Title and Description are taken from the provided asset. In this example, we provide a custom title and description for the download.

Result

Custom Title

Custom description

Filename
lava-into-ocean.jpg
Size
495 KB
Format
image/jpeg
Download
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Custom Title
fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
jcr:lastModifiedBy: admin
inline: false
jcr:created:
jcr:description: <p>Custom description</p>
jcr:lastModified:
sling:resourceType: core-components-examples/components/download
titleFromAsset: false
textIsRich: true
actionText: Download
descriptionFromAsset: false
Markup:
<div class="download">
  <div id="download-0e751b52e5" class="cmp-download">
    <h3 class="cmp-download__title">
      <a class="cmp-download__title-link" href="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg.coredownload.jpeg">Custom Title</a>
    </h3>
    <div class="cmp-download__description">
      <p>Custom description</p>
    </div>
    <dl class="cmp-download__properties">
      <div class="cmp-download__property cmp-download__property--filename">
        <dt class="cmp-download__property-label">Filename</dt>
        <dd class="cmp-download__property-content">lava-into-ocean.jpg</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--size">
        <dt class="cmp-download__property-label">Size</dt>
        <dd class="cmp-download__property-content">495 KB</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--format">
        <dt class="cmp-download__property-label">Format</dt>
        <dd class="cmp-download__property-content">image/jpeg</dd>
      </div>
    </dl>
    <a class="cmp-download__action" href="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg.coredownload.jpeg">
      <span class="cmp-download__action-text">Download</span>
    </a>
  </div>
</div>
JSON:
{"url":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg.coredownload.jpeg","title":"Custom Title","description":"<p>Custom description<\/p>\r\n","actionText":"Download","filename":"lava-into-ocean.jpg","format":"image\/jpeg","size":"495 KB","extension":"jpeg",":type":"core-components-examples\/components\/download"}
PostCSS: CSS: Title
Direct Upload
Content

It is possible to upload an asset directly from a local file system rather than selecting an asset from DAM.

Result

Uploaded Asset

Asset uploaded directly from a local file system

Filename
lava-into-ocean.jpg
Size
81 KB
Format
image/jpeg
Download
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:title: Uploaded Asset
jcr:lastModifiedBy: admin
fileName: lava-into-ocean.jpg
jcr:created:
jcr:description: <p>Asset uploaded directly from a local file system</p>
jcr:lastModified:
sling:resourceType: core-components-examples/components/download
titleFromAsset: false
textIsRich: true
actionText: Download
descriptionFromAsset: false
Markup:
<div class="download">
  <div id="download-527439bd06" class="cmp-download">
    <h3 class="cmp-download__title">
      <a class="cmp-download__title-link" href="/content/core-components-examples/library/page-authoring/download/_jcr_content/root/responsivegrid/demo_68071479/component/download/file.coredownload.jpeg/lava-into-ocean.jpg">Uploaded Asset</a>
    </h3>
    <div class="cmp-download__description">
      <p>Asset uploaded directly from a local file system</p>
    </div>
    <dl class="cmp-download__properties">
      <div class="cmp-download__property cmp-download__property--filename">
        <dt class="cmp-download__property-label">Filename</dt>
        <dd class="cmp-download__property-content">lava-into-ocean.jpg</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--size">
        <dt class="cmp-download__property-label">Size</dt>
        <dd class="cmp-download__property-content">81 KB</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--format">
        <dt class="cmp-download__property-label">Format</dt>
        <dd class="cmp-download__property-content">image/jpeg</dd>
      </div>
    </dl>
    <a class="cmp-download__action" href="/content/core-components-examples/library/page-authoring/download/_jcr_content/root/responsivegrid/demo_68071479/component/download/file.coredownload.jpeg/lava-into-ocean.jpg">
      <span class="cmp-download__action-text">Download</span>
    </a>
  </div>
</div>
JSON:
{"url":"\/content\/core-components-examples\/library\/page-authoring\/download\/jcr:content\/root\/responsivegrid\/demo_68071479\/component\/download\/file.coredownload.jpeg\/lava-into-ocean.jpg","title":"Uploaded Asset","description":"<p>Asset uploaded directly from a local file system<\/p>\r\n","actionText":"Download","filename":"lava-into-ocean.jpg","format":"image\/jpeg","size":"81 KB","extension":"jpeg",":type":"core-components-examples\/components\/download"}
PostCSS: CSS: Title
Display Inline
Content

By default the asset is downloaded directly, but it is also possible to display it inline in the browser.

Result

Lava flowing into the ocean

Lava flowing into the ocean
Filename
lava-into-ocean.jpg
Size
495 KB
Format
image/jpeg
View
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
jcr:lastModifiedBy: admin
inline: true
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/download
titleFromAsset: true
textIsRich: true
actionText: View
descriptionFromAsset: true
Markup:
<div class="download">
  <div id="download-8d8a0bafd7" class="cmp-download">
    <h3 class="cmp-download__title">
      <a class="cmp-download__title-link" href="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg.coredownload.inline.jpeg">Lava flowing into the ocean</a>
    </h3>
    <div class="cmp-download__description">Lava flowing into the ocean</div>
    <dl class="cmp-download__properties">
      <div class="cmp-download__property cmp-download__property--filename">
        <dt class="cmp-download__property-label">Filename</dt>
        <dd class="cmp-download__property-content">lava-into-ocean.jpg</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--size">
        <dt class="cmp-download__property-label">Size</dt>
        <dd class="cmp-download__property-content">495 KB</dd>
      </div>
      <div class="cmp-download__property cmp-download__property--format">
        <dt class="cmp-download__property-label">Format</dt>
        <dd class="cmp-download__property-content">image/jpeg</dd>
      </div>
    </dl>
    <a class="cmp-download__action" href="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg.coredownload.inline.jpeg">
      <span class="cmp-download__action-text">View</span>
    </a>
  </div>
</div>
JSON:
{"url":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg.coredownload.inline.jpeg","title":"Lava flowing into the ocean","description":"Lava flowing into the ocean","actionText":"View","filename":"lava-into-ocean.jpg","format":"image\/jpeg","size":"495 KB","extension":"jpeg",":type":"core-components-examples\/components\/download"}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *