Allow to set image on page definitions

Helps to visualize the usage of the page.

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -9,6 +9,7 @@ class PageDefinition
     extend ActiveModel::Translation
 
     attribute :name, :string
+    attribute :image, :string
     attribute :elements, default: []
     attribute :autogenerate, default: []
     attribute :layoutpage, :boolean, default: false

app/models/alchemy/page_definition.rb

@@ -136,6 +136,12 @@
     background-color: var(--panel-background-color);
     border-radius: var(--border-radius_medium);
 
+    > img {
+      width: auto;
+      max-width: 100%;
+      max-height: 160px;
+    }
+
     alchemy-message,
     p {
       margin: var(--spacing-4) 0;

app/stylesheets/alchemy/admin/page_definitions.scss

@@ -11,6 +11,9 @@
       <% end %>
     </small>
   </h2>
+  <% if page_definition.image %>
+    <%= image_tag page_definition.image %>
+  <% end %>
   <% if page_definition.unique %>
     <sl-tooltip content="<%= Alchemy.t(:unique, scope: ["admin", "hints", Alchemy::PageDefinition.model_name.i18n_key]) %>">
       <small class="label">

app/views/alchemy/admin/page_definitions/_page_definition.html.erb

@@ -10,6 +10,7 @@ module Alchemy
       subject { definition.attributes }
 
       it { is_expected.to have_key(:name) }
+      it { is_expected.to have_key(:image) }
       it { is_expected.to have_key(:elements) }
       it { is_expected.to have_key(:autogenerate) }
       it { is_expected.to have_key(:layoutpage) }