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

@@ -145,6 +145,7 @@
 
     > alchemy-message,
     > .labels,
+    > .image,
     > .elements,
     > p {
       display: block;
@@ -158,6 +159,13 @@
       font-weight: var(--font-weight_normal);
     }
 
+    .image img {
+      width: auto;
+      max-width: 100%;
+      max-height: 160px;
+      border-radius: var(--border-radius_medium);
+    }
+
     .elements {
       display: flex;
       flex-direction: column;

app/stylesheets/alchemy/admin/page_definitions.scss

@@ -29,6 +29,11 @@
       <% end %>
     </div>
   <% end %>
+  <% if page_definition.image %>
+    <div class="image">
+      <%= image_tag page_definition.image %>
+    </div>
+  <% end %>
   <% if page_definition.has_hint? %>
     <p class="description"><%= page_definition.hint %></p>
   <% end %>

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) }