Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Landing page images from content item #4375

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Landing page images from content item #4375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ca0fc49
Add helper to allow remote or local images
KludgeKML Nov 5, 2024
579c191
Add HasImageSet concern
KludgeKML Nov 5, 2024
c80041d
Use HasImageSet concern in Hero block.
KludgeKML Nov 5, 2024
a322ce6
Use HasImageSet concern for featured block
KludgeKML Nov 5, 2024
83e008f
Update local pages to use new format
KludgeKML Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/helpers/block_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,10 @@ def column_class_for_assymetric_columns(number_of_columns, column_size)
end
end
end

# SCAFFOLDING: remove and remove all references when all images are coming from
# assets in the content item, rather than potentially being included in the repo
def block_image_path(url)
url.start_with?("http") ? url : image_path(url)
end
end
15 changes: 15 additions & 0 deletions app/models/landing_page/block/concerns/has_image_set.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
require "ostruct"

module LandingPage::Block::Concerns
module HasImageSet
FeaturedImage = Data.define(:alt, :sources)

def image
@image ||= load_image
end

def load_image
FeaturedImage.new(alt: data["image"]["alt"], sources: OpenStruct.new(data["image"]["sources"]))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
FeaturedImage.new(alt: data["image"]["alt"], sources: OpenStruct.new(data["image"]["sources"]))
FeaturedImage.new(alt: data.dig("image", "alt"), sources: OpenStruct.new(data.dig("image", "sources")))

end
end
end
10 changes: 3 additions & 7 deletions app/models/landing_page/block/featured.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
module LandingPage::Block
FeaturedImageSources = Data.define(:desktop, :desktop_2x, :tablet, :tablet_2x, :mobile, :mobile_2x)
FeaturedImage = Data.define(:alt, :sources)

class Featured < Base
attr_reader :image, :featured_content
include LandingPage::Block::Concerns::HasImageSet

attr_reader :featured_content

def initialize(block_hash, landing_page)
super

alt, sources = data.fetch("image").values_at("alt", "sources")
sources = FeaturedImageSources.new(**sources)
@image = FeaturedImage.new(alt:, sources:)
@featured_content = data.dig("featured_content", "blocks")&.map { |subblock_hash| LandingPage::BlockFactory.build(subblock_hash, landing_page) }
end

Expand Down
10 changes: 3 additions & 7 deletions app/models/landing_page/block/hero.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
module LandingPage::Block
HeroImageSources = Data.define(:desktop, :desktop_2x, :tablet, :tablet_2x, :mobile, :mobile_2x)
HeroImage = Data.define(:alt, :sources)

class Hero < Base
attr_reader :image, :hero_content
include LandingPage::Block::Concerns::HasImageSet

attr_reader :hero_content

def initialize(block_hash, landing_page)
super

alt, sources = data.fetch("image").values_at("alt", "sources")
sources = HeroImageSources.new(**sources)
@image = HeroImage.new(alt:, sources:)
@hero_content = LandingPage::BlockFactory.build_all(data.dig("hero_content", "blocks"), landing_page)
end

Expand Down
8 changes: 4 additions & 4 deletions app/views/landing_page/blocks/_featured.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
</div>
<div class="featured__child featured__child--image">
<%= picture_tag do %>
<%= tag.source srcset: "#{image_path(block.image.sources.desktop)}, #{image_path(block.image.sources.desktop_2x)} 2x", media: "(min-width: 769px)" %>
<%= tag.source srcset: "#{image_path(block.image.sources.tablet)}, #{image_path(block.image.sources.tablet_2x)} 2x", media: "(min-width: 641px) and (max-width: 768px)" %>
<%= tag.source srcset: "#{image_path(block.image.sources.mobile)}, #{image_path(block.image.sources.mobile_2x)} 2x", media: "(max-width: 640px)" %>
<%= image_tag(block.image.sources.desktop, alt: block.image.alt, class: "featured__image") %>
<%= tag.source srcset: "#{block_image_path(block.image.sources.hero_desktop_1x)}, #{block_image_path(block.image.sources.hero_desktop_2x)} 2x", media: "(min-width: 769px)" %>
<%= tag.source srcset: "#{block_image_path(block.image.sources.hero_tablet_1x)}, #{block_image_path(block.image.sources.hero_tablet_2x)} 2x", media: "(min-width: 641px) and (max-width: 768px)" %>
<%= tag.source srcset: "#{block_image_path(block.image.sources.hero_mobile_1x)}, #{block_image_path(block.image.sources.hero_mobile_2x)} 2x", media: "(max-width: 640px)" %>
<%= image_tag(block.image.sources.hero_desktop_1x, alt: block.image.alt, class: "featured__image") %>
<% end %>
</div>
</div>
8 changes: 4 additions & 4 deletions app/views/landing_page/blocks/_hero.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@

<%= content_tag("div", class: hero_classes) do %>
<%= picture_tag(class: "app-b-hero__imagewrapper") do %>
<%= tag.source srcset: "#{image_path(block.image.sources.desktop)}, #{image_path(block.image.sources.desktop_2x)} 2x", media: "(min-width: 769px)" %>
<%= tag.source srcset: "#{image_path(block.image.sources.tablet)}, #{image_path(block.image.sources.tablet_2x)} 2x", media: "(min-width: 641px) and (max-width: 768px)" %>
<%= tag.source srcset: "#{image_path(block.image.sources.mobile)}, #{image_path(block.image.sources.mobile_2x)} 2x", media: "(max-width: 640px)" %>
<%= image_tag(block.image.sources.desktop, alt: block.image.alt, class: "app-b-hero__image") %>
<%= tag.source srcset: "#{block_image_path(block.image.sources.hero_desktop_1x)}, #{block_image_path(block.image.sources.hero_desktop_2x)} 2x", media: "(min-width: 769px)" %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently my branch drops the hero_ prefix from the sources hash, so they're just desktop_2x etc. That was just because it felt like duplication to be doing - type: "hero" and then reiterating hero_ a bunch of times. But it does introduce an inconsistency with the version names configured in whitehall, as those have to be globally unique, so they do need prefixes.

I don't mind either way really - I'd be happy to update my branch to put back the hero_s if you think its more consistent to have them. Or we could update them here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 actually maybe I can get it to match whats currently there exactly, and we can lose this PR 🤔

<%= tag.source srcset: "#{block_image_path(block.image.sources.hero_tablet_1x)}, #{block_image_path(block.image.sources.hero_tablet_2x)} 2x", media: "(min-width: 641px) and (max-width: 768px)" %>
<%= tag.source srcset: "#{block_image_path(block.image.sources.hero_mobile_1x)}, #{block_image_path(block.image.sources.hero_mobile_2x)} 2x", media: "(max-width: 640px)" %>
<%= image_tag(block.image.sources.hero_desktop_1x, alt: block.image.alt, class: "app-b-hero__image") %>
<% end %>

<div class="govuk-width-container app-b-hero__textbox-wrapper">
Expand Down
28 changes: 14 additions & 14 deletions lib/data/landing_page_content_items/be_kinder.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ blocks:
navigation_group_id: Top Menu
- type: hero
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I didn't mean to change this from alt to alt_text 😓

sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: heading
Expand Down Expand Up @@ -91,14 +91,14 @@ blocks:
- type: hero
theme: middle_left
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: quote
Expand Down
28 changes: 14 additions & 14 deletions lib/data/landing_page_content_items/be_thankful.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ blocks:
navigation_group_id: Top Menu
- type: hero
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: heading
Expand Down Expand Up @@ -93,14 +93,14 @@ blocks:
- type: hero
theme: middle_left
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: quote
Expand Down
28 changes: 14 additions & 14 deletions lib/data/landing_page_content_items/donate_to_charity.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ blocks:
navigation_group_id: Top Menu
- type: hero
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: heading
Expand Down Expand Up @@ -93,14 +93,14 @@ blocks:
- type: hero
theme: middle_left
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: quote
Expand Down
28 changes: 14 additions & 14 deletions lib/data/landing_page_content_items/exercise_more.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ blocks:
navigation_group_id: Top Menu
- type: hero
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: heading
Expand Down Expand Up @@ -93,14 +93,14 @@ blocks:
- type: hero
theme: middle_left
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: quote
Expand Down
28 changes: 14 additions & 14 deletions lib/data/landing_page_content_items/goals.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ blocks:
navigation_group_id: Top Menu
- type: hero
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: heading
Expand Down Expand Up @@ -71,14 +71,14 @@ blocks:
- type: hero
theme: middle_left
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: quote
Expand Down
28 changes: 14 additions & 14 deletions lib/data/landing_page_content_items/homepage.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ blocks:
navigation_group_id: Top Menu
- type: hero
image:
alt: "Placeholder alt text"
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
hero_content:
blocks:
- type: heading
Expand All @@ -45,14 +45,14 @@ blocks:
href: "/landing-page/goals"
- type: featured
image:
alt: example alt text
alt_text: "Placeholder alt text"
sources:
desktop: "landing_page/placeholder/desktop.png"
desktop_2x: "landing_page/placeholder/desktop_2x.png"
mobile: "landing_page/placeholder/mobile.png"
mobile_2x: "landing_page/placeholder/mobile_2x.png"
tablet: "landing_page/placeholder/tablet.png"
tablet_2x: "landing_page/placeholder/tablet_2x.png"
hero_desktop_1x: landing_page/placeholder/desktop.png
hero_desktop_2x: landing_page/placeholder/desktop_2x.png
hero_tablet_1x: landing_page/placeholder/tablet.png
hero_tablet_2x: landing_page/placeholder/tablet_2x.png
hero_mobile_1x: landing_page/placeholder/mobile.png
hero_mobile_2x: landing_page/placeholder/mobile_2x.png
featured_content:
blocks:
- type: heading
Expand Down
Loading