/tmpl/cms/field_html/field_html_asset.tmpl

<div id="asset-field-<mt:var name="content_field_id" escape="html">" class="asset-field-container content-field" <mt:var name="required"> <mt:var name="multiple">>

<mt:loop name="asset_loop">
  <div class="mt-draggable"<mt:if name="multiple"> draggable="true" aria-grabbed="false"</mt:if>>
    <input type="hidden" name="content-field-<mt:var name="content_field_id" escape="html">" value="<mt:var name="asset_id" escape="html">">
    <div class="col-auto">
  <mt:if name="multiple">
      <mtapp:svgicon id="ic_move" title="Draggable">
  <mt:else>
      <mtapp:svgicon id="ic_blank" title="Blank">
  </mt:if>
    </div>
    <div class="col-auto">
  <mt:if name="asset_type" eq="audio">
      <mtapp:svgicon id="ic_audio" title="Audio" color="secondary">
  <mt:elseif name="asset_type" eq="image">
    <mt:if name="asset_preview_url">
      <span class="asset-preview-image picture small mr-3 mb-3">
        <img src="<mt:var name="asset_preview_url" escape="html">" width="<mt:var name="asset_preview_width" escape="html">" height="<mt:var name="asset_preview_height" escape="html">">
      </span>
    <mt:else>
      <mtapp:svgicon id="ic_image" title="Image" color="secondary">
    </mt:if>
  <mt:elseif name="asset_type" eq="video">
      <mtapp:svgicon id="ic_movie" title="Video" color="secondary">
  <mt:else>
      <mtapp:svgicon id="ic_file" title="Asset" color="secondary">
  </mt:if>
    </div>
    <div class="col text-wrap">
      <span class="align-top">
        <mt:var name="asset_label" escape="html">
      </span>
    </div>
    <div class="col-auto mr-3 d-none d-md-block">
      <a href="javascript:void(0)" class="remove">
        <__trans phrase="Remove">
      </a>
    </div>
    <div class="col-auto">
      <a class="d-inline-block" data-toggle="collapse" href="#collapse-<mt:var name="content_field_id" escape="html">-<mt:var name="asset_id" escape="html">" aria-expanded="false" aria-controls="collapse-<mt:var name="content_field_id" escape="html">-<mt:var name="asset_id" escape="html">">
        <mtapp:svgicon id="ic_collapse" title="Collapse" color="secondary">
      </a>
    </div>
    <div class="mt-flexBreak"></div>
    <div class="collapse mt-collapse__content w-100 pb-2" id="collapse-<mt:var name="content_field_id" escape="html">-<mt:var name="asset_id" escape="html">">
      <div class="row py-5 py-md-0">
        <div class="col text-wrap">
          <ul class="list-unstyled">
            <li class="asset-preview-title">
              <strong><__trans phrase="File Name"></strong>: <mt:var name="asset_file_name" escape="html">
            </li>
  <mt:if name="asset_type" eq="image">
            <li class="asset-preview-meta">
              <strong><__trans phrase="Dimensions"></strong>: <mt:var name="asset_dimensions" escape="html">
            </li>
  </mt:if>
          </ul>
        </div>
      </div>
      <div class="row mobile-remove-asset border-top pt-4 d-md-none">
        <div class="col-auto mx-auto">
          <a href="javascript:void(0)" class="remove">
            <__trans phrase="Remove">
          </a>
        </div>
      </div>
    </div>
  </div>
</mt:loop>

  <div class="alert alert-info mb-0">
  <mt:if name="multiple">
    <__trans phrase="No Assets">
  <mt:else>
    <__trans phrase="No Asset">
  </mt:if>
  </div>

</div>

<div class="mt-3">
  <a href="<mt:var name="script_url">?__mode=list_asset&_type=asset&blog_id=<mt:var name="blog_id">&dialog_view=1&no_insert=1&filter=class&filter_val=<mt:var name="asset_type_for_field">&require_type=<mt:var name="asset_type_for_field">&content_field_id=<mt:var name="content_field_id">" class="mt-open-dialog mt-modal-open d-inline-block" data-mt-modal-large>
    <mtapp:svgicon id="ic_add" title="Add" color="primary" size="sm">
<mt:if name="multiple">
    <__trans phrase="Add Assets">
<mt:else>
    <__trans phrase="Choose Asset">
</mt:if>
  </a>
</div>

<mt:unless name="loaded_asset_field_js">
  <mt:var name="loaded_asset_field_js" value="1">

  <mt:setvarblock name="css_include" append="1">
<style type="text/css">
.asset-field-container {
  margin-bottom: 5px;
  margin-top: 5px;
}

.asset-field-container div:not(:first-child).alert {
  display: none;
}

.placeholder {
    border: 1px dashed #c0c6c9;
    background-color: #fbfbfb;
    margin-bottom: 2px;
    padding: 0.5rem 0;
}

@media (max-width: 767.98px) {
    .asset-field-container .mt-draggable {
        padding-right: 0;
    }
    .asset-field-container .mt-draggable .mt-collapse__content .row:first-child {
        background-color: #F4F4F4;  /* $gray-lightest */
    }
    .asset-field-container .mt-draggable .mt-collapse__content .row:last-child {
        margin-right: -14px;
    }
}
</style>
  </mt:setvarblock>

  <mt:setvarblock name="jq_js_include" append="1">
jQuery.mtValidateAddRules({
  'div.asset-field-container': function ($e) {
      var multiple = $e.data('mt-multiple') ? true : false;
      var max = Number($e.data('mt-max-select')) || 0;
      var min = Number($e.data('mt-min-select')) || 0;
      var required = $e.data('mt-required') ? true : false;
      var selectedCount = $e.find('.mt-draggable').length;
      if ( multiple && max && max < selectedCount ) {
          this.error = true;
          this.errstr = trans('Assets less than or equal to [_1] must be selected', max);
          return false;
      }
      if ( multiple && min && min > selectedCount ) {
          this.error = true;
          this.errstr = trans('Assets greater than or equal to [_1] must be selected', min);
          return false;
      }
      if ( !multiple && selectedCount > 1 ) {
          this.error = true;
          this.errstr = trans('Only 1 asset can be selected');
          return false;
      }
      if ( required && selectedCount === 0 ) {
          this.error = true;
          this.errstr = trans('This field is required');
          return false;
      }
      return true;
  }
});

jQuery('.asset-field-container').on('click', 'a.remove', function () {
  var $container = jQuery(this).parents('.asset-field-container');

  jQuery(this).parents('.mt-draggable').remove();

  if ($container.data('mtValidator')) {
    $container.mtValid({ focus: false });
  }

  setDirty(true);
  log('found dirty form');
  app.setDirty();

  return false;
});

jQuery('.asset-field-container').on('click', '.mobile-remove-asset', function (e) {
  if (!MT.Util.isMobileView()) {
    return;
  }
  if (e.target.tagName == 'A') {
    return;
  }
  jQuery(this).find('a.remove').trigger('click');
  return false;
});

window.assetFieldSortableChanged = {};
  </mt:setvarblock>
</mt:unless>

<mt:setvarblock name="jq_js_include" append="1">
jQuery('#asset-field-<mt:var name="content_field_id" escape="html">').sortable({
  items: 'div.mt-draggable[draggable=true][aria-grabbed]',
  handle: MT.Util.isMobileView() ? '.col-auto:first' : false,
  placeholder: 'placeholder',
  distance: 3,
  opacity: 0.8,
  cursor: 'move',
  forcePlaceholderSize: true,
  containment: '.mt-mainContent',
  start: function (event, ui) {
    ui.item.attr('aria-grabbed', true);

    if (window.assetFieldSortableChanged[<mt:var name="content_field_id" escape="js">]) {
      ui.helper.offset({
        top: ui.helper.offset().top + jQuery('body').scrollTop()
      });
    }
  },
  sort: function (event, ui) {
    if (window.assetFieldSortableChanged[<mt:var name="content_field_id" escape="js">]) {
      ui.helper.offset({
        top: ui.helper.offset().top + jQuery('body').scrollTop()
      });
    }
  },
  change: function (event, ui) {
    window.assetFieldSortableChanged[<mt:var name="content_field_id" escape="js">] = true;
  },
  stop: function (event, ui) {
    ui.item.attr('aria-grabbed', false);
  }
});
</mt:setvarblock>