Single Upload of Image Kind [WHIT-2857]

app/components/admin/edition_images/uploaded_images_component.html.erb

@@ -1,4 +1,4 @@
-<% if edition.configurable_document_type.present? %>
+<% if edition.configurable_document_type.present? && edition.allows_lead_image? %>
   <%= render "govuk_publishing_components/components/heading", {
     text: "Select a lead image",
     font_size: "l",

app/components/admin/edition_images/uploaded_images_component.rb

@@ -1,17 +1,20 @@
 # frozen_string_literal: true
 
 class Admin::EditionImages::UploadedImagesComponent < ViewComponent::Base
-  def initialize(edition:)
+  def initialize(edition:, image_kind: Whitehall.image_kinds.fetch("default"))
     @edition = edition
+    @image_kind = image_kind
   end
 
 private
 
   attr_reader :edition
 
   def document_images
-    return edition.images unless edition.can_have_custom_lead_image?
+    edition_images = edition.images.select { |image| Whitehall.image_kinds.fetch(image.image_data.image_kind) == @image_kind }
 
-    edition.images - [edition.lead_image].compact
+    return edition_images unless edition.can_have_custom_lead_image?
+
+    edition_images - [edition.lead_image].compact
   end
 end

app/controllers/admin/edition_images_controller.rb

@@ -41,9 +41,7 @@ def update
   def create
     @images = images_params.map { |image| create_image(image) }
 
-    if @images.empty?
-      flash.now.alert = "No images selected. Choose a valid JPEG, PNG, SVG or GIF."
-    elsif @images.all?(&:valid?)
+    if @images.all?(&:valid?)
       @images.each(&:save)
       @edition.update_lead_image if @edition.can_have_custom_lead_image?
       PublishingApiDocumentRepublishingWorker.perform_async(@edition.document_id, false)
@@ -53,7 +51,11 @@ def create
       @images.each { |image| @edition.images.delete(image) }
     end
 
-    render :index
+    if @images.count == 1 && @images.first.valid?
+      redirect_to edit_admin_edition_image_path(@edition, @images.first.id)
+    else
+      render :index
+    end
   end
 
   def create_image(image)
@@ -119,7 +121,7 @@ def enforce_permissions!
   end
 
   def images_params
-    params.fetch(:images, []).map { |image| image.permit(image_data: %i[file]) }
+    params.fetch(:images, []).map { |image| image.permit(image_data: %i[file image_kind]) }
   end
 
   def image_data_params

app/models/concerns/edition/images.rb

@@ -21,7 +21,11 @@ def process_associations_after_save(edition)
   end
 
   included do
-    has_many :images, foreign_key: "edition_id", dependent: :destroy
+    has_many :images, foreign_key: "edition_id", dependent: :destroy do
+      def of_kind(image_kind)
+        joins(:image_data).where(image_data: { image_kind: image_kind })
+      end
+    end
 
     accepts_nested_attributes_for :images, reject_if: :no_substantive_attributes?, allow_destroy: true
 

app/models/configurable_document_types/government_response.json

@@ -79,7 +79,15 @@
     "publishing_api_schema_name": "news_article",
     "publishing_api_document_type": "government_response",
     "rendering_app": "frontend",
-    "images_enabled": true,
+    "images": {
+      "enabled": true,
+      "permitted_image_kinds": [
+        {
+          "kind": "govspeak_embed",
+          "multiple": true
+        }
+      ]
+    },
     "send_change_history": true,
     "file_attachments_enabled": true,
     "organisations": null,

app/models/configurable_document_types/history_page.json

@@ -72,7 +72,15 @@
     "publishing_api_schema_name": "history",
     "publishing_api_document_type": "history",
     "rendering_app": "frontend",
-    "images_enabled": true,
+    "images": {
+      "enabled": true,
+      "permitted_image_kinds": [
+        {
+          "kind": "govspeak_embed",
+          "multiple": true
+        }
+      ]
+    },
     "send_change_history": false,
     "organisations": ["af07d5a5-df63-4ddc-9383-6a666845ebe9"],
     "backdating_enabled": false,

app/models/configurable_document_types/news_story.json

@@ -79,7 +79,15 @@
     "publishing_api_schema_name": "news_article",
     "publishing_api_document_type": "news_story",
     "rendering_app": "frontend",
-    "images_enabled": true,
+    "images": {
+      "enabled": true,
+      "permitted_image_kinds": [
+        {
+          "kind": "govspeak_embed",
+          "multiple": true
+        }
+      ]
+    },
     "send_change_history": true,
     "file_attachments_enabled": true,
     "organisations": null,

app/models/configurable_document_types/press_release.json

@@ -79,7 +79,15 @@
     "publishing_api_schema_name": "news_article",
     "publishing_api_document_type": "press_release",
     "rendering_app": "frontend",
-    "images_enabled": true,
+    "images": {
+      "enabled": true,
+      "permitted_image_kinds": [
+        {
+          "kind": "govspeak_embed",
+          "multiple": true
+        }
+      ]
+    },
     "send_change_history": true,
     "file_attachments_enabled": true,
     "organisations": null,

app/models/configurable_document_types/topical_event.json

@@ -111,7 +111,19 @@
     "publishing_api_schema_name": "topical_event",
     "publishing_api_document_type": "topical_event",
     "rendering_app": "collections",
-    "images_enabled": false,
+    "images": {
+      "enabled": true,
+      "permitted_image_kinds": [
+        {
+          "kind": "header",
+          "multiple": false
+        },
+        {
+          "kind": "logo",
+          "multiple": false
+        }        
+      ]
+    },
     "send_change_history": true,
     "file_attachments_enabled": false,
     "organisations": null,

app/models/configurable_document_types/world_news_story.json

@@ -78,7 +78,15 @@
     "publishing_api_schema_name": "news_article",
     "publishing_api_document_type": "world_news_story",
     "rendering_app": "frontend",
-    "images_enabled": true,
+    "images": {
+      "enabled": true,
+      "permitted_image_kinds": [
+        {
+          "kind": "govspeak_embed",
+          "multiple": true
+        }
+      ]
+    },
     "send_change_history": true,
     "file_attachments_enabled": true,
     "organisations": null,

app/models/edition.rb

@@ -429,6 +429,14 @@ def can_have_custom_lead_image?
     is_a?(Edition::CustomLeadImage)
   end
 
+  def allows_multiple_of_image_kind?(image_kind)
+    image_kind == "govspeak_embed"
+  end
+
+  def permitted_single_upload_image_kinds
+    []
+  end
+
   def images_have_unique_filenames?
     names = images.map(&:filename)
     names.uniq.length == names.length

app/models/image.rb

@@ -9,7 +9,7 @@ class Image < ApplicationRecord
 
   accepts_nested_attributes_for :image_data
 
-  delegate :filename, :content_type, :width, :height, :bitmap?, :svg?, :can_be_cropped?, :requires_crop?, to: :image_data
+  delegate :filename, :content_type, :width, :height, :bitmap?, :svg?, :can_be_cropped?, :requires_crop?, :image_kind, to: :image_data
 
   default_scope -> { order(:id) }
 

app/models/standard_edition.rb

@@ -43,6 +43,10 @@ def body
     block_content["body"]
   end
 
+  def lead_image
+    block_content["image"]
+  end
+
   def body=(_)
     nil
   end
@@ -59,8 +63,22 @@ def locale_can_be_changed?
     translatable? && translations.size <= 1
   end
 
+  def allows_lead_image?
+    type_instance.form["fields"]["image"].present?
+  end
+
   def allows_image_attachments?
-    type_instance.settings["images_enabled"]
+    type_instance.settings["images"]["enabled"]
+  end
+
+  def allows_multiple_of_image_kind?(image_kind)
+    return if type_instance.settings["images"]["permitted_image_kinds"].blank?
+
+    type_instance_image_kind = type_instance.settings["images"]["permitted_image_kinds"].detect { |permitted_image_kind| permitted_image_kind["kind"] == image_kind }
+
+    return if type_instance_image_kind.blank?
+
+    type_instance_image_kind["multiple"]
   end
 
   def allows_file_attachments?
@@ -99,6 +117,16 @@ def is_in_valid_state_for_type_conversion?
     %w[draft submitted rejected].include?(state)
   end
 
+  def permitted_single_upload_image_kinds
+    Whitehall.image_kinds.values.select { _1.permitted_uses.intersect?(type_instance.settings["images"]["permitted_image_kinds"].reject { |image| image["multiple"] }.map { |image| image["kind"] }) }
+  end
+
+  def permitted_image_kinds
+    return super unless type_instance.settings["images"]["permitted_image_kinds"]
+
+    Whitehall.image_kinds.values.select { _1.permitted_uses.intersect?(type_instance.settings["images"]["permitted_image_kinds"].map { |image| image["kind"] }) }
+  end
+
 private
 
   def string_for_slug

app/views/admin/edition_images/_image_upload.html.erb

@@ -1,36 +1,29 @@
+<%
+  image_kind ||= Whitehall.image_kinds.fetch("default")
+  text = image_kind.permitted_uses.include?("govspeak_embed") ? "Upload an image" : "Upload #{image_kind.display_name} image"
+%>
+
 <%= form_tag(
   admin_edition_images_path(@edition),
+  id: "#{image_kind.name}_image_upload_form",
   multipart: true,
 ) do %>
   <%= render "govuk_publishing_components/components/file_upload", {
     label: {
-      text: "Upload an image",
+      text:,
     },
     heading_level: 2,
     heading_size: "l",
     javascript: true,
-    multiple: true,
+    multiple: @edition.allows_multiple_of_image_kind?(image_kind.permitted_uses.first),
     name: "images[][image_data][file]",
     id: "edition_images_image_data_file",
     hint: raw('Images can be JPEG, PNG, SVG or GIF files. If you are uploading more than one image, <a class="govuk-link" href="https://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-and-videos">read the image guidance</a> on using unique file names.'),
     error_items: @new_image.present? ? errors_for(@new_image.errors, :"image_data.file") : nil,
     accept: "image/png, image/jpeg, image/gif, image/svg+xml",
   } %>
 
-  <% if @edition.permitted_image_kinds.size == 1 %>
-    <%= hidden_field_tag("image[image_data][image_kind]", @edition.permitted_image_kinds.first.name) %>
-  <% else %>
-    <%= render "govuk_publishing_components/components/radio", {
-      heading: "What kind of image is this?",
-      name: "image[image_data][image_kind]",
-      items: @edition.permitted_image_kinds.map do |image_kind|
-        {
-          value: image_kind.name,
-          text: image_kind.display_name,
-        }
-      end,
-    } %>
-  <% end %>
+  <%= hidden_field_tag("images[][image_data][image_kind]", image_kind.name) %>
 
    <%= render "govuk_publishing_components/components/details", {
       title: "You must use an SVG for charts and diagrams",

app/views/admin/edition_images/index.html.erb

@@ -10,7 +10,32 @@
       items: secondary_navigation_tabs_items(@edition, request.path),
     } %>
 
-    <%= render "image_upload", edition: @edition %>
-    <%= render Admin::EditionImages::UploadedImagesComponent.new(edition: @edition) %>
+    <% @edition.permitted_single_upload_image_kinds.each do |image_kind| %>
+
+      <% images_of_image_kind = @edition.images.of_kind(image_kind.name) %>
+
+      <% if images_of_image_kind.count == 0 || @edition.allows_multiple_of_image_kind?(image_kind) %>
+        <%= render "image_upload", edition: @edition, image_kind: %>
+      <% end %>
+
+      <% if images_of_image_kind.count > 0 %>
+        <%= render "govuk_publishing_components/components/heading", {
+          text: "Uploaded #{image_kind.display_name} images",
+          heading_level: 2,
+          font_size: "l",
+          margin_bottom: 2,
+        } %>
+        <ul id="uploaded_<%= image_kind.name %>_image_list" class="govuk-list">
+          <% images_of_image_kind.each do |image| %>
+            <%= render Admin::EditionImages::ImageComponent.new(edition: @edition, image: image, last_image: true) %>
+          <% end %>
+        </ul>
+      <% end %>
+    <% end %>
+
+    <% (@edition.permitted_image_kinds - @edition.permitted_single_upload_image_kinds).each do |image_kind| %>
+      <%= render "image_upload", edition: @edition, image_kind: %>
+      <%= render Admin::EditionImages::UploadedImagesComponent.new(edition: @edition, image_kind:) %>
+    <% end %>
   </div>
 </div>

config/image_kinds.yml

@@ -105,3 +105,23 @@ hero_desktop:
       width: 1200
       height: 400
       from_version: hero_desktop_2x
+topical_event_header:
+  display_name: "Header"
+  valid_width: 800
+  valid_height: 800
+  permitted_uses:
+    - header
+  versions:
+    - name: s800_header
+      width: 800
+      height: 800
+topical_event_logo:
+  display_name: "Logo"
+  valid_width: 800
+  valid_height: 800
+  permitted_uses:
+    - logo
+  versions:
+    - name: s800_logo
+      width: 800
+      height: 800