<!-- ### Begin: Element uploads ### -->
<div id="c977" class="frame frame-default frame-type-uploads frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Download with preview, file size and description
</h2>
</header>
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="https://www.bootstrap-package.com/fileadmin/introduction/images/streets/felix-russell-saw-182331.jpg" title="Cheers For The Years, by Felix Russell-Saw" target="_blank">
<picture>
<img loading="lazy" src="holder.js/75x75?auto=yes" width="75" height="75" intrinsicsize="75x75" title="" alt="" />
</picture>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="https://www.bootstrap-package.com/fileadmin/introduction/images/streets/felix-russell-saw-182331.jpg" title="Cheers For The Years, by Felix Russell-Saw" target="_blank">
<span class="uploads-filename">Cheers For The Years, by Felix Russell-Saw</span>
</a>
<span class="uploads-filesize"> 249 KB</span>
</h4>
<p class="uploads-filedescription">https://unsplash.com/photos/XyoW1MhPqbs</p>
</div>
</li>
<li class="media">
<div class="media-left">
<a href="https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3" title="TYPO3 - Still here" target="_blank">
<picture>
<img loading="lazy" src="holder.js/75x75?auto=yes" width="75" height="75" intrinsicsize="75x75" title="" alt="" />
</picture>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3" title="TYPO3 - Still here" target="_blank">
<span class="uploads-filename">TYPO3 - Still here</span>
</a>
<span class="uploads-filesize"> 1.13 MB</span>
</h4>
<p class="uploads-filedescription">The internet is the meanest place ever. Everybody knows that. So being "still here" in online business after 18 years is by no means a matter of course. That is all the more true, if the project in question is open source, rather than a profit-oriented business. So let's celebrate, because TYPO3 is "still here" and more successful than ever before.
</p>
</div>
</li>
<li class="media">
<div class="media-left">
<a href="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" title="Big Buck Bunny" target="_blank">
<picture>
<img loading="lazy" src="holder.js/75x75?auto=yes" width="75" height="75" intrinsicsize="75x75" title="" alt="" />
</picture>
</a>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" title="Big Buck Bunny" target="_blank">
<span class="uploads-filename">Big Buck Bunny</span>
</a>
<span class="uploads-filesize"> 61.88 MB</span>
</h4>
<p class="uploads-filedescription">Big Buck Bunny (code-named Project Peach) is a 2008 short computer-animated comedy film featuring animals of the forest, made by the Blender Institute, part of the Blender Foundation.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- ### End: Element uploads ### -->
{% extends media ? '@wrapper-frame' : '@wrapper-empty' %}
{% import "@macro-format" as format %}
{% set CType = 'uploads' %}
{% block main %}
{% include '@atom-header' %}
{% if media %}
<ul class="media-list">
{% for file in media %}
<li class="media">
{% if uploads_type == 2 %}
{# <f:if condition="{file -> bk2k:file.isImage()} || {file -> bk2k:file.isMedia()}"> #}
{% if file.thumbnail %}
<div class="media-left">
<a href="{{ file.url }}"{% if file.properties.title %} title="{{ file.properties.title }}"{% endif %}{% if target %} target="{{ target }}"{% endif %}>
{% include '@atom-image' with {
file: file.thumbnail
} %}
</a>
</div>
{% endif %}
{# </f:if> #}
{% endif %}
<div class="media-body">
<h4 class="media-heading">
<a href="{{ file.url }}"{% if file.properties.title %} title="{{ file.properties.title }}"{% endif %}{% if target %} target="{{ target }}"{% endif %}>
{% if uploads_type == 1 %}
<span class="uploads-fileicon">
{% set extension = file.url|split('.')|last %}
{% if extension == 'mp3' %}
<span class="bootstrappackageicon bootstrappackageicon-file-audio"></span>
{% elseif extension == 'avi' %}
<span class="bootstrappackageicon bootstrappackageicon-file-video"></span>
{% elseif extension == 'mov' %}
<span class="bootstrappackageicon bootstrappackageicon-file-video"></span>
{% elseif extension == 'mpg' %}
<span class="bootstrappackageicon bootstrappackageicon-file-video"></span>
{% elseif extension == 'mpeg' %}
<span class="bootstrappackageicon bootstrappackageicon-file-video"></span>
{% elseif extension == 'mkv' %}
<span class="bootstrappackageicon bootstrappackageicon-file-video"></span>
{% elseif extension == 'jpg' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'gif' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'png' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'bmp' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'ai' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'eps' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'ico' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'tga' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'tif' %}
<span class="bootstrappackageicon bootstrappackageicon-file-image"></span>
{% elseif extension == 'youtube' %}
<span class="bootstrappackageicon bootstrappackageicon-youtube"></span>
{% else %}
<span class="bootstrappackageicon bootstrappackageicon-file"></span>
{% endif %}
</span>
{% endif %}
<span class="uploads-filename">{% if file.properties.title %}{{ file.properties.title }}{% else %}{{ file.properties.name }}{% endif %}</span>
</a>
{% if filelink_size %}
<span class="uploads-filesize">{{ format.bytes(file.properties.size) }}</span>
{% endif %}
</h4>
{% if uploads_description %}
{% if file.properties.description %}
<p class="uploads-filedescription">{{ file.properties.description }}</p>
{% endif %}
{% endif %}
</div>
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
{
"bodytext": null,
"categories": null,
"CType": null,
"customId": null,
"date": null,
"frame_class": null,
"header": "Download with preview, file size and description",
"header_color": null,
"header_layout": 2,
"header_link": null,
"header_position": null,
"header_style": null,
"layout": null,
"space_after_class": null,
"space_before_class": null,
"space_inner_after_class": null,
"space_inner_before_class": null,
"subheader": null,
"target": "_blank",
"media": [
{
"url": "https://www.bootstrap-package.com/fileadmin/introduction/images/streets/felix-russell-saw-182331.jpg",
"thumbnail": {
"holder": {
"width": 75,
"height": 75
}
},
"properties": {
"title": "Cheers For The Years, by Felix Russell-Saw",
"description": "https://unsplash.com/photos/XyoW1MhPqbs",
"size": 249000
}
},
{
"url": "https://www.bootstrap-package.com/fileadmin/introduction/audio/typo3-still-here.mp3",
"thumbnail": {
"holder": {
"width": 75,
"height": 75
}
},
"properties": {
"title": "TYPO3 - Still here",
"description": "The internet is the meanest place ever. Everybody knows that. So being \"still here\" in online business after 18 years is by no means a matter of course. That is all the more true, if the project in question is open source, rather than a profit-oriented business. So let's celebrate, because TYPO3 is \"still here\" and more successful than ever before.\n",
"size": 1125302
}
},
{
"url": "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",
"thumbnail": {
"holder": {
"width": 75,
"height": 75
}
},
"properties": {
"title": "Big Buck Bunny",
"description": "Big Buck Bunny (code-named Project Peach) is a 2008 short computer-animated comedy film featuring animals of the forest, made by the Blender Institute, part of the Blender Foundation.\n",
"size": 61878609
}
}
],
"filelink_sorting": null,
"filelink_sorting_direction": null,
"filelink_size": true,
"uploads_description": true,
"uploads_type": 2
}
.media-list .bootstrappackageicon {
display: inline-block;
position: relative;
top: 4px;
&-file {
@extend .svg-download-file-26x26;
}
&-file-audio {
@extend .svg-download-audio-file-26x26;
}
&-file-image {
@extend .svg-download-image-file-26x26;
}
&-file-video {
@extend .svg-download-video-file-26x26;
}
&-youtube {
@extend .svg-download-youtube-26x26;
}
}
No notes defined.