alchemy_cms 8.0.0.a → 8.0.0.c

data/app/views/alchemy/admin/attachments/_files_list.html.erb

@@ -60,16 +60,26 @@
         object: attachment,
         file_attribute: 'file' %>
     <% end %>
-    <% table.with_action(:destroy, Alchemy.t(:delete_file)) do |attachment| %>
-      <%= link_to_confirm_dialog render_icon(:minus),
-        Alchemy.t(:confirm_to_delete_file),
-        alchemy.admin_attachment_path(
-          id: attachment,
-          q: search_filter_params[:q],
-          page: params[:page],
-          per_page: params[:per_page]
-        ),
-        class: "icon_button" %>
+    <% table.with_action(:destroy) do |attachment| %>
+      <% if attachment.deletable? %>
+        <sl-tooltip content="<%= Alchemy.t(:delete_file) %>">
+          <%= link_to_confirm_dialog render_icon(:minus),
+            Alchemy.t(:confirm_to_delete_file),
+            alchemy.admin_attachment_path(
+              id: attachment,
+              q: search_filter_params[:q],
+              page: params[:page],
+              per_page: params[:per_page]
+            ),
+            class: "icon_button" %>
+        </sl-tooltip>
+      <% else %>
+        <sl-tooltip content="<%= Alchemy.t(:in_use) %>">
+          <button class="icon_button disabled">
+            <%= render_icon(:minus) %>
+          </button>
+        </sl-tooltip>
+      <% end %>
     <% end %>
     <% table.with_action(:edit, Alchemy.t(:rename_file)) do |attachment| %>
       <%= link_to_dialog render_icon(:edit),

data/app/views/alchemy/admin/attachments/assign.js.erb

@@ -5,10 +5,11 @@
   $form_field.parent().find("> .file_name").text("<%= @attachment.name %>")
   $form_field.parent().find("> .file_icon").html("<%= j render_icon(@attachment.icon_css_class) %>")
   $form_field.parent().find("> .remove_file_link").removeClass("hidden")
-  Alchemy.closeCurrentDialog(function() {
-    var elementEditor = $form_field[0].closest("alchemy-element-editor")
+  Alchemy.closeCurrentDialog(() => {
+    const field = $form_field[0]
+    const elementEditor = field.closest("alchemy-element-editor")
     if (elementEditor) {
-      elementEditor.setDirty()
+      elementEditor.setDirty(field)
     }
   })
 })()

data/app/views/alchemy/admin/attachments/show.html.erb

@@ -1,45 +1,57 @@
-<div class="resource_info">
-  <div class="value">
-    <label>
-      <%= render_icon @attachment.icon_css_class %>
-    </label>
-    <p><%= @attachment.file_name %></p>
-  </div>
-  <div class="value with-icon">
-    <label><%= Alchemy::Attachment.human_attribute_name(:url) %></label>
-    <p><%= @attachment.url %></p>
-    <alchemy-clipboard-button
-      content="<%= @attachment.url %>"
-      success-text="<%= Alchemy.t("Copied to clipboard") %>"
-      class="icon_button--right"
-    ></alchemy-clipboard-button>
-  </div>
-  <div class="value with-icon">
-    <label><%= Alchemy::Attachment.human_attribute_name(:download_url) %></label>
-    <p><%= @attachment.url(download: true) %></p>
-    <alchemy-clipboard-button
-      content="<%= @attachment.url(download: true) %>"
-      success-text="<%= Alchemy.t("Copied to clipboard") %>"
-      class="icon_button--right"
-    ></alchemy-clipboard-button>
-  </div>
-</div>
+<div class="resource-details">
+  <aside>
+    <div class="resource_info">
+      <div class="value">
+        <label>
+          <%= render_icon @attachment.icon_css_class %>
+        </label>
+        <p><%= @attachment.file_name %></p>
+      </div>
+      <div class="value with-icon">
+        <label><%= Alchemy::Attachment.human_attribute_name(:url) %></label>
+        <p><%= @attachment.url %></p>
+        <alchemy-clipboard-button
+          content="<%= @attachment.url %>"
+          success-text="<%= Alchemy.t("Copied to clipboard") %>"
+          class="icon_button--right"
+        ></alchemy-clipboard-button>
+      </div>
+      <div class="value with-icon">
+        <label><%= Alchemy::Attachment.human_attribute_name(:download_url) %></label>
+        <p><%= @attachment.url(download: true) %></p>
+        <alchemy-clipboard-button
+          content="<%= @attachment.url(download: true) %>"
+          success-text="<%= Alchemy.t("Copied to clipboard") %>"
+          class="icon_button--right"
+        ></alchemy-clipboard-button>
+      </div>
+    </div>
 
-<% case @attachment.file_mime_type %>
-<% when *Alchemy::Filetypes::IMAGE_FILE_TYPES %>
-<div class="attachment_preview_container image-preview">
-  <%= image_tag(@attachment.url, class: "full_width") %>
-</div>
-<% when *Alchemy::Filetypes::AUDIO_FILE_TYPES %>
-<div class="attachment_preview_container player-preview">
-  <%= audio_tag(@attachment.url, preload: "none", controls: true, class: "full_width") %>
-</div>
-<% when *Alchemy::Filetypes::VIDEO_FILE_TYPES %>
-<div class="attachment_preview_container player-preview">
-  <%= video_tag(@attachment.url, preload: "metadata", controls: true, class: "full_width") %>
+    <hr>
+
+    <%= render "alchemy/admin/resources/resource_usage_info",
+      assignments: @assignments,
+      resource_name: :attachment %>
+  </aside>
+
+  <%# We need to use the `tag` helper for the div to be really empty for
+      the CSS `:empty` selector to work in order to hide this div if there is no preview %>
+  <%= tag.div(class: "resource-preview") do %>
+    <% case @attachment.file_mime_type %>
+    <% when *Alchemy::Filetypes::IMAGE_FILE_TYPES %>
+    <div class="attachment_preview_container">
+      <%= image_tag(@attachment.url) %>
+    </div>
+    <% when *Alchemy::Filetypes::AUDIO_FILE_TYPES %>
+    <div class="attachment_preview_container">
+      <%= audio_tag(@attachment.url, preload: "metadata", controls: true) %>
+    </div>
+    <% when *Alchemy::Filetypes::VIDEO_FILE_TYPES %>
+    <div class="attachment_preview_container">
+      <%= video_tag(@attachment.url, preload: "metadata", controls: true) %>
+    </div>
+    <% when "application/pdf" %>
+    <iframe src="<%= @attachment.url %>" frameborder="0"></iframe>
+    <% end %>
+  <% end %>
 </div>
-<% when "application/pdf" %>
-<iframe src="<%= @attachment.url %>" frameborder=0 class="full-iframe">
-  Your browser does not support frames.
-</iframe>
-<% end %>

data/app/views/alchemy/admin/crop.html.erb

@@ -12,7 +12,7 @@
   </div>
   <form>
     <%= button_tag Alchemy.t(:apply), type: 'submit' %>
-    <%= button_tag Alchemy.t('Reset Imagemask'), class: 'reset_mask', type: 'reset' %>
+    <%= button_tag Alchemy.t('Reset Imagemask'), class: 'reset_mask secondary', type: 'reset' %>
   </form>
 </div>
 <% end %>

data/app/views/alchemy/admin/dashboard/index.html.erb

@@ -7,7 +7,7 @@
       title: Alchemy.t(:info),
       dialog_options: {
         title: Alchemy.t(:info),
-        size: "420x435"
+        size: "420x380"
       },
       if_permitted_to: [:info, :alchemy_admin_dashboard],
       hotkey: 'alt+i'

data/app/views/alchemy/admin/dashboard/info.html.erb

@@ -1,12 +1,42 @@
+<div class="logo">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 267 91"
+  >
+    <path
+      d="M261.749 29.77h-9.812l-.72 2.738a193.53 193.53 0 0 0-.802 3.217c-.334-1.384-.604-2.5-.767-3.162l-.685-2.792H234.075c-1.102-.371-2.338-.564-3.705-.564-2.537 0-4.557.864-6.104 1.934-1.406-1.15-3.402-1.934-6.221-1.934-1.341 0-2.524.242-3.564.625l-.006-.061H201.334v4.17c-2.345-3.051-5.884-4.735-10.401-4.735-4.196 0-8.831 1.936-11.655 6.784-1.194-3.746-3.896-6.784-9.557-6.784-1.385 0-2.626.24-3.727.617v-12.19l-4.204.623-6.934 1.027-3.132.464v10.324a22.109 22.109 0 0 0-6.086-.864c-5.96 0-9.341 2.652-11.128 4.876-.108.133-.2.284-.303.422V17.633l-4.207.623-6.933 1.027-3.131.464v24.04l-5.118-18.709-.739-2.701H99.863l-.745 2.686L95.854 36.8 80.915 21.597a2.922 2.922 0 0 0-2.823-.776l-18.554 4.875a2.918 2.918 0 0 0-.634-.981L39.437 4.906a2.927 2.927 0 0 0-2.826-.777L9.797 11.173a2.92 2.92 0 0 0-2.073 2.054L.372 40.078a2.922 2.922 0 0 0 .735 2.818L20.6 62.705a2.921 2.921 0 0 0 2.822.774l9.259-2.43-3.051 11.1a2.921 2.921 0 0 0 .735 2.821l10.94 11.122a2.92 2.92 0 0 0 2.822.778l15.08-3.953a2.919 2.919 0 0 0 2.077-2.055l3.536-12.978.316.324a2.928 2.928 0 0 0 2.064.872c.254.001.508-.031.761-.098l20.839-5.48H103.275l.72-2.733.82-3.121h3.794l.822 3.122.718 2.732h24.059v-4.307c.07.092.133.194.207.282 1.729 2.119 5.001 4.643 10.76 4.643 2.735 0 4.945-.705 6.55-1.415v.797H180.119v-4.383c2.392 3.007 5.737 4.495 9.134 4.885-1.602 1.106-3.095 2.759-4.467 4.952-2.161 3.454-3.211 6.441-3.211 9.137 0 2.014.524 3.774 1.562 5.236 1.388 1.967 3.57 3.053 6.143 3.053.226 0 .384-.016.896-.073.142-.014.243-.025.312-.03 1.014-.043 2.078-.446 4.047-1.521.468-.248.973-.622 2.077-1.656.966 3.029 2.97 3.501 4.119 3.501 2.479 0 4.354-1.665 4.575-4.057.007-.045.041-.233.189-.649.774 1.335 2.059 2.415 4.188 2.415 2.658 0 4.791-2.088 6.555-4.378.065.155.132.312.203.47 1.794 4.082 4.646 4.694 6.185 4.694.76 0 1.52-.168 2.307-.503.228.213.463.419.726.605a6.818 6.818 0 0 0 3.993 1.302c2.273 0 4.515-.764 6.661-2.274 3.357-2.369 4.061-5.111 4.061-6.996 0-2.266-1.092-4.215-3.014-5.406a4.177 4.177 0 0 0 2.142-1.312c.918 1.27 1.794 2.475 2.303 3.129l1.917 2.468 2.74-1.503.268-.144c2.382-1.291 7.335-3.979 9.847-12.048l8.677-27.888 1.479-4.759h-4.984z"
+      fill="transparent"
+    />
+    <path
+      fill="currentColor"
+      d="M102.705 26.102h8.626l9.245 33.793h-7.549l-1.541-5.856h-9.448l-1.541 5.856h-7.189l9.397-33.793zm.411 23.008h7.291c-1.282-5.857-2.925-12.841-3.594-16.487-.719 3.647-2.362 10.63-3.697 16.487zm27.472 10.786h-6.931V22.969l6.931-1.026v37.953zm22.187-1.748c-.977.409-3.545 2.364-7.549 2.364-6.883 0-10.682-4.314-10.682-13.405 0-9.554 3.953-14.176 11.143-14.176 2.878 0 5.239.719 6.163 1.079l-.822 5.083c-.666-.256-2.517-.822-4.365-.822-3.388 0-4.981 2.62-4.981 8.579 0 6.061 1.747 8.267 4.775 8.267 2.108 0 4.008-1.128 4.726-1.386l1.592 4.417zm2.671-35.179l6.931-1.026v14.943h.105c.717-.667 3.079-3.954 7.291-3.954 4.826 0 6.728 2.979 6.728 9.193v17.771h-6.934V43.819c0-3.801-.616-4.879-2.721-4.879-2.107 0-3.853 2.157-4.47 2.876v18.079h-6.931V22.969zm44.73 35.026c-.771.514-3.956 2.518-9.038 2.518-5.957 0-10.785-3.852-10.785-13.097 0-9.811 4.775-14.484 10.63-14.484 5.854 0 9.963 3.646 9.963 12.273 0 1.851-.257 3.339-.309 3.597h-13.401c.05 4.571 2.311 6.469 5.235 6.469 2.773 0 5.086-1.231 6.319-1.795l1.386 4.519zm-12.941-13.509h7.034c0-5.237-1.437-6.624-3.338-6.624-1.798 0-3.646 1.643-3.696 6.624zm17.82-10.989h6.107l.31 3.543c.772-.925 2.722-4.109 6.624-4.109 2.98 0 4.828 1.027 5.598 4.057.874-1.181 3.03-4.057 6.728-4.057 4.468 0 6.37 2.517 6.37 9.141v17.823h-6.883V42.637c0-2.311-.358-3.697-2.158-3.697-1.797 0-3.183 2.054-3.543 2.876v18.079h-6.625V42.637c0-2.311-.358-3.697-2.157-3.697-1.796 0-3.131 2.003-3.542 2.876v18.079h-6.828V33.497zm56.744 0l-8.679 27.887c-2.156 6.934-6.213 8.886-8.37 10.067-.718-.926-2.414-3.287-3.081-4.213.771-.668 4.467-2.566 5.546-6.778l-8.318-26.963h7.239c.771 3.132 3.545 14.688 4.314 19.002.821-4.417 3.545-15.87 4.367-19.002h6.982z"
+    />
+    <g>
+      <path
+        fill="currentColor"
+        d="M193.986 68.011c.319 0 .667.193 1.031.578.897.95 1.506 1.125 2.353.546.367-.254.548-.633.508-1.05-.054-.799-.66-1.456-1.799-1.957-.818-.364-1.438-.541-1.896-.541-2.436.013-4.74 1.736-6.854 5.116-1.807 2.889-2.722 5.389-2.722 7.435 0 1.336.326 2.474.969 3.379.796 1.128 1.983 1.701 3.526 1.701.029 0 .213-.016.555-.054.268-.028.427-.045.47-.046.306 0 .867-.139 2.703-1.14.226-.117.704-.468 2.439-2.166 1.932-1.896 2.285-2.549 2.366-2.884.084-.275.01-.583-.22-.921-.238-.344-.523-.518-.838-.518a.786.786 0 0 0-.708.429c-.872 1.35-1.932 2.444-3.146 3.266-1.295.868-2.615 1.308-3.923 1.308-.778 0-1.671-.234-1.671-2.074 0-1.427.742-3.47 2.211-6.08 1.621-2.872 3.183-4.327 4.646-4.327zm30.25 10.553c-.354 0-.695.247-1.103.798-.301.408-.535.409-.654.408-.259-.01-1.135-.388-1.441-4.977l-.305-4.414c-.25-1.795-.915-2.704-1.979-2.704-.68 0-1.78.545-4.245 4.804a46.07 46.07 0 0 1-2.457 3.695c-.936 1.256-1.511 1.87-1.856 2.171-.082-.436-.124-.979-.124-1.635 0-.533.027-1.253.081-2.143.055-.995.089-1.633.101-1.925.039-2.004-.251-3.293-.885-3.941a1.569 1.569 0 0 0-1.157-.483c-1.114 0-2.453 1.26-4.214 3.968-.44.683-1.144 1.88-2.093 3.565.149-2.311.529-4.59 1.141-6.795.071-.267.054-.669-.433-1.089-.33-.287-.703-.436-1.107-.436-.863 0-1.277 1.173-1.539 2.19-.313 1.16-.526 2.592-.635 4.245-.119 1.754-.181 3.891-.181 6.36 0 .357.075.868.233 1.577.203.807.5 1.631 1.17 1.631.813 0 1.32-.423 1.381-1.157.113-1.165 1.095-3.422 2.918-6.71 1.54-2.804 2.334-3.953 2.701-4.42 0 .089 0 .194-.005.32-.15 3.265-.211 5.245-.182 5.886.105 2.516.823 3.792 2.139 3.792 1.21 0 2.685-1.261 4.636-3.968.255-.355 2.324-3.588 3.537-5.488.234-.37.414-.648.545-.854.012.086.021.184.031.293.052.55.064 1.329.038 2.328v2.002c.01 1.115.313 2.354.903 3.685.812 1.851 1.907 2.786 3.252 2.786.459 0 .972-.164 1.575-.502.819-.475 1.234-1.083 1.234-1.804.001-.652-.392-1.059-1.021-1.059zm6.628-4.902c-2.19 0-2.468-.365-2.475-.365 0-.874.821-2.04 2.372-3.37 1.809-1.556 2.828-1.882 3.366-1.882.036 0 .073.003.123.006.072.004.298.046.826.328.721.386.872.415 1.009.415.727 0 1.163-.494 1.163-1.324 0-.631-.425-1.187-1.268-1.647-.651-.35-1.201-.517-1.684-.517-1.572 0-3.401 1.039-5.592 3.175-2.195 2.138-3.262 3.892-3.262 5.361 0 .738.509 1.313 1.518 1.711.65.258 1.33.402 2.023.432l3.86.141c.473.023.891.157 1.28.407.556.367.619.737.619.983 0 .86-1.161 1.629-2.133 2.122-1.358.688-2.57 1.035-3.598 1.035-.625 0-.625-.247-.625-.444 0-.104.017-.197.054-.283.126-.3.213-.694.266-1.218l.035-.339-.312-.132c-.656-.279-1.311.032-1.813.841-.316.495-.47.93-.47 1.33 0 .904.4 1.646 1.192 2.199a3.557 3.557 0 0 0 2.134.712c1.598 0 3.218-.569 4.811-1.693 1.794-1.263 2.701-2.733 2.701-4.371.002-2.398-2.057-3.613-6.12-3.613z"
+      />
+    </g>
+    <g fill-rule="evenodd" clip-rule="evenodd" fill="currentColor">
+      <path
+        d="M47.632 51.588L23.382 57.956 5.754 40.043 12.401 15.762 36.65 9.393 54.254 27.305z"
+      />
+      <path
+        d="M57.42 79.029L43.781 82.603 33.888 72.543 37.632 58.91 51.244 55.334 61.138 65.395z"
+      />
+      <path
+        d="M86.963 59.079L67.775 64.128 53.829 49.94 59.066 30.726 78.277 25.679 92.223 39.865z"
+      />
+    </g>
+  </svg>
+  Version <%= @alchemy_version %>
+</div>
+
 <p class="center">
-  <%= image_tag('alchemy/alchemy-logo.svg', width: 267, height: 91) %>
-</p>
-<h2 class="center">
-  v<%= @alchemy_version %><br>
   <small>
-    Ruby v<%= RUBY_VERSION %>, Rails v<%= Rails.version %>
+    Ruby <%= RUBY_VERSION %>, Rails <%= Rails.version %>
   </small>
-</h2>
+</p>
 
 <% if can?(:update_check, :alchemy_admin_dashboard) %>
   <alchemy-update-check url="<%= alchemy.update_check_path %>">

data/app/views/alchemy/admin/elements/_form.html.erb

@@ -6,15 +6,15 @@
   <%= turbo_frame_tag @element do %>
     <%= alchemy_form_for [:admin, @element], remote: false do |form| %>
       <%= form.hidden_field :page_version_id %>
-      <%= form.input :name,
-        label: Alchemy.t(:element_of_type),
-        collection: elements_for_select(@elements),
-        prompt: Alchemy.t(:select_element),
-        selected: (@elements.first if @elements.count == 1),
-        input_html: {is: 'alchemy-select', autofocus: true} %>
-      <% if @elements.count == 1 %>
-        <%= form.hidden_field :name, value: @elements.first.name %>
-      <% end %>
+      <div class="input">
+        <%= form.label(:name, class: "control-label required") do %>
+          <%= Alchemy.t(:element_of_type) %><abbr>*</abbr>
+        <% end %>
+        <%= render Alchemy::Admin::ElementSelect.new(
+          @elements,
+          field_name: form.field_name(:name)
+        ) %>
+      </div>
       <%= form.hidden_field :parent_element_id, value: @parent_element.try(:id) %>
       <%= form.submit Alchemy.t(:add) %>
     <%- end -%>

data/app/views/alchemy/admin/elements/_header.html.erb

@@ -5,7 +5,10 @@
     <% elsif element.deprecated? %>
       <%= hint_with_tooltip element.deprecation_notice %>
     <% else %>
-      <%= render_icon('draggable', style: false, class: 'element', fixed_width: false) %>
+      <span class="icon element">
+        <%= element.definition.icon_file %>
+      </span>
+      <%= render_icon(:draggable, style: false, fixed_width: false) %>
     <% end %>
   </span>
   <span class="element-title">
@@ -21,14 +24,13 @@
       <%= Alchemy.t(:element_hidden) %>
     </span>
   </span>
-  <%= button_tag({
-    title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),
-    class: "element-toggle"
-  }) do %>
-    <% if element.compact? %>
-      <%= render_icon "more-2" %>
-    <% else %>
-      <%= render_icon element.folded? ? "arrow-left-s" : "arrow-down-s" %>
+  <sl-tooltip content="<%= Alchemy.t(element.folded? ? :show_element_content : :hide_element_content) %>">
+    <%= button_tag(class: "element-toggle") do %>
+      <% if element.compact? %>
+        <%= render_icon "more-2" %>
+      <% else %>
+        <%= render_icon element.folded? ? "arrow-left-s" : "arrow-down-s" %>
+      <% end %>
     <% end %>
-  <% end %>
+  </sl-tooltip>
 </div>

data/app/views/alchemy/admin/ingredients/_picture_fields.html.erb

@@ -15,7 +15,7 @@
       then css_classes
     else
       css_classes.map do |klass|
-        [Alchemy.t(klass, scope: "picture_ingredients.css_classes", default: picture_editor.css_class.camelcase), klass]
+        [Alchemy.t(klass, scope: "picture_ingredients.css_classes", default: ingredient.css_class&.camelcase), klass]
       end
     end %>
   <%= f.input :css_class, collection: css_classes_collection, include_blank: false %>

data/app/views/alchemy/admin/nodes/_form.html.erb

@@ -16,7 +16,11 @@
       <%= render Alchemy::Admin::PageSelect.new(node.page, allow_clear: true, query_params: {contentpages: true}) do %>
         <%= f.input :page_id, label: Alchemy::Page.model_name.human %>
       <% end %>
-      <%= f.input :url, input_html: { disabled: node.page }, hint: Alchemy.t(:node_url_hint) %>
+      <%= f.input :url, as: :string, input_html: {
+          disabled: node.page,
+          pattern: '/.*|[a-zA-Z][\w\+\-\.]*://.+',
+          title: Alchemy.t(:node_url_hint)
+        }, hint: Alchemy.t(:node_url_hint) %>
       <%= f.input :title %>
       <%= f.input :nofollow %>
       <%= f.input :external %>

data/app/views/alchemy/admin/pages/info.html.erb

@@ -15,7 +15,7 @@
   </div>
   <div class="value">
     <label><%= Alchemy::Page.human_attribute_name(:urlname) %></label>
-    <p><%= "/#{@page.urlname}" %></p>
+    <p><%= @page.url_path %></p>
   </div>
   <div class="value">
     <label><%= Alchemy.t(:page_status) %></label>

data/app/views/alchemy/admin/partials/_search_form.html.erb

@@ -8,6 +8,7 @@
       <%= render_icon('search') %>
     </button>
     <%= f.search_field resource_handler.search_field_name,
+      value: params.dig(:q, resource_handler.search_field_name),
       class: 'search_input_field',
       placeholder: Alchemy.t(:search) %>
     <%= link_to render_icon(:times, size: '1x'), url,

data/app/views/alchemy/admin/pictures/_archive.html.erb

@@ -1,23 +1,19 @@
-<div id="library_sidebar">
-  <%= render 'filter_bar' if resource_has_filters %>
+<%= render "library_sidebar" %>
 
-  <% if Alchemy::Picture.tag_counts.any? %>
-    <div class="tag-list with_filter_bar<%= ' filtered' if search_filter_params[:tagged_with].present? %>">
-      <%= render 'tag_list' %>
-    </div>
-  <% end %>
-</div>
+<% forwarded_params = search_filter_params.merge(
+  page: params[:page],
+  size: @size.presence
+).to_h %>
 
-<%= form_tag delete_multiple_admin_pictures_path, method: :delete do %>
+<%= form_tag delete_multiple_admin_pictures_path(forwarded_params), method: :delete do %>
   <div class="selected_item_tools hidden">
     <h3><%= Alchemy.t(:edit_selected_pictures) %></h3>
     <%= link_to(
       render_icon(:edit, size: '1x') + Alchemy.t("Edit"),
-      edit_multiple_admin_pictures_path,
+      edit_multiple_admin_pictures_path(forwarded_params),
       class: 'button with_icon',
       title: Alchemy.t('Edit multiple pictures'),
-      id: 'edit_multiple_pictures',
-      style: 'float: none'
+      id: 'edit_multiple_pictures'
     ) %>
     <%= button_tag render_icon("delete-bin-2", size: '1x') + Alchemy.t("Delete"),
       'data-turbo-confirm': Alchemy.t(:confirm_to_delete_images_from_server),
@@ -25,27 +21,21 @@
     &nbsp;<%= Alchemy.t(:or) %>&nbsp;
     <%= link_to(
       render_icon(:close) + Alchemy.t("Clear selection"),
-      admin_pictures_path(
-        q: search_filter_params[:q],
-        tagged_with: search_filter_params[:tagged_with],
-        size: @size,
-        filter: search_filter_params[:filter]
-      ),
-      class: 'secondary button with_icon',
-      style: 'float: none'
+      admin_pictures_path(forwarded_params),
+      class: 'secondary button with_icon'
     ) %>
   </div>
-  <% if @pictures.blank? and @recent_pictures.blank? and search_filter_params[:q].blank? %>
+  <% if @pictures.blank? && @recent_pictures.blank? && search_filter_params[:q].blank? %>
     <%= render_message do %>
       <%= Alchemy.t(:no_images_in_archive) %>
     <% end %>
-  <% elsif @pictures.blank? and @recent_pictures.blank? %>
+  <% elsif @pictures.blank? && @recent_pictures.blank? %>
     <%= render_message do %>
       <%= Alchemy.t(:no_search_results) %>
     <% end %>
   <% else %>
     <div id="pictures" class="picture-size--<%= @size %>">
-      <%= render partial: 'picture', collection: @pictures %>
+      <%= render partial: "picture", collection: @pictures, locals: {picture_offset: picture_offset} %>
     </div>
   <% end %>
 <% end %>

data/app/views/alchemy/admin/pictures/_archive_overlay.html.erb

@@ -2,12 +2,7 @@
   <%= render 'filter_and_size_bar' %>
 </div>
 <div id="assign_image_list" class="with_padding<%= search_filter_params[:tagged_with].present? ? ' filtered' : '' %>">
-  <div id="library_sidebar">
-    <%= render 'filter_bar' if resource_has_filters %>
-    <div class="tag-list">
-      <%= render 'tag_list' %>
-    </div>
-  </div>
+  <%= render "library_sidebar" %>
   <% if @pictures.empty? %>
     <%= render_message do %>
       <% if search_filter_params.empty? %>

data/app/views/alchemy/admin/pictures/_form.html.erb

@@ -1,5 +1,14 @@
 <%= turbo_frame_tag(@picture) do %>
-  <%= alchemy_form_for [alchemy, :admin, @picture] do |f| %>
+  <%= alchemy_form_for @picture,
+    url: alchemy.admin_picture_path(
+      @picture,
+      search_filter_params.merge(
+        size: @size,
+        picture_index: picture_index
+      ).to_h
+    ),
+    remote: false,
+    class: "picture-form" do |f| %>
     <%= f.input :name %>
     <%= render "alchemy/admin/pictures/picture_description_field", f: f %>
     <%= render Alchemy::Admin::TagsAutocomplete.new(additional_class: "input") do %>
@@ -7,10 +16,6 @@
       <%= f.text_field :tag_list, value: f.object.tag_list.join(",") %>
       <small class="hint"><%= Alchemy.t('Please seperate the tags with commata') %></small>
     <% end %>
-    <%= hidden_field_tag :q, search_filter_params[:q] %>
-    <%= hidden_field_tag :size, @size %>
-    <%= hidden_field_tag :tagged_with, search_filter_params[:tagged_with] %>
-    <%= hidden_field_tag :filter, search_filter_params[:filter] %>
     <%= f.submit Alchemy.t(:save) %>
   <% end %>
 <% end %>

data/app/views/alchemy/admin/pictures/_infos.html.erb

@@ -1,55 +1,24 @@
-<div class="resource_info">
-  <div class="picture-file-infos">
-    <div class="value">
-      <label><%= Alchemy::Picture.human_attribute_name(:image_file_name) %></label>
-      <p><%= @picture.image_file_name %></p>
-    </div>
-    <div class="value">
-      <label><%= Alchemy::Picture.human_attribute_name(:image_file_dimensions) %></label>
-      <p><%= @picture.image_file_dimensions %>px</p>
-    </div>
-    <div class="value">
-      <label><%= Alchemy::Picture.human_attribute_name(:image_file_size) %></label>
-      <p><%= number_to_human_size @picture.image_file_size %></p>
-    </div>
+<div class="resource_info file-infos">
+  <div class="value">
+    <label><%= Alchemy::Picture.human_attribute_name(:image_file_name) %></label>
+    <p><%= @picture.image_file_name %></p>
   </div>
-</div>
-
-<div class="picture-usage-info resource_info">
-  <h3>
-    <%= Alchemy.t(:this_picture_is_used_on_these_pages) %>
-  </h3>
-  <div id="pictures_page_list">
-    <% if @assignments.any? %>
-      <ul>
-        <% @assignments.group_by(&:page).each do |page, picture_ingredients| %>
-          <% if page %>
-            <li>
-              <h3>
-                <%= render_icon 'file' %>
-                <p><%= link_to page.name, edit_admin_page_path(page) %></p>
-              </h3>
-              <ul class="list">
-                <% picture_ingredients.group_by(&:element).each do |element, picture_ingredients| %>
-                  <li class="<%= cycle('even', 'odd') %>">
-                    <% page_link = link_to element.display_name_with_preview_text,
-                                   edit_admin_page_path(page, anchor: "element_#{element.id}") %>
-                    <% ingredients = picture_ingredients.map { |p| Alchemy::IngredientEditor.new(p).translated_role }.to_sentence %>
-                    <%= render_icon('draggable', style: false) %>
-                    <p>
-                      <%== Alchemy.t(:pictures_in_page, page: page_link, pictures: ingredients) %>
-                    </p>
-                  </li>
-                <% end %>
-              </ul>
-            </li>
-          <% end %>
-        <% end %>
-      </ul>
-    <% else %>
-      <%= render_message do %>
-        <%= Alchemy.t(:picture_not_in_use_yet) %>
-      <% end %>
-    <% end %>
+  <div class="value">
+    <label><%= Alchemy::Picture.human_attribute_name(:image_file_dimensions) %></label>
+    <p><%= @picture.image_file_dimensions %>px</p>
+  </div>
+  <div class="value">
+    <label><%= Alchemy::Picture.human_attribute_name(:image_file_size) %></label>
+    <p><%= number_to_human_size @picture.image_file_size %></p>
+  </div>
+  <div class="value">
+    <label><%= Alchemy::Picture.human_attribute_name(:created_at) %></label>
+    <p><%= l(@picture.created_at, format: :"alchemy.default") %></p>
   </div>
 </div>
+
+<hr>
+
+<%= render "alchemy/admin/resources/resource_usage_info",
+  assignments: @assignments,
+  resource_name: :picture %>

data/app/views/alchemy/admin/pictures/_library_sidebar.html.erb

@@ -0,0 +1,7 @@
+<div id="library_sidebar">
+  <%= render "sorting_select" %>
+  <%= render "filter_bar" if resource_has_filters %>
+  <div class="tag-list">
+    <%= render "tag_list" %>
+  </div>
+</div>

data/app/views/alchemy/admin/pictures/_picture.html.erb

@@ -3,35 +3,34 @@
     <%= check_box_tag "picture_ids[]", picture.id %>
   </span>
   <% if picture.deletable? && can?(:destroy, picture) %>
-  <span class="picture_tool delete">
+  <div class="picture_tool delete">
     <sl-tooltip content="<%= Alchemy.t('Delete image') %>">
       <%= link_to_confirm_dialog(
         render_icon("delete-bin-2"),
         Alchemy.t(:confirm_to_delete_image_from_server),
         alchemy.admin_picture_path(
-          id: picture,
-          q: search_filter_params[:q],
-          page: params[:page],
-          tagged_with: search_filter_params[:tagged_with],
-          size: @size,
-          filter: search_filter_params[:filter]
+          picture,
+          search_filter_params.merge(
+            page: params[:page],
+            size: @size.presence
+          ).to_h
         )
       ) -%>
     </sl-tooltip>
-  </span>
+  </div>
   <% end %>
   <% picture_url = picture.thumbnail_url(size: preview_size(@size)) %>
-  <% image = image_tag(picture_url || "alchemy/missing-image.svg", alt: picture.name) %>
-  <% if can?(:edit, picture) && picture_url %>
+  <% image = picture_url ? image_tag(picture_url, alt: picture.name) : '<alchemy-icon name="file-damage"></alchemy-icon>'.html_safe %>
+  <% if can?(:edit, picture) %>
+    <% picture_index ||= picture_offset + picture_iteration.index %>
     <%= link_to(
       image,
       alchemy.admin_picture_path(
-        id: picture,
-        q: search_filter_params[:q],
-        page: params[:page],
-        tagged_with: search_filter_params[:tagged_with],
-        size: @size,
-        filter: search_filter_params[:filter]
+        picture,
+        search_filter_params.merge(
+          picture_index: picture_index.to_i + 1,
+          size: @size.presence
+        ).to_h
       ),
       class: 'thumbnail_background'
     ) %>

data/app/views/alchemy/admin/pictures/_picture_to_assign.html.erb

@@ -1,20 +1,24 @@
 <div class="picture_thumbnail" name="<%= picture_to_assign.name %>" id="assignable_<%= picture_to_assign.id %>">
-  <sl-tooltip content="<%= Alchemy.t(:assign_image) %>">
-    <%= link_to(
-      image_tag(
-        picture_to_assign.thumbnail_url(size: preview_size(size)) || "alchemy/missing-image.svg",
-        alt: picture_to_assign.name
-      ),
-      alchemy.assign_admin_picture_path(
-        id: picture_to_assign.id,
-        form_field_id: @form_field_id
-      ),
-      remote: true,
-      onclick: '$(self).attr("href", "#").off("click"); return false',
-      method: 'put',
-      class: 'thumbnail_background'
-    ) %>
-  </sl-tooltip>
+  <% if picture_to_assign.image_file %>
+    <sl-tooltip content="<%= Alchemy.t(:assign_image) %>">
+      <%= link_to(
+        image_tag(
+          picture_to_assign.thumbnail_url(size: preview_size(size)),
+          alt: picture_to_assign.name
+        ),
+        alchemy.assign_admin_picture_path(
+          id: picture_to_assign.id,
+          form_field_id: @form_field_id
+        ),
+        remote: true,
+        onclick: '$(self).attr("href", "#").off("click"); return false',
+        method: 'put',
+        class: 'thumbnail_background'
+      ) %>
+    </sl-tooltip>
+  <% else %>
+    <alchemy-icon name="file-damage"></alchemy-icon>
+  <% end %>
   <div class="picture_name" title="<%= picture_to_assign.name %>">
     <%= picture_to_assign.name %>
   </div>