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

@@ -116,6 +116,12 @@
     background-color: white;
     border-radius: var(--border-radius_medium);
 
+    > img {
+      width: auto;
+      max-width: 100%;
+      max-height: 160px;
+    }
+
     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.has_hint? %>
     <p><%= page_definition.hint %></p>
   <% end %>