Big & Beautiful Silverstripe Elemental Previews

admin.yml

---
Name: "admin-custom"
---
SilverStripe\Admin\LeftAndMain:
  extra_requirements_css:
    - "app/client/element-preview.css"

elemental-preview.css

/**
 * This file contains custom styles to display large previews of elemental
 * blocks when a little 28x28 icon just doesn't cut the mustard. Place this
 * CSS file anywhere in your project (which is web accessible or 'exposed'
 * and then link to use using SilverStripe\Admin\LeftAndMain::extra_requirements_css
 */

/**
 * Add your specific icons here. Classname used should be linked to your PHP.
 * For example our '3 column links block'
 *
 * private static $icon = 'large-preview large-preview--three-column-link';
 */

.large-preview--three-column-link::before {
  /* image can be any size you want but it's resized to fit within a 160x100 window */
  background-image: url(/_resources/app/client/img/block-previews/3-column-links-block.png);
}



/* add block popover overrides. You don't need  */
.element-editor-add-element__button.large-preview,
.element-editor-add-element__button.btn--icon-xl[class*=font-icon-] {
  background-color: #fafafd;
  max-height: none;
}

.element-editor-add-element__button.btn--icon-xl[class*=font-icon-]::before,
.element-editor-add-element__button.large-preview::before {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: contain;
  border-radius: 2px;
  text-align: center;
  font-size: 44px;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 8px 0;
}

.element-editor-add-element__button.large-preview::before {
  content: "";
}

/* elemental editor */
.element-editor-header__icon-container:has(.large-preview) {
  width: 160px;
  height: 100px;
  background-color: #fafafd;
}

.element-editor-header__icon-container:has(.large-preview) i::before {
  display: block;
  content: "";
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}