diff --git a/Gemfile b/Gemfile
index 091adfff6bb319247b24736322e9757f745ba007..b01ab29ad62464c6031fec4e4bd16c404928a6fa 100644
--- a/Gemfile
+++ b/Gemfile
@@ -50,7 +50,7 @@ gem 'summernote-rails', git: 'https://github.com/noesya/summernote-rails.git', b
 # gem 'summernote-rails', path: '../summernote-rails'
 gem 'two_factor_authentication', git: 'https://github.com/noesya/two_factor_authentication.git'
 # gem 'two_factor_authentication', path: '../two_factor_authentication'
-
+gem 'unsplash'
 
 group :development, :test do
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
diff --git a/Gemfile.lock b/Gemfile.lock
index d75a15fd9f09afa158fcfefae57a0dbb3c21a274..92c4809d69efee91c96d0dd265033cdeab118141 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -85,10 +85,10 @@ GEM
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
-    autoprefixer-rails (10.4.2.0)
+    autoprefixer-rails (10.4.7.0)
       execjs (~> 2)
     aws-eventstream (1.2.0)
-    aws-partitions (1.580.0)
+    aws-partitions (1.585.0)
     aws-sdk-core (3.130.2)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.525.0)
@@ -97,7 +97,7 @@ GEM
     aws-sdk-kms (1.56.0)
       aws-sdk-core (~> 3, >= 3.127.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.113.2)
+    aws-sdk-s3 (1.114.0)
       aws-sdk-core (~> 3, >= 3.127.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.4)
@@ -133,7 +133,7 @@ GEM
     childprocess (4.1.0)
     cocoon (1.2.15)
     concurrent-ruby (1.1.10)
-    countries (5.0.0)
+    countries (5.0.1)
       i18n_data (~> 0.16.0)
       sixarm_ruby_unaccent (~> 1.1)
     country_select (7.0.0)
@@ -166,7 +166,7 @@ GEM
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
     encryptor (3.0.0)
-    enum_help (0.0.18)
+    enum_help (0.0.19)
       activesupport (>= 3.0.0)
     erubi (1.10.0)
     ethon (0.15.0)
@@ -252,6 +252,7 @@ GEM
     js_cookie_rails (2.2.0)
       railties (>= 3.1)
     json (2.6.1)
+    jwt (2.3.0)
     kamifusen (1.11.2)
       image_processing
       rails
@@ -270,7 +271,7 @@ GEM
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.16.0)
+    loofah (2.17.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -296,6 +297,7 @@ GEM
     mini_portile2 (2.8.0)
     minitest (5.15.0)
     msgpack (1.5.1)
+    multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.1.1)
     mustermann (1.1.1)
@@ -305,6 +307,12 @@ GEM
     nokogiri (1.13.5)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
+    oauth2 (1.4.9)
+      faraday (>= 0.17.3, < 3.0)
+      jwt (>= 1.0, < 3.0)
+      multi_json (~> 1.3)
+      multi_xml (~> 0.5)
+      rack (>= 1.2, < 3)
     octokit (4.22.0)
       faraday (>= 0.9)
       sawyer (~> 0.8.0, >= 0.5.3)
@@ -442,6 +450,9 @@ GEM
     unf_ext (0.0.8.1)
     unicode-display_width (2.1.0)
     unicode_utils (1.4.0)
+    unsplash (2.1.0)
+      httparty (~> 0.16)
+      oauth2 (~> 1)
     vcr (6.1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
@@ -522,6 +533,7 @@ DEPENDENCIES
   summernote-rails!
   two_factor_authentication!
   tzinfo-data
+  unsplash
   vcr
   web-console (>= 4.1.0)
   webdrivers
@@ -531,4 +543,4 @@ RUBY VERSION
    ruby 2.7.5p203
 
 BUNDLED WITH
-   2.3.9
+   2.3.12
diff --git a/app/assets/stylesheets/commons/_block.sass b/app/assets/stylesheets/commons/_block.sass
index 4acd08cac2f9e8b41426a464b9c202efc055910c..6d8fcdc1a3527295cb0191346baad59bcff51963 100644
--- a/app/assets/stylesheets/commons/_block.sass
+++ b/app/assets/stylesheets/commons/_block.sass
@@ -1,5 +1,5 @@
 [v-cloak]
-    form, .app-form
+    form, .app-form, .app-content
         display: none
 [data-v-app]
     .spinner-border
diff --git a/app/controllers/admin/communication/unsplash_controller.rb b/app/controllers/admin/communication/unsplash_controller.rb
new file mode 100644
index 0000000000000000000000000000000000000000..b48411c31c323dc49df08905139553c061e64869
--- /dev/null
+++ b/app/controllers/admin/communication/unsplash_controller.rb
@@ -0,0 +1,22 @@
+class Admin::Communication::UnsplashController < Admin::Communication::ApplicationController
+  layout false
+
+  def index
+    if params[:query].blank?
+      @search = []
+      @total = 0
+      @total_pages = 0
+    else
+      p = {
+        query: params[:query],
+        page: (params[:page] || 1),
+        per_page: (params[:per_page] || 10),
+        orientation: (params[:orientation] || 'squarish'),
+        lang: (params[:lang] || 'en')
+      }
+      @search = Unsplash::Search.search "/search/photos", Unsplash::Photo, p
+      @total = @search.total
+      @total_pages = @search.total_pages
+    end
+  end
+end
diff --git a/app/controllers/admin/communication/website/categories_controller.rb b/app/controllers/admin/communication/website/categories_controller.rb
index 0db5e29c4ff1a3c543660cfa3425fc76a959e7de..a6ca1a9b350a477ce2f6f6f68ff4a27eb3c76b4f 100644
--- a/app/controllers/admin/communication/website/categories_controller.rb
+++ b/app/controllers/admin/communication/website/categories_controller.rb
@@ -55,6 +55,7 @@ class Admin::Communication::Website::CategoriesController < Admin::Communication
 
   def create
     @category.website = @website
+    @category.add_unsplash_image params[:unsplash]
     if @category.save_and_sync
       redirect_to admin_communication_website_category_path(@category), notice: t('admin.successfully_created_html', model: @category.to_s)
     else
@@ -64,6 +65,7 @@ class Admin::Communication::Website::CategoriesController < Admin::Communication
   end
 
   def update
+    @category.add_unsplash_image params[:unsplash]
     if @category.update_and_sync(category_params)
       redirect_to admin_communication_website_category_path(@category), notice: t('admin.successfully_updated_html', model: @category.to_s)
     else
@@ -95,7 +97,8 @@ class Admin::Communication::Website::CategoriesController < Admin::Communication
     params.require(:communication_website_category)
           .permit(
             :website_id, :name, :description, :text, :slug, :parent_id,
-            :featured_image, :featured_image_delete, :featured_image_infos, :featured_image_alt)
+            :featured_image, :featured_image_delete, :featured_image_infos, :featured_image_alt, :featured_image_credit
+          )
           .merge(university_id: current_university.id)
   end
 end
diff --git a/app/controllers/admin/communication/website/pages_controller.rb b/app/controllers/admin/communication/website/pages_controller.rb
index a1f81270301c6990dca361ab5c81d292db6f1556..4ff6e684dd1d13fecef999c7e55f5b90f0a6762c 100644
--- a/app/controllers/admin/communication/website/pages_controller.rb
+++ b/app/controllers/admin/communication/website/pages_controller.rb
@@ -46,6 +46,7 @@ class Admin::Communication::Website::PagesController < Admin::Communication::Web
 
   def create
     @page.website = @website
+    @page.add_unsplash_image params[:unsplash]
     if @page.save_and_sync
       redirect_to admin_communication_website_page_path(@page), notice: t('admin.successfully_created_html', model: @page.to_s)
     else
@@ -55,6 +56,7 @@ class Admin::Communication::Website::PagesController < Admin::Communication::Web
   end
 
   def update
+    @page.add_unsplash_image params[:unsplash]
     if @page.update_and_sync(page_params)
       redirect_to admin_communication_website_page_path(@page), notice: t('admin.successfully_updated_html', model: @page.to_s)
     else
@@ -84,10 +86,12 @@ class Admin::Communication::Website::PagesController < Admin::Communication::Web
 
   def page_params
     params.require(:communication_website_page)
-          .permit(:communication_website_id, :title, :breadcrumb_title, :bodyclass,
+          .permit(
+            :communication_website_id, :title, :breadcrumb_title, :bodyclass,
             :description, :description_short, :header_text, :text, :slug, :published,
-            :featured_image, :featured_image_delete, :featured_image_infos, :featured_image_alt,
-            :parent_id, :related_category_id, :language_id)
+            :featured_image, :featured_image_delete, :featured_image_infos, :featured_image_alt, :featured_image_credit,
+            :parent_id, :related_category_id, :language_id
+          )
           .merge(university_id: current_university.id)
   end
 end
diff --git a/app/controllers/admin/communication/website/posts_controller.rb b/app/controllers/admin/communication/website/posts_controller.rb
index ed0dc79e12d090a29aa9ff9f47497aefc9fff1b8..b1fdd519511e9b1e13617466e267d86f162b7973 100644
--- a/app/controllers/admin/communication/website/posts_controller.rb
+++ b/app/controllers/admin/communication/website/posts_controller.rb
@@ -36,6 +36,11 @@ class Admin::Communication::Website::PostsController < Admin::Communication::Web
     breadcrumb
   end
 
+  def static
+    @about = @post
+    render layout: false
+  end
+
   def new
     @post.website = @website
     @post.author_id = current_user.person&.id
@@ -49,6 +54,7 @@ class Admin::Communication::Website::PostsController < Admin::Communication::Web
 
   def create
     @post.website = @website
+    @post.add_unsplash_image params[:unsplash]
     if @post.save_and_sync
       redirect_to admin_communication_website_post_path(@post), notice: t('admin.successfully_created_html', model: @post.to_s)
     else
@@ -58,6 +64,7 @@ class Admin::Communication::Website::PostsController < Admin::Communication::Web
   end
 
   def update
+    @post.add_unsplash_image params[:unsplash]
     if @post.update_and_sync(post_params)
       redirect_to admin_communication_website_post_path(@post), notice: t('admin.successfully_updated_html', model: @post.to_s)
     else
@@ -85,8 +92,8 @@ class Admin::Communication::Website::PostsController < Admin::Communication::Web
     params.require(:communication_website_post)
           .permit(
             :university_id, :website_id, :title, :description, :description_short, :text,
-            :published, :published_at, :featured_image, :featured_image_delete,
-            :featured_image_infos, :featured_image_alt, :slug, :pinned,
+            :published, :published_at, :slug, :pinned,
+            :featured_image, :featured_image_delete, :featured_image_infos, :featured_image_alt, :featured_image_credit,
             :author_id, :language_id, category_ids: []
           )
           .merge(university_id: current_university.id)
diff --git a/app/controllers/admin/education/programs_controller.rb b/app/controllers/admin/education/programs_controller.rb
index 393d6158a1efd57de6d9fcfbedf9dd6c51a3d317..2e23f18aee585409d4aa077adc491c74731f625d 100644
--- a/app/controllers/admin/education/programs_controller.rb
+++ b/app/controllers/admin/education/programs_controller.rb
@@ -54,6 +54,7 @@ class Admin::Education::ProgramsController < Admin::Education::ApplicationContro
 
   def create
     @program.university = current_university
+    @program.add_unsplash_image params[:unsplash]
     if @program.save_and_sync
       redirect_to [:admin, @program], notice: t('admin.successfully_created_html', model: @program.to_s)
     else
@@ -63,6 +64,7 @@ class Admin::Education::ProgramsController < Admin::Education::ApplicationContro
   end
 
   def update
+    @program.add_unsplash_image params[:unsplash]
     if @program.update_and_sync(program_params)
       redirect_to [:admin, @program], notice: t('admin.successfully_updated_html', model: @program.to_s)
     else
@@ -88,7 +90,7 @@ class Admin::Education::ProgramsController < Admin::Education::ApplicationContro
   def program_params
     params.require(:education_program).permit(
       :name, :slug, :level, :capacity, :ects, :continuing, :description, :published,
-      :featured_image, :featured_image_delete, :featured_image_infos, :featured_image_alt,
+      :featured_image, :featured_image_delete, :featured_image_infos, :featured_image_alt, :featured_image_credit,
       :prerequisites, :objectives, :duration, :presentation, :registration, :pedagogy, :content,
       :evaluation, :accessibility, :pricing, :contacts, :opportunities, :results, :other, :main_information,
       :parent_id, school_ids: [],
diff --git a/app/controllers/admin/research/journal/volumes_controller.rb b/app/controllers/admin/research/journal/volumes_controller.rb
index 95413015794473f3e40693691de334d8a187ee3e..321de51ce7970433d87913b95f1dcafe23114192 100644
--- a/app/controllers/admin/research/journal/volumes_controller.rb
+++ b/app/controllers/admin/research/journal/volumes_controller.rb
@@ -21,6 +21,7 @@ class Admin::Research::Journal::VolumesController < Admin::Research::Journal::Ap
   end
 
   def create
+    @volume.add_unsplash_image params[:unsplash]
     @volume.assign_attributes(journal: @journal, university: current_university)
     if @volume.save_and_sync
       redirect_to admin_research_journal_volume_path(@volume), notice: t('admin.successfully_created_html', model: @volume.to_s)
@@ -31,6 +32,7 @@ class Admin::Research::Journal::VolumesController < Admin::Research::Journal::Ap
   end
 
   def update
+    @volume.add_unsplash_image params[:unsplash]
     if @volume.update_and_sync(volume_params)
       redirect_to admin_research_journal_volume_path(@volume), notice: t('admin.successfully_updated_html', model: @volume.to_s)
     else
@@ -57,7 +59,7 @@ class Admin::Research::Journal::VolumesController < Admin::Research::Journal::Ap
     params.require(:research_journal_volume)
           .permit(
             :title, :slug, :number, :keywords, :published, :published_at, :description, :text,
-            :featured_image, :featured_image_infos, :featured_image_delete, :featured_image_alt
+            :featured_image, :featured_image_infos, :featured_image_delete, :featured_image_alt, :featured_image_credit
           )
           .merge(university_id: current_university.id)
   end
diff --git a/app/models/communication/website/category.rb b/app/models/communication/website/category.rb
index 111fb7a8e1637a280cc48a60a1ee2f56b2a3a38e..4a73a15d7fb05e5272638b4305e00038784ef933 100644
--- a/app/models/communication/website/category.rb
+++ b/app/models/communication/website/category.rb
@@ -5,6 +5,7 @@
 #  id                       :uuid             not null, primary key
 #  description              :text
 #  featured_image_alt       :string
+#  featured_image_credit    :text
 #  github_path              :text
 #  is_programs_root         :boolean          default(FALSE)
 #  name                     :string
@@ -35,6 +36,7 @@
 #
 class Communication::Website::Category < ApplicationRecord
   include Sanitizable
+  include WithUniversity
   include WithGit
   include WithFeaturedImage
   include WithBlobs
diff --git a/app/models/communication/website/page.rb b/app/models/communication/website/page.rb
index 04919f14c174c70dec2d7beec8b3e35308a61364..121a75e1d55994fd6b5c4e206f7c320176be9943 100644
--- a/app/models/communication/website/page.rb
+++ b/app/models/communication/website/page.rb
@@ -8,6 +8,7 @@
 #  description              :text
 #  description_short        :text
 #  featured_image_alt       :string
+#  featured_image_credit    :text
 #  github_path              :text
 #  header_text              :text
 #  kind                     :integer
@@ -43,6 +44,7 @@
 
 class Communication::Website::Page < ApplicationRecord
   include Sanitizable
+  include WithUniversity
   include WithBlobs
   include WithBlocks
   include WithGit
@@ -51,7 +53,6 @@ class Communication::Website::Page < ApplicationRecord
   include WithMenuItemTarget
   include WithPosition
   include WithTree
-  include WithUniversity
 
   has_summernote :text
 
diff --git a/app/models/communication/website/post.rb b/app/models/communication/website/post.rb
index 5a6f0d1e1bf524ff4d859b4301a88392a77b94a1..1df229eb4a0cdc2d7514dafc1094e16893ec0c6d 100644
--- a/app/models/communication/website/post.rb
+++ b/app/models/communication/website/post.rb
@@ -6,6 +6,7 @@
 #  description              :text
 #  description_short        :text
 #  featured_image_alt       :string
+#  featured_image_credit    :text
 #  github_path              :text
 #  pinned                   :boolean          default(FALSE)
 #  published                :boolean          default(FALSE)
diff --git a/app/models/concerns/with_featured_image.rb b/app/models/concerns/with_featured_image.rb
index c38424175eec9fd3d50f6c55d46f99aa1e1dc176..91f13b5938a301e3b5f30bfbac3500c685e514bb 100644
--- a/app/models/concerns/with_featured_image.rb
+++ b/app/models/concerns/with_featured_image.rb
@@ -9,4 +9,17 @@ module WithFeaturedImage
   def best_featured_image(fallback: true)
     featured_image
   end
+
+  def add_unsplash_image(id)
+    return if id.blank?
+    photo = Unsplash::Photo.find id
+    url = photo['links']['download']
+    filename = "#{photo['id']}.jpg"
+    begin
+      file = URI.open url
+      featured_image.attach(io: file, filename: filename)
+      photo.track_download
+    rescue
+    end
+  end
 end
diff --git a/app/models/education/program.rb b/app/models/education/program.rb
index 66348c20bd9ce683ebc67ea3bc96806afa2e7130..1a9704e336c663c6d356be844382b5e07b25b587 100644
--- a/app/models/education/program.rb
+++ b/app/models/education/program.rb
@@ -2,37 +2,38 @@
 #
 # Table name: education_programs
 #
-#  id                 :uuid             not null, primary key
-#  accessibility      :text
-#  capacity           :integer
-#  contacts           :text
-#  content            :text
-#  continuing         :boolean
-#  description        :text
-#  duration           :text
-#  ects               :integer
-#  evaluation         :text
-#  featured_image_alt :string
-#  level              :integer
-#  main_information   :text
-#  name               :string
-#  objectives         :text
-#  opportunities      :text
-#  other              :text
-#  path               :string
-#  pedagogy           :text
-#  position           :integer          default(0)
-#  prerequisites      :text
-#  presentation       :text
-#  pricing            :text
-#  published          :boolean          default(FALSE)
-#  registration       :text
-#  results            :text
-#  slug               :string
-#  created_at         :datetime         not null
-#  updated_at         :datetime         not null
-#  parent_id          :uuid             indexed
-#  university_id      :uuid             not null, indexed
+#  id                    :uuid             not null, primary key
+#  accessibility         :text
+#  capacity              :integer
+#  contacts              :text
+#  content               :text
+#  continuing            :boolean
+#  description           :text
+#  duration              :text
+#  ects                  :integer
+#  evaluation            :text
+#  featured_image_alt    :string
+#  featured_image_credit :text
+#  level                 :integer
+#  main_information      :text
+#  name                  :string
+#  objectives            :text
+#  opportunities         :text
+#  other                 :text
+#  path                  :string
+#  pedagogy              :text
+#  position              :integer          default(0)
+#  prerequisites         :text
+#  presentation          :text
+#  pricing               :text
+#  published             :boolean          default(FALSE)
+#  registration          :text
+#  results               :text
+#  slug                  :string
+#  created_at            :datetime         not null
+#  updated_at            :datetime         not null
+#  parent_id             :uuid             indexed
+#  university_id         :uuid             not null, indexed
 #
 # Indexes
 #
diff --git a/app/models/research/journal/volume.rb b/app/models/research/journal/volume.rb
index 6b76d17061ec0edbbc5ef60fda61bb39598c6add..dc0e9ae3868ab1f9029ac218ad9106a96de5b7fc 100644
--- a/app/models/research/journal/volume.rb
+++ b/app/models/research/journal/volume.rb
@@ -2,20 +2,21 @@
 #
 # Table name: research_journal_volumes
 #
-#  id                  :uuid             not null, primary key
-#  description         :text
-#  featured_image_alt  :string
-#  keywords            :text
-#  number              :integer
-#  published           :boolean          default(FALSE)
-#  published_at        :datetime
-#  slug                :string
-#  text                :text
-#  title               :string
-#  created_at          :datetime         not null
-#  updated_at          :datetime         not null
-#  research_journal_id :uuid             not null, indexed
-#  university_id       :uuid             not null, indexed
+#  id                    :uuid             not null, primary key
+#  description           :text
+#  featured_image_alt    :string
+#  featured_image_credit :text
+#  keywords              :text
+#  number                :integer
+#  published             :boolean          default(FALSE)
+#  published_at          :datetime
+#  slug                  :string
+#  text                  :text
+#  title                 :string
+#  created_at            :datetime         not null
+#  updated_at            :datetime         not null
+#  research_journal_id   :uuid             not null, indexed
+#  university_id         :uuid             not null, indexed
 #
 # Indexes
 #
@@ -36,7 +37,7 @@ class Research::Journal::Volume < ApplicationRecord
   include WithSlug
 
   has_summernote :text
-  
+
   belongs_to :journal, foreign_key: :research_journal_id
   has_many :articles, foreign_key: :research_journal_volume_id, dependent: :nullify
   has_many :websites, -> { distinct }, through: :journal
diff --git a/app/views/admin/application/featured_image/_edit.html.erb b/app/views/admin/application/featured_image/_edit.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..849fdaa5655339cd2f4d7be1b08a48cf614739fc
--- /dev/null
+++ b/app/views/admin/application/featured_image/_edit.html.erb
@@ -0,0 +1,20 @@
+<div class="card flex-fill w-100">
+  <div class="card-header">
+    <h5 class="card-title mb-0"><%= t('activerecord.attributes.communication/website/post.featured_image') %></h5>
+  </div>
+  <div class="card-body">
+    <%= f.input :featured_image,
+                as: :single_deletable_file,
+                direct_upload: true,
+                label: false,
+                input_html: { accept: '.jpg,.jpeg,.png,.svg' },
+                preview: true %>
+    <%= f.input :featured_image_alt %>
+    <%= f.input :featured_image_credit,
+                as: :summernote,
+                input_html: {
+                  data: { 'summernote-config' => 'mini' }
+                } %>
+    <%= render  'admin/communication/unsplash/selector', about: about, f:f %>
+  </div>
+</div>
diff --git a/app/views/admin/application/featured_image/_show.html.erb b/app/views/admin/application/featured_image/_show.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..31ded1fa4c23cf7b987ce7b664d5f702e0b7f656
--- /dev/null
+++ b/app/views/admin/application/featured_image/_show.html.erb
@@ -0,0 +1,24 @@
+<% if about.featured_image.attached? %>
+  <div class="card flex-fill w-100">
+    <div class="card-header">
+      <h2 class="card-title mb-0 h5">
+        <%= about.class.human_attribute_name :featured_image %>
+      </h2>
+    </div>
+    <div class="card-body">
+      <% image = about.featured_image.variable? ? about.featured_image.variant(resize: '600')
+                                                : about.featured_image %>
+      <%= image_tag image, class: 'img-fluid mb-2' %>
+      <% if about.featured_image_credit %>
+        <p class="mb-0">
+          <%= about.featured_image_alt %>
+        </p>
+      <% end %>
+      <% if about.featured_image_credit %>
+        <p class="small mb-0">
+          <%= about.featured_image_credit.html_safe %>
+        </p>
+      <% end %>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/admin/communication/unsplash/_photo.json.jbuilder b/app/views/admin/communication/unsplash/_photo.json.jbuilder
new file mode 100644
index 0000000000000000000000000000000000000000..34175cfbd7f1daaedbc030b953bb03b2d294d643
--- /dev/null
+++ b/app/views/admin/communication/unsplash/_photo.json.jbuilder
@@ -0,0 +1,6 @@
+json.id photo['id']
+json.filename "#{photo['id']}.jpg"
+json.alt photo['alt_description']
+json.credit "Photo by <a href=\"https://unsplash.com/@#{ photo['user']['username'] }?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\"> #{ photo['user']['name'] }</a> on <a href=\"https://unsplash.com/?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\">Unsplash</a>"
+json.thumb photo['urls']['thumb']
+json.preview photo['urls']['regular']
diff --git a/app/views/admin/communication/unsplash/_selector.html.erb b/app/views/admin/communication/unsplash/_selector.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..31a02eff1287f99878d8b7abf8a42480b7377287
--- /dev/null
+++ b/app/views/admin/communication/unsplash/_selector.html.erb
@@ -0,0 +1,205 @@
+<%
+# L'Escale du livre 2022
+search = about.to_s
+# communication_website_page
+about_identifier = about.class.to_s.parameterize.underscore
+# .communication_website_post_featured_image
+about_featured_image_image = ".#{about_identifier}_featured_image"
+# #communication_website_page_featured_image_alt
+about_featured_image_alt = "##{about_identifier}_featured_image_alt"
+# #communication_website_page_featured_image_credit
+about_featured_image_credit = "##{about_identifier}_featured_image_credit"
+# fr, en...
+lang = about&.language&.iso_code if about.respond_to? :language
+# /admin/communication/unsplash.json?query=Page%20de%20test&per_page=12&page=1&lang=fr
+path = admin_communication_unsplash_path(website_id: nil, format: :json)
+%>
+
+<div id="unsplash-app" v-cloak>
+  <div class="spinner-border text-primary" role="status">
+    <span class="sr-only"><%= t 'loading' %></span>
+  </div>
+  <div class="app-content">
+    <button type="button"
+            class="btn btn-secondary btn-sm"
+            data-bs-toggle="modal"
+            data-bs-target="#unsplashModal"
+            >
+      Chercher une image
+    </button>
+    <input  class="form-control string optional"
+            type="hidden"
+            name="unsplash"
+            v-model="selected.id">
+    <div  class="modal fade"
+          id="unsplashModal"
+          tabindex="-1"
+          aria-labelledby="Unsplash"
+          aria-hidden="true">
+      <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">Recherche d'image sur Unsplash</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <div class="row mb-3">
+              <div class="col-lg-9">
+                <input  type="text"
+                        name="search"
+                        placeholder="Recherche en anglais..."
+                        v-model="query"
+                        class="form-control">
+              </div>
+              <div class="col-lg-3 d-grid">
+                <button type="button"
+                        class="btn btn-primary"
+                        v-on:click="research"
+                        aria-label="Chercher">
+                  Chercher
+                </button>
+              </div>
+            </div>
+            <div class="row" ref="results">
+              <p v-if="data.results.length === 0 || !data" >Aucun résultat</p>
+              <div v-for="image in data.results"  class="col-6 col-lg-2">
+                <img
+                    :src="image.thumb"
+                    :alt="image.alt"
+                    v-on:click="select(image)"
+                    class="img-fluid img-thumbnail mb-3"
+                    :class="image === selected ? 'bg-secondary' : ''">
+              </div>
+            </div>
+            <div class="d-flex"
+              :class="page === 1 ? 'justify-content-end' : 'justify-content-between'">
+              <div  href="#"
+                  v-if="page > 1"
+                  v-on:click="page = page - 1"
+                  class="btn btn-light btn-sm">Page précédente</div>
+              <div  href="#"
+                  v-if="page < data.total_pages"
+                  v-on:click="page = page + 1"
+                  class="btn btn-light bt-sm">Page suivante</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%# Include vue.js before call Vue.createApp %>
+<%= javascript_include_tag 'vue' %>
+
+<script>
+  var app = Vue.createApp({
+    data() {
+      return {
+        selected: {},
+        parameters: {
+          url: '<%= path %>',
+          per_page: 12,
+          lang: '<%= lang %>',
+        },
+        query: '<%= search || "" %>',
+        page: 1,
+        targets: {
+          image: '<%= about_featured_image_image %> img',
+          imageContainer: '<%= about_featured_image_image %> .sdfi-deletable-file__preview',
+          alt: '<%= about_featured_image_alt %>',
+          credit: '<%= about_featured_image_credit %>'
+        },
+        data: {
+          results: [],
+          total: 0
+        },
+        isOpened: false,
+        isReady: false
+      }
+    },
+    mounted() {
+      var modalElement = document.querySelector('#unsplashModal')
+      this.modal = bootstrap.Modal.getOrCreateInstance(modalElement);
+
+      modalElement.addEventListener('show.bs.modal', function (){
+        this.isOpened = true;
+        this.search()
+      }.bind(this));
+
+      modalElement.addEventListener('hide.bs.modal', function() {
+          this.isOpened = false;
+      }.bind(this));
+
+      document.addEventListener("keydown", function(event) {
+        if (event.key === "Enter" && this.isOpened) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          this.research();
+        }
+      }.bind(this));
+
+      this.isReady = true;
+    },
+    watch: {
+      page(value) {
+        this.search();
+      }
+    },
+    methods: {
+      research() {
+        this.page = 1;
+        this.search();
+      },
+      search() {
+        if (!this.query) {
+          return null;
+        }
+
+        var xmlHttp = new XMLHttpRequest();
+        xmlHttp.onreadystatechange = function() {
+          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+            this.data = JSON.parse(xmlHttp.responseText);
+          }
+        }.bind(this);
+
+        xmlHttp.open( "GET",
+                      this.parameters.url
+                      + '?query=' + this.query
+                      + '&per_page=' + this.parameters.per_page
+                      + '&page=' + this.page
+                      + '&lang=' + this.parameters.lang,
+                      false );
+        xmlHttp.send( null );
+      },
+      select(image) {
+        var inputImage = document.querySelector(this.targets.image),
+            inputImageContainer = document.querySelector(this.targets.imageContainer),
+            inputAlt = document.querySelector(this.targets.alt),
+            inputCredit = document.querySelector(this.targets.credit);
+
+        this.selected = image;
+
+        if (!inputImage) {
+          inputImage = document.createElement('img');
+          inputImage.classList.add('img-fluid', 'img-thumbnail');
+          inputImage.width = 1000;
+          inputImageContainer.appendChild(inputImage);
+        }
+
+        inputImage.setAttribute('src', image.preview);
+        inputImageContainer.parentElement.classList.add('sdfi-deletable-file--with-file');
+
+        inputAlt.value = image.alt;
+        $(inputCredit).summernote('code', image.credit);
+        this.modal.hide();
+      }
+    }
+  });
+
+  window.addEventListener('load', function(){
+    setTimeout(function() {
+      app.mount('#unsplash-app');
+    }, 1000);
+  });
+</script>
diff --git a/app/views/admin/communication/unsplash/_static.html.erb b/app/views/admin/communication/unsplash/_static.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..2264bbf50564bb181d33d5edd4bfc9244073e96c
--- /dev/null
+++ b/app/views/admin/communication/unsplash/_static.html.erb
@@ -0,0 +1,10 @@
+<%
+featured_image = @about&.best_featured_image || @about.featured_image
+if featured_image.attached?
+%>
+image:
+  id: "<%= featured_image.blob.id %>"
+  alt: "<%= @about.featured_image_alt %>"
+  credit: >
+    <%= prepare_html_for_static @about.featured_image_credit, @about.university %>
+<% end %>
diff --git a/app/views/admin/communication/unsplash/index.json.jbuilder b/app/views/admin/communication/unsplash/index.json.jbuilder
new file mode 100644
index 0000000000000000000000000000000000000000..b086b20e32d7618a7812cbc37f9fcd5bd0a3f010
--- /dev/null
+++ b/app/views/admin/communication/unsplash/index.json.jbuilder
@@ -0,0 +1,5 @@
+json.total @total
+json.total_pages @total_pages
+json.results @search do |photo|
+  json.partial! 'admin/communication/unsplash/photo', photo: photo
+end
diff --git a/app/views/admin/communication/website/categories/_form.html.erb b/app/views/admin/communication/website/categories/_form.html.erb
index 82a78b73b8813675bd6f7b00cfac40a0f7de011f..39f92fdb0060b689a8d3b36c8530388d2e889ba9 100644
--- a/app/views/admin/communication/website/categories/_form.html.erb
+++ b/app/views/admin/communication/website/categories/_form.html.erb
@@ -31,21 +31,7 @@
           </ul>
         </div>
       </div>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('activerecord.attributes.communication/website/category.featured_image') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.input :featured_image,
-                      as: :single_deletable_file,
-                      direct_upload: true,
-                      label: false,
-                      input_html: { accept: '.jpg,.jpeg,.png,.svg' },
-                      preview: true
-           %>
-           <%= f.input :featured_image_alt %>
-        </div>
-      </div>
+      <%= render 'admin/application/featured_image/edit', about: category, f: f %>
       <div class="card flex-fill w-100">
         <div class="card-header">
           <h5 class="card-title mb-0"><%= t('seo') %></h5>
diff --git a/app/views/admin/communication/website/categories/static.html.erb b/app/views/admin/communication/website/categories/static.html.erb
index 0b08b2db648365f167fca762e705fc307669b162..6d3b3a71493bd56077b705613117b413c24102f0 100644
--- a/app/views/admin/communication/website/categories/static.html.erb
+++ b/app/views/admin/communication/website/categories/static.html.erb
@@ -5,10 +5,7 @@ slug: "<%= @about.path %>"
 parent: "<%= @about.parent.path %>"
 <% end %>
 position: <%= @about.position %>
-<% if @about.best_featured_image.attached? %>
-image: "<%= @about.best_featured_image.blob.id %>"
-image_alt: "<%= @about.featured_image_alt %>"
-<% end %>
+<%= render 'admin/communication/unsplash/static' %>
 description: >
   <%= prepare_text_for_static @about.description %>
 ---
diff --git a/app/views/admin/communication/website/pages/_form.html.erb b/app/views/admin/communication/website/pages/_form.html.erb
index 16ce0f956b5a3c56da1e761e41ecd0c02f534e4c..2b23ceddad7d26ddbf9442c7c3b2ba59c73e1289 100644
--- a/app/views/admin/communication/website/pages/_form.html.erb
+++ b/app/views/admin/communication/website/pages/_form.html.erb
@@ -21,6 +21,18 @@
                             value_method: ->(p) { p[:id] } if @website.categories.any? && page.is_regular_page? %>
         </div>
       </div>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="card flex-fill w-100">
+            <div class="card-header">
+              <h5 class="card-title mb-0"><%= t('seo') %></h5>
+            </div>
+            <div class="card-body">
+              <%= f.input :description %>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="col-md-4">
       <% unless page.kind_home? %>
@@ -64,30 +76,7 @@
           <%= f.input :language_id, as: :hidden, input_html: { value: @website.languages.first.id }, wrapper: false %>
         <% end %>
       <% end %>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('activerecord.attributes.communication/website/page.featured_image') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.input :featured_image,
-                      as: :single_deletable_file,
-                      direct_upload: true,
-                      label: false,
-                      input_html: { accept: '.jpg,.jpeg,.png,.svg' },
-                      preview: true
-           %>
-           <%= f.input :featured_image_alt %>
-        </div>
-      </div>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('seo') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.input :description %>
-        </div>
-      </div>
-    </div>
+      <%= render 'admin/application/featured_image/edit', about: @page, f: f %>
     </div>
   </div>
   <% content_for :action_bar_right do %>
diff --git a/app/views/admin/communication/website/pages/show.html.erb b/app/views/admin/communication/website/pages/show.html.erb
index 0b2f141b9b4d9fcf8fa8706b8dac10510e802cf8..c9de26166a1876c6cc903232e370c3e59b8f7bbe 100644
--- a/app/views/admin/communication/website/pages/show.html.erb
+++ b/app/views/admin/communication/website/pages/show.html.erb
@@ -95,21 +95,7 @@
           <% end %>
         </div>
       </div>
-      <% if @page.best_featured_image && @page.best_featured_image.attached? && @page.best_featured_image.variable? %>
-        <div class="card flex-fill w-100">
-          <div class="card-header">
-            <h5 class="card-title mb-0"><%= t('activerecord.attributes.communication/website/page.featured_image') %></h5>
-          </div>
-          <div class="card-body">
-            <%= image_tag @page.best_featured_image.variant(resize: '600'), class: 'img-fluid mb-3' %><br>
-            <% unless @page.featured_image.attached? %>
-              <span class="small text-muted">
-                <%= t 'admin.inheritance.sentence_without_link' %>
-              </span>
-            <% end %>
-          </div>
-        </div>
-      <% end %>
+      <%= render 'admin/application/featured_image/show', about: @page %>
       <% if @page.description.present? %>
         <div class="card flex-fill w-100">
           <div class="card-header">
diff --git a/app/views/admin/communication/website/pages/static.html.erb b/app/views/admin/communication/website/pages/static.html.erb
index 4d2c9f2f194ee2dce4bd7c91a775615558f3a377..d4cc6399d8ca35929319ac703da27812bc3185af 100644
--- a/app/views/admin/communication/website/pages/static.html.erb
+++ b/app/views/admin/communication/website/pages/static.html.erb
@@ -5,10 +5,7 @@ breadcrumb_title: "<%= @about.breadcrumb_title.blank? ? @about.title : @about.br
 url: "<%= @about.path %>"
 position: <%= @about.position %>
 bodyclass: <%= @about.best_bodyclass %>
-<% if @about.best_featured_image && @about.best_featured_image.attached? %>
-image: "<%= @about.best_featured_image.blob.id %>"
-image_alt: "<%= @about.featured_image_alt %>"
-<% end %>
+<%= render 'admin/communication/unsplash/static' %>
 <% if @about.children.published.any? %>
 children:
 <% @about.children.published.ordered.each do |child| %>
diff --git a/app/views/admin/communication/website/posts/_form.html.erb b/app/views/admin/communication/website/posts/_form.html.erb
index 3e2cee109a807c8470dff609eb5145eb5992ebf7..94e9fd7707399d706c567690b54a9bd78d05bba7 100644
--- a/app/views/admin/communication/website/posts/_form.html.erb
+++ b/app/views/admin/communication/website/posts/_form.html.erb
@@ -11,6 +11,33 @@
           <%= f.input :text, as: :summernote %>
         </div>
       </div>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="card flex-fill w-100">
+            <div class="card-header">
+              <h5 class="card-title mb-0">
+                <%= t('activerecord.attributes.communication/website/post.categories') %>
+              </h5>
+            </div>
+            <div class="card-body">
+              <%= f.association :categories,
+                                label_text: false,
+                                as: :check_boxes,
+                                collection: collection_tree_for_checkboxes(@website.categories) if @website.categories.any? %>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="card flex-fill w-100">
+            <div class="card-header">
+              <h5 class="card-title mb-0"><%= t('seo') %></h5>
+            </div>
+            <div class="card-body">
+              <%= f.input :description %>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="col-md-4">
       <div class="card flex-fill w-100">
@@ -18,63 +45,41 @@
           <h5 class="card-title mb-0"><%= t('metadata') %></h5>
         </div>
         <div class="card-body">
-          <%= f.input :slug,
-                      as: :string,
-                      input_html: post.persisted? ? {} : {
-                        class: 'js-slug-input',
-                        data: { source: '#communication_website_post_title' }
-                      } %>
+          <% if can? :publish, post %>
+            <div class="row">
+              <div class="col-6">
+                <%= f.input :published %>
+              </div>
+              <div class="col-6">
+                <%= f.input :pinned %>
+              </div>
+            </div>
+            <%= f.input :published_at, html5: true %>
+          <% end %>
           <% if @website.languages.many? %>
             <%= f.input :language_id, collection: @website.languages, include_blank: false %>
           <% elsif @website.languages.any? %>
             <%= f.input :language_id, as: :hidden, input_html: { value: @website.languages.first.id }, wrapper: false %>
           <% end %>
-          <% if can? :publish, post %>
-            <%= f.input :published %>
-            <%= f.input :published_at, html5: true %>
-          <% end %>
-          <%= f.input :pinned %>
           <% if current_user.author? || current_user.contributor? %>
-            <%= f.input :author_id, as: :hidden, input_html: { value: current_user.person&.id }, wrapper: false %>
+            <%= f.input :author_id,
+                        as: :hidden,
+                        input_html: { value: current_user.person&.id },
+                        wrapper: false %>
           <% else %>
-            <%= f.association :author, collection: current_university.people.ordered, label_method: :to_s_alphabetical %>
+            <%= f.association :author,
+                              collection: current_university.people.ordered,
+                              label_method: :to_s_alphabetical %>
           <% end %>
+          <%= f.input :slug,
+                      as: :string,
+                      input_html: post.persisted? ? {} : {
+                        class: 'js-slug-input',
+                        data: { source: '#communication_website_post_title' }
+                      } %>
         </div>
       </div>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('activerecord.attributes.communication/website/post.featured_image') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.input :featured_image,
-                      as: :single_deletable_file,
-                      direct_upload: true,
-                      label: false,
-                      input_html: { accept: '.jpg,.jpeg,.png,.svg' },
-                      preview: true
-           %>
-           <%= f.input :featured_image_alt %>
-        </div>
-      </div>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('activerecord.attributes.communication/website/post.categories') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.association :categories,
-                            label_text: false,
-                            as: :check_boxes,
-                            collection: collection_tree_for_checkboxes(@website.categories) if @website.categories.any? %>
-        </div>
-      </div>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('seo') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.input :description %>
-        </div>
-      </div>
+      <%= render 'admin/application/featured_image/edit', about: @post, f: f %>
     </div>
   </div>
   <% content_for :action_bar_right do %>
diff --git a/app/views/admin/communication/website/posts/show.html.erb b/app/views/admin/communication/website/posts/show.html.erb
index 732c06463116c75af776182bbad9cef574b37f19..ba74369c47f153528f11ed50d26bdc45b09bf3c5 100644
--- a/app/views/admin/communication/website/posts/show.html.erb
+++ b/app/views/admin/communication/website/posts/show.html.erb
@@ -13,6 +13,37 @@
           <%= render 'admin/application/property/summernote_embeds', object: @post, property: :medias %>
         </div>
       </div>
+      <div class="row">
+      <% if @post.categories.any? %>
+        <div class="col-md-6">
+          <div class="card flex-fill w-100">
+            <div class="card-header">
+              <h2 class="card-title mb-0"><%= Communication::Website::Post.human_attribute_name('categories') %></h2>
+            </div>
+            <div class="card-body">
+              <ul class="list-unstyled mb-0">
+                <% @post.categories.each do |category| %>
+                  <li><%= link_to_if can?(:read, category), category, [:admin, category] %></li>
+                <% end %>
+              </ul>
+            </div>
+          </div>
+        </div>
+      <% end %>
+        <% if @post.description.present? %>
+          <div class="col-md-6">
+            <div class="card flex-fill w-100">
+              <div class="card-header">
+                <h2 class="card-title mb-0"><%= t('seo') %></h2>
+              </div>
+              <div class="card-body">
+                <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('description') %></h3>
+                <%= simple_format @post.description %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
     </div>
     <div class="col-md-4">
       <div class="card flex-fill w-100">
@@ -28,51 +59,29 @@
           <h2 class="card-title mb-0 h5"><%= t('metadata') %></h2>
         </div>
         <div class="card-body">
+          <div class="row">
+            <div class="col-6">
+              <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('published') %></h3>
+              <p>
+                <%= t @post.published %><% if @post.published & @post.published_at %>,
+                  <%= l @post.published_at.to_date, format: :long if @post.published_at %>
+                <% end %>
+              </p>
+            </div>
+            <div class="col-6">
+              <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('pinned') %></h3>
+              <p><%= t @post.pinned %></p>
+            </div>
+          </div>
           <% if @post.author %>
             <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('author') %></h3>
             <p><%= link_to_if can?(:read, @post.author), @post.author, admin_communication_website_author_path(@post.author) %></p>
           <% end %>
           <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('slug') %></h3>
           <p><%= @post.slug %></p>
-          <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('published') %></h3>
-          <p>
-            <%= t @post.published %><% if @post.published & @post.published_at %>,
-              <%= l @post.published_at, format: :long if @post.published_at %>
-            <% end %>
-          </p>
-          <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('pinned') %></h3>
-          <p><%= t @post.pinned %></p>
-          <% if @post.categories.any? %>
-            <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('categories') %></h3>
-            <ul class="list-unstyled mb-0">
-              <% @post.categories.each do |category| %>
-                <li><%= link_to_if can?(:read, category), category, [:admin, category] %></li>
-              <% end %>
-            </ul>
-          <% end %>
         </div>
       </div>
-      <% if @post.featured_image.attached? && @post.featured_image.variable? %>
-        <div class="card flex-fill w-100">
-          <div class="card-header">
-            <h5 class="card-title mb-0"><%= t('activerecord.attributes.communication/website/post.featured_image') %></h5>
-          </div>
-          <div class="card-body">
-            <%= image_tag @post.featured_image.variant(resize: '600'), class: 'img-fluid mb-3' %><br>
-          </div>
-        </div>
-      <% end %>
-      <% if @post.description.present? %>
-        <div class="card flex-fill w-100">
-          <div class="card-header">
-            <h5 class="card-title mb-0"><%= t('seo') %></h5>
-          </div>
-          <div class="card-body">
-            <h3 class="h5"><%= Communication::Website::Post.human_attribute_name('description') %></h3>
-            <%= simple_format @post.description %>
-          </div>
-        </div>
-      <% end %>
+      <%= render 'admin/application/featured_image/show', about: @post %>
     </div>
   </div>
 <% end %>
@@ -83,6 +92,9 @@
 
 <% content_for :action_bar_left do %>
   <%= destroy_link @post %>
+  <%= link_to t('static'),
+              static_admin_communication_website_post_path(@post),
+              class: button_classes('btn-light') if current_user.server_admin? %>
 <% end %>
 
 <% content_for :action_bar_right do %>
diff --git a/app/views/admin/communication/website/posts/static.html.erb b/app/views/admin/communication/website/posts/static.html.erb
index 277e081a6f6dcb5c9748567deff921d060b9d39a..038b4bd0d57ec4b176038b636ed1bffa2e86329c 100644
--- a/app/views/admin/communication/website/posts/static.html.erb
+++ b/app/views/admin/communication/website/posts/static.html.erb
@@ -15,10 +15,7 @@ categories:
   - "<%= category.path %>"
   <% end %>
 <% end %>
-<% if @about.featured_image.attached? %>
-image: "<%= @about.featured_image.blob.id %>"
-image_alt: "<%= @about.featured_image_alt %>"
-<% end %>
+<%= render 'admin/communication/unsplash/static' %>
 description: >
   <%= prepare_text_for_static @about.description %>
 description_short: >
diff --git a/app/views/admin/education/programs/_form.html.erb b/app/views/admin/education/programs/_form.html.erb
index 9b3469db1a03326873a21fdca15621b59f159403..b6cab4099e0faa561b464e580c617847ec1f6a8e 100644
--- a/app/views/admin/education/programs/_form.html.erb
+++ b/app/views/admin/education/programs/_form.html.erb
@@ -27,21 +27,7 @@
                             value_method: ->(p) { p[:id] } %>
         </div>
       </div>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('activerecord.attributes.education/program.featured_image') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.input :featured_image,
-                      as: :single_deletable_file,
-                      direct_upload: true,
-                      label: false,
-                      input_html: { accept: '.jpg,.jpeg,.png,.svg' },
-                      preview: true
-           %>
-           <%= f.input :featured_image_alt %>
-        </div>
-      </div>
+      <%= render 'admin/application/featured_image/edit', about: program, f: f %>
       <div class="card flex-fill w-100">
         <div class="card-header">
           <h5 class="card-title mb-0"><%= t('seo') %></h5>
diff --git a/app/views/admin/education/programs/show.html.erb b/app/views/admin/education/programs/show.html.erb
index eaa6bd15373ed2fa49c50d2ebc02332e74965d50..01d89abdd71237e7bbe79fcb12b5fd0a5501a63a 100644
--- a/app/views/admin/education/programs/show.html.erb
+++ b/app/views/admin/education/programs/show.html.erb
@@ -28,16 +28,7 @@
         <% end %>
       </div>
     </div>
-    <% if @program.featured_image.attached? && @program.featured_image.variable? %>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('activerecord.attributes.education/program.featured_image') %></h5>
-        </div>
-        <div class="card-body">
-          <%= image_tag @program.featured_image.variant(resize: '600'), class: 'img-fluid mb-3' %><br>
-        </div>
-      </div>
-    <% end %>
+    <%= render 'admin/application/featured_image/show', about: @program %>
     <% if @program.description.present? %>
       <div class="card flex-fill w-100">
         <div class="card-header">
diff --git a/app/views/admin/education/programs/static.html.erb b/app/views/admin/education/programs/static.html.erb
index b8cc5b8211d9d5c76252c356f682d63374020a8c..80c1f3dde98a0ed852867eab4624d0951eccdcdd 100644
--- a/app/views/admin/education/programs/static.html.erb
+++ b/app/views/admin/education/programs/static.html.erb
@@ -7,10 +7,7 @@ url: <%= @website.special_page(:education_programs).path %><%= @about.path %>/
 description: >
   <%= prepare_text_for_static @about.description %>
 position: <%= @about.position %>
-<% if @about.best_featured_image.attached? %>
-image: "<%= @about.best_featured_image.blob.id %>"
-image_alt: "<%= @about.featured_image_alt %>"
-<% end %>
+<%= render 'admin/communication/unsplash/static' %>
 category: "<%= @website.categories.find_by(program_id: @about.id)&.path %>/"
 teachers:
 <% teacher_involvements.each do |involvement| %>
diff --git a/app/views/admin/research/journal/volumes/_form.html.erb b/app/views/admin/research/journal/volumes/_form.html.erb
index 786bcbe9ccbfecabb1de7dbddb605e1915bc97a6..434978164a332cb7a3202ef15abc192c729c7b42 100644
--- a/app/views/admin/research/journal/volumes/_form.html.erb
+++ b/app/views/admin/research/journal/volumes/_form.html.erb
@@ -7,15 +7,31 @@
         </div>
         <div class="card-body">
           <%= f.input :title %>
-          <%= f.input :featured_image,
-                      as: :single_deletable_file,
-                      input_html: { accept: '.jpg,.jpeg,.png,.svg' },
-                      preview: 200,
-                      direct_upload: true %>
-          <%= f.input :featured_image_alt %>
           <%= f.input :text, as: :summernote %>
         </div>
       </div>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="card flex-fill w-100">
+            <div class="card-header">
+              <h5 class="card-title mb-0"><%= t('seo') %></h5>
+            </div>
+            <div class="card-body">
+              <%= f.input :description %>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="card flex-fill w-100">
+          <div class="card-header">
+            <h5 class="card-title mb-0"><%= t('seo') %></h5>
+          </div>
+          <div class="card-body">
+            <%= f.input :description %>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="col-md-4">
       <div class="card flex-fill w-100">
@@ -35,14 +51,7 @@
           <%= f.input :keywords %>
         </div>
       </div>
-      <div class="card flex-fill w-100">
-        <div class="card-header">
-          <h5 class="card-title mb-0"><%= t('seo') %></h5>
-        </div>
-        <div class="card-body">
-          <%= f.input :description %>
-        </div>
-      </div>
+      <%= render 'admin/application/featured_image/edit', about: volume, f: f %>
     </div>
   </div>
   <% content_for :action_bar_right do %>
diff --git a/app/views/admin/research/journal/volumes/show.html.erb b/app/views/admin/research/journal/volumes/show.html.erb
index cfc3f72711d0b3ba98aa25e6ad491f1e2ee05c6c..e3eaaaf28d4e15ca483530da1a2178b002d8118a 100644
--- a/app/views/admin/research/journal/volumes/show.html.erb
+++ b/app/views/admin/research/journal/volumes/show.html.erb
@@ -1,7 +1,7 @@
 <% content_for :title, @volume %>
 
 <div class="row">
-  <div class="col-md-8">
+  <div class="col-md-9">
     <div class="card flex-fill w-100">
       <div class="card-header">
         <h2 class="card-title mb-0 h5"><%= t('content') %></h2>
@@ -52,7 +52,7 @@
       </div>
     </div>
   </div>
-  <div class="col-md-4">
+  <div class="col-md-3">
     <div class="card flex-fill w-100">
       <div class="card-header">
         <h2 class="card-title mb-0 h5"><%= t('metadata') %></h2>
@@ -64,16 +64,7 @@
         <p><%= l @volume.published_at.to_time, format: :date_with_explicit_month if @volume.published_at %></p>
       </div>
     </div>
-    <% if @volume.featured_image.attached? %>
-      <div class="card">
-        <div class="card-header">
-          <h2 class="card-title"><%= Research::Journal::Volume.human_attribute_name('featured_image') %></h2>
-        </div>
-        <div class="card-body">
-          <%= kamifusen_tag @volume.featured_image, class: 'img-fluid' %>
-        </div>
-      </div>
-    <% end %>
+    <%= render 'admin/application/featured_image/show', about: @volume %>
     <% if @volume.description.present? %>
       <div class="card flex-fill w-100">
         <div class="card-header">
diff --git a/app/views/admin/research/journal/volumes/static.html.erb b/app/views/admin/research/journal/volumes/static.html.erb
index dca4bce639c1ce6b70d1cbea313c056567023253..2bba1c9be528fbe07dbeb1b1ddddffe3e05253d2 100644
--- a/app/views/admin/research/journal/volumes/static.html.erb
+++ b/app/views/admin/research/journal/volumes/static.html.erb
@@ -6,10 +6,7 @@ issn: "<%= @about.journal.issn %>"
 keywords: >
   <%= @about.keywords %>
 date: "<%= @about.published_at.iso8601 %>"
-<% if @about.featured_image.attached? %>
-image: "<%= @about.featured_image.blob.id %>"
-image_alt: "<%= @about.featured_image_alt %>"
-<% end %>
+<%= render 'admin/communication/unsplash/static' %>
 description: >
   <%= prepare_text_for_static @about.description %>
 ---
diff --git a/config/initializers/unsplash.rb b/config/initializers/unsplash.rb
new file mode 100644
index 0000000000000000000000000000000000000000..d2f4888f25957403926d68495af552ef21a77d0a
--- /dev/null
+++ b/config/initializers/unsplash.rb
@@ -0,0 +1,5 @@
+Unsplash.configure do |config|
+  config.application_access_key = ENV['UNSPLASH_ACCESS_KEY']
+  config.application_secret = ENV['UNSPLASH_SECRET']
+  config.utm_source = 'osuny'
+end
diff --git a/config/locales/communication/en.yml b/config/locales/communication/en.yml
index b765057ff1cc7561381642e1cfdbc5a39c8280db..8c7e55dd054111c2369e58cfb05888e27b468411 100644
--- a/config/locales/communication/en.yml
+++ b/config/locales/communication/en.yml
@@ -112,6 +112,7 @@ en:
         description_short: Lead text
         featured_image: Featured image
         featured_image_alt: Alt text
+        featured_image_credit: Credit
         pinned: Pinned
         published: Published?
         published_at: Publication date
diff --git a/config/locales/communication/fr.yml b/config/locales/communication/fr.yml
index 37bf9f61782e04c7696cc994084d0c972d41c932..d4784d66599ad50eb9fb350869b0a958b3c7183d 100644
--- a/config/locales/communication/fr.yml
+++ b/config/locales/communication/fr.yml
@@ -112,6 +112,7 @@ fr:
         description_short: Chapô
         featured_image: Image à la une
         featured_image_alt: Texte alternatif
+        featured_image_credit: Crédit
         pinned: Mis en avant
         published: Publié ?
         published_at: Date de publication
diff --git a/config/routes/admin/communication.rb b/config/routes/admin/communication.rb
index 8e3cfeb11a6f02f1bd38a25c432cc4585f7f19e5..c6716a4fe9cfc57e0a62e2d51c3fe126525317af 100644
--- a/config/routes/admin/communication.rb
+++ b/config/routes/admin/communication.rb
@@ -1,4 +1,5 @@
 namespace :communication do
+  get 'unsplash' => 'unsplash#index'
   resources :websites do
     get 'home' => 'website/home#edit'
     patch 'home' => 'website/home#update'
@@ -27,6 +28,9 @@ namespace :communication do
     resources :authors, controller: 'website/authors', only: [:index, :show]
     resources :posts, controller: 'website/posts' do
       post :publish, on: :collection
+      member do
+        get :static
+      end
     end
     resources :curations,
               path: 'posts/curations',
diff --git a/db/migrate/20220505083115_add_credit_to_communication_website_posts.rb b/db/migrate/20220505083115_add_credit_to_communication_website_posts.rb
new file mode 100644
index 0000000000000000000000000000000000000000..a5ee1fa334b45cc52d7a183f74628bbc3b653b5a
--- /dev/null
+++ b/db/migrate/20220505083115_add_credit_to_communication_website_posts.rb
@@ -0,0 +1,5 @@
+class AddCreditToCommunicationWebsitePosts < ActiveRecord::Migration[6.1]
+  def change
+    add_column :communication_website_posts, :featured_image_credit, :text
+  end
+end
diff --git a/db/migrate/20220505101823_add_mission_featured_image_credits.rb b/db/migrate/20220505101823_add_mission_featured_image_credits.rb
new file mode 100644
index 0000000000000000000000000000000000000000..42a614e2ae667638e31d61e131938f3d4129eda0
--- /dev/null
+++ b/db/migrate/20220505101823_add_mission_featured_image_credits.rb
@@ -0,0 +1,9 @@
+class AddMissionFeaturedImageCredits < ActiveRecord::Migration[6.1]
+  def change
+    add_column :communication_website_categories, :featured_image_credit, :text
+    add_column :communication_website_pages, :featured_image_credit, :text
+    add_column :education_programs, :featured_image_credit, :text
+    add_column :research_journal_volumes, :featured_image_credit, :text
+
+  end
+end
diff --git a/test/fixtures/communication/website/posts.yml b/test/fixtures/communication/website/posts.yml
index a887bab47171e31a3b37e43de914544b5a9e7e45..6904e28b4bd860666f259c36e006a6dd472f8f00 100644
--- a/test/fixtures/communication/website/posts.yml
+++ b/test/fixtures/communication/website/posts.yml
@@ -6,6 +6,7 @@
 #  description              :text
 #  description_short        :text
 #  featured_image_alt       :string
+#  featured_image_credit    :text
 #  github_path              :text
 #  pinned                   :boolean          default(FALSE)
 #  published                :boolean          default(FALSE)