Merge pull request #7304 from fjordllc/feature/checkbox_displaying_th…

…umbnail_in_article

ブログ記事に「サムネイル画像を本文に表示」というチェックボックスを追加。

app/controllers/articles_controller.rb

@@ -14,7 +14,7 @@ def index
   def show
     @mentor = @article.user
     @recent_articles = list_recent_articles
-    if !@article.wip? || admin_or_mentor_login?
+    if @article.published? || admin_or_mentor_login?
       render layout: 'welcome'
     else
       redirect_to root_path, alert: '管理者・メンターとしてログインしてください'
@@ -77,6 +77,7 @@ def article_params
       thumbnail
       thumbnail_type
       summary
+      display_thumbnail_in_body
     ]
     article_attributes.push(:published_at) unless params[:commit] == 'WIP'
     params.require(:article).permit(*article_attributes)

app/models/article.rb

@@ -48,6 +48,10 @@ def selected_thumbnail_url
     image_url("/ogp/#{thumbnail_type}.png")
   end
 
+  def published?
+    !wip?
+  end
+
   private
 
   def will_be_published?

app/views/articles/_form.html.slim

@@ -48,6 +48,12 @@
         .col-md-6.col-xs-12
           label.a-form-label
             | サムネイル画像選択
+          .a-form-help.mb-4
+            p
+              | サムネイル画像を用意している場合は「アップロード」を選択し、
+              | 画像をアップロードしてください。
+              | サムネイル画像を用意していない場合は、
+              | それ以外から記事の内容に合いそうなものをピックアップしてください。
       .row
         - types = Article.thumbnail_types.keys.tap { |thumbnail_types| thumbnail_types.delete('prepared_thumbnail') }
         - types.each do |type|
@@ -89,6 +95,28 @@
                 | ここにアップロードした画像が、X（Twitter）、Facebook で投稿した際に表示される画像として使われます。
                 | 画像サイズは必ず 1200px × 630xpx でお願いします。
 
+    .form-item
+      .checkboxes
+        .checkboxes__items
+          .checkboxes__item
+            = f.check_box :display_thumbnail_in_body, { class: 'a-toggle-checkbox' }
+            = f.label :display_thumbnail_in_body, 'サムネイル画像を本文に表示'
+        .a-form-help
+          p
+            | チェックを入れると、ブログ記事の本文内にもサムネイル画像が表示されます。
+            label.a-form-help-link.is-muted-text(for='modal-thumbnail-image')
+              span.a-form-help-link__label
+                | 詳しく
+              span.a-help
+                i.fa-solid.fa-question
+    = render '/shared/modal', id: 'modal-thumbnail-image', modal_title: '本文内にサムネイル表示とは？'
+      .modal__description.is-md
+        .a-short-text
+          p
+            | チェックを入れると本文の頭（タイトルの下）にサムネイル画像が大きく表示されます。
+            | 記事のアイキャッチ画像としてサムネイル画像を使用する場合はチェックを入れてください。
+          p = image_tag('articles/thumbnail_description.png')
+
     - if params[:action] == 'edit'
       .form-item
         .hidden-form-item

app/views/articles/show.html.slim

@@ -47,10 +47,11 @@ ruby:
                       - else
                         = l(@article.published_at)
                 = render 'share_buttons', article: @article.id
-                - if @article.thumbnail.attached? && @article.prepared_thumbnail?
-                  = image_tag @article.prepared_thumbnail_url, class: 'article__image'
-                - elsif !thumbnail_blank?(@article)
-                  = image_tag @article.selected_thumbnail_url, class: 'article__image'
+                - if @article.display_thumbnail_in_body?
+                  - if @article.prepared_thumbnail?
+                    = image_tag @article.prepared_thumbnail_url, class: 'article__image'
+                  - else
+                    = image_tag @article.selected_thumbnail_url, class: 'article__image'
               .article__body
                 .js-markdown-view.a-long-text.is-md
                   = @article.body

db/migrate/20240222135029_add_display_thumbnail_in_body_to_articles.rb

@@ -0,0 +1,5 @@
+class AddDisplayThumbnailInBodyToArticles < ActiveRecord::Migration[6.1]
+  def change
+    add_column :articles, :display_thumbnail_in_body, :boolean, default: true, null: false
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2024_02_16_080937) do
+ActiveRecord::Schema.define(version: 2024_02_22_135029) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pgcrypto"
@@ -77,6 +77,7 @@
     t.datetime "published_at"
     t.text "summary"
     t.integer "thumbnail_type", default: 0, null: false
+    t.boolean "display_thumbnail_in_body", default: true, null: false
     t.index ["user_id"], name: "index_articles_on_user_id"
   end
 

test/models/article_test.rb

@@ -13,6 +13,11 @@ class ArticleTest < ActiveSupport::TestCase
     assert_equal '/ogp/ruby_on_rails.png', article.selected_thumbnail_url
   end
 
+  test '#published?' do
+    assert articles(:article1).published?
+    assert_not articles(:article3).published?
+  end
+
   test 'articles directly published without WIP have value of the published_at' do
     article = Article.create(
       title: '公開された記事',

test/system/articles_test.rb

@@ -279,6 +279,7 @@ class ArticlesTest < ApplicationSystemTestCase
   test 'can set up prepared images for eye-catching image, the default OGP image will be used' do
     visit_with_auth edit_article_path(@article), 'komagata'
     find('label[for=article_thumbnail_type_ruby_on_rails]').click
+    check 'サムネイル画像を本文に表示', allow_label_click: true
     click_button '更新する'
 
     visit "/articles/#{@article.id}"
@@ -287,6 +288,16 @@ class ArticlesTest < ApplicationSystemTestCase
     assert_match(/ruby_on_rails\.png$/, content)
   end
 
+  test 'uncheck checkbox whether to display thumbnail in body' do
+    visit_with_auth edit_article_path(@article), 'komagata'
+    find('label[for=article_thumbnail_type_ruby_on_rails]').click
+    uncheck 'サムネイル画像を本文に表示', allow_label_click: true
+    click_button '更新する'
+
+    visit "/articles/#{@article.id}"
+    assert_no_selector 'img[class=article__image]'
+  end
+
   test 'display user icon when not logged in' do
     visit_with_auth '/current_user/edit', 'hatsuno'