From 836308471f8d31ccdcdd3a5bd88bc76cc1c0831b Mon Sep 17 00:00:00 2001 From: erdgeist Date: Mon, 20 Jul 2026 19:45:43 +0200 Subject: Make headline images explicit, add asset credits - related_assets gains a `headline` boolean (DB-enforced: at most one per page), replacing "first image by position" as the headline rule. A rake task backfills the current first image on every live head/draft, so nothing changes visually until an editor changes it. - The image picker sidebar gets a star toggle reflecting the flag; the TinyMCE inline-image picker's badge now reads it too, instead of assuming position 0. - No headline chosen (or none attached) now falls back to the gallery-count caption itself becoming the lightbox trigger, instead of the gallery being unreachable. - Assets gain creator, source_url, and license_key (against a new config/asset_licenses.yml dictionary). asset_credit renders a degrading attribution line, reused as a hidden per-image glightbox caption so credit is one click away for every image, not only the headline's always-visible one. - Fixed: asset thumbnails rendered unconditionally regardless of whether a real variant exists on disk. Asset#has_variant? checks file existence, not content type -- some legacy PDFs have real pre-rewrite thumbnails a content-type check would have hidden. - assets#new/edit rebuilt onto the same node_description/node_content layout as assets#show, picking up the three new fields in the process. --- public/javascripts/admin_interface.js | 12 ++++++++---- public/javascripts/related_assets.js | 35 ++++++++++++++++++++--------------- public/stylesheets/admin.css | 35 ++++++++++++++++++++++++++--------- public/stylesheets/ccc.css | 8 ++++++++ 4 files changed, 62 insertions(+), 28 deletions(-) (limited to 'public') diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js index e9f96c2f..7fb1dc29 100644 --- a/public/javascripts/admin_interface.js +++ b/public/javascripts/admin_interface.js @@ -277,10 +277,12 @@ cccms = { var items = $('#related_asset_list li').map(function() { return { + id: $(this).data('asset-id'), thumb: $(this).find('img').attr('src'), large: $(this).data('large-url'), original: $(this).data('original-url'), - name: $(this).data('name') + name: $(this).data('name'), + headline: $(this).data('headline') === true }; }).get(); cccms.inline_images.items = items; @@ -293,7 +295,7 @@ cccms = { items.forEach(function(item, i) { var wrapper = $('
'); wrapper.append($('').attr('src', item.thumb).attr('data-index', i)); - if (i === 0) { + if (item.headline) { wrapper.append($('', { "class": "inline_image_picker_headline_badge" }).text("Headline")); } grid.append(wrapper); @@ -317,8 +319,10 @@ cccms = { ? 'inline-image inline-image--full' : 'inline-image inline-image--half inline-image--' + placement; - var html = '' + - '' + cccms.inline_images.escape_attr(item.name) + ''; + var esc = cccms.inline_images.escape_attr; + var html = '' + + '' + esc(item.name) + ''; cccms.inline_images.editor.insertContent(html); $('#inline_image_picker').hide(); diff --git a/public/javascripts/related_assets.js b/public/javascripts/related_assets.js index 3340fa79..cc07d866 100644 --- a/public/javascripts/related_assets.js +++ b/public/javascripts/related_assets.js @@ -5,8 +5,6 @@ related_assets = { var createUrl = container.data("create-url"); var list = $("#related_asset_list"); - related_assets.update_headline_badge(list); - initSearchPicker({ inputSelector: "#related_asset_search_term", resultsSelector: "#related_asset_search_results", @@ -44,7 +42,6 @@ related_assets = { url: ui.item.data("url"), data: "position=" + newPosition }); - related_assets.update_headline_badge(list); } }); @@ -55,21 +52,29 @@ related_assets = { url: item.data("url"), success: function() { item.remove(); - related_assets.update_headline_badge(list); } }); }); - }, - update_headline_badge: function(list) { - list.find(".related_asset_headline_badge").remove(); - var first = list.children("li").first(); - if (first.length) { - $("", { - "class": "related_asset_headline_badge", - "title": "Shown automatically as this page's headline image" - }).text("Headline").insertBefore(first.find(".related_asset_remove")); - } + list.on("click", ".related_asset_set_headline", function() { + var button = $(this); + var item = button.closest("li"); + var makeHeadline = button.attr("aria-pressed") !== "true"; + + $.ajax({ + type: "PATCH", + url: item.data("url"), + data: "headline=" + makeHeadline, + success: function() { + list.children("li").removeClass("is_headline") + .find(".related_asset_set_headline").attr("aria-pressed", "false"); + if (makeHeadline) { + item.addClass("is_headline"); + button.attr("aria-pressed", "true"); + } + } + }); + }); }, attach: function(assetId, createUrl, list) { @@ -81,13 +86,13 @@ related_assets = { success: function(related) { var item = $($("#related_asset_template").html().trim()); item.attr("data-url", related.url); + item.attr("data-asset-id", related.asset_id); item.attr("data-large-url", related.large_url); item.attr("data-original-url", related.original_url); item.attr("data-name", related.name); item.find("img").attr("src", related.thumb_url); list.append(item); list.sortable("refresh"); - related_assets.update_headline_badge(list); $("#related_asset_search_term").val(""); $("#related_asset_search_results").slideUp().empty(); } diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css index 0e117475..b171800f 100644 --- a/public/stylesheets/admin.css +++ b/public/stylesheets/admin.css @@ -1327,15 +1327,6 @@ div#image_browser ul li { height: 1rem; } -.related_asset_headline_badge { - background: #fff3cd; - color: #6b5900; - border-radius: 999px; - padding: 0.1rem 0.6rem; - font-size: 0.75em; - white-space: nowrap; -} - .related_asset_remove { display: flex; align-items: center; @@ -1372,6 +1363,32 @@ div#image_browser ul li { border-radius: 4px; } +.related_asset_set_headline { + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + padding: 2px; + cursor: pointer; + color: #969696; +} + +.related_asset_set_headline svg { + width: 0.9rem; + height: 0.9rem; +} + +.related_asset_set_headline:hover, +.related_asset_set_headline[aria-pressed="true"] { + color: #6b5900; +} + +.thumbnail_list li.is_headline { + border-color: #fff3cd; + background-color: #fffdf5; +} + /* ============================================================ Live edit preview ============================================================ */ diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css index a07cc4d9..8358d06c 100644 --- a/public/stylesheets/ccc.css +++ b/public/stylesheets/ccc.css @@ -747,3 +747,11 @@ div.teaser_ruler { float: right; margin-left: 1rem; } + +#asset_credits .glightbox-desc { + display: none; +} + +#asset_credits .headline_credit { + display: block; +} -- cgit v1.3