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

GIVCAMP-294 | Basic Hero overlay options and image optimization #243

Merged
merged 2 commits into from
Mar 6, 2024
Merged

GIVCAMP-294 | Basic Hero overlay options and image optimization #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ee5706
Basic Hero gradient and better image processing
yvonnetangsu Mar 6, 2024
b62248a
Make conditionals better
yvonnetangsu Mar 6, 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: 5 additions & 1 deletion components/Hero/BasicHero.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,12 @@ export const heroPaddings = {
export type HeroPaddingType = keyof typeof heroPaddings;

export const root = 'relative break-words bg-black-70';

export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-b via-50%' : '');

export const contentWrapper = '*:mx-auto';
export const superhead = 'relative z-10 xl:max-w-900 mx-auto rs-mb-0';
export const superhead = 'relative z-10 xl:max-w-900 mx-auto rs-mb-0 text-shadow-sm';
export const heading = (isDrukHeading: boolean, isSmallHeading: boolean) => cnb('relative z-10 max-w-1200 mx-auto mb-0 text-balance', {
'fluid-type-7 md:fluid-type-8': isDrukHeading && isSmallHeading,
'fluid-type-7 md:gc-splash': isDrukHeading && !isSmallHeading,
Expand Down
177 changes: 116 additions & 61 deletions components/Hero/BasicHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@ import { Container } from '@/components/Container';
import { Heading, SrOnlyText, Text } from '@/components/Typography';
import { ImageOverlay } from '@/components/ImageOverlay';
import { getProcessedImage } from '@/utilities/getProcessedImage';
import {
gradientFroms,
type GradientFromType,
gradientTos,
type GradientToType,
gradientVias,
type GradientViaType,
bgBlurs,
type BgBlurType,
} from '@/utilities/datasource';
import * as styles from './BasicHero.styles';

/**
Expand All @@ -16,6 +26,10 @@ type BasicHeroProps = {
subheading?: string;
imageSrc?: string;
imageFocus?: string;
gradientTop?: GradientToType;
gradientBottom?: GradientFromType;
gradientVia?: GradientViaType;
bgBlur?: BgBlurType;
heroContent?: React.ReactNode;
paddingType?: styles.HeroPaddingType;
};
Expand All @@ -28,72 +42,113 @@ export const BasicHero = ({
subheading,
imageSrc,
imageFocus,
gradientTop,
gradientBottom,
gradientVia,
bgBlur,
heroContent,
paddingType,
}: BasicHeroProps) => (
<Container
width="full"
bgColor={imageSrc ? undefined : 'black'}
className={cnb(styles.root, styles.heroPaddings[paddingType])}
>
{imageSrc && (
<>
<ImageOverlay
imageSrc={getProcessedImage(imageSrc, '2000x1000', imageFocus)}
overlay="black-40"
className="z-0 hidden xl:block"
overlayClasses="hidden xl:block"
/>
<ImageOverlay
imageSrc={getProcessedImage(imageSrc, '1200x900', imageFocus)}
overlay="black-40"
className="z-0 xl:hidden"
overlayClasses="xl:hidden"
}: BasicHeroProps) => {
// To render a dark overlay, both a top and bottom gradient color must be selected
const hasBgGradient = !!gradientTop && !!gradientBottom;
const hasBgBlur = !!bgBlur && bgBlur !== 'none';

return (
<Container
width="full"
bgColor={imageSrc ? undefined : 'black'}
className={cnb(styles.root, styles.heroPaddings[paddingType])}
>
{!!imageSrc && (
<picture>
<source
srcSet={getProcessedImage(imageSrc, hasBgBlur ? '1000x500' : '2000x1000', imageFocus)}
media="(min-width: 1200px)"
// Exact height and width don't matter as long as aspect ratio is the same as the image
width={2000}
height={1000}
/>
<source
srcSet={getProcessedImage(imageSrc, hasBgBlur ? '600x400' : '1200x800', imageFocus)}
media="(min-width: 768px)"
width={1200}
height={800}
/>
<source
srcSet={getProcessedImage(imageSrc, hasBgBlur ? '400x300' : '800x600', imageFocus)}
media="(min-width: 461px)"
width={800}
height={600}
/>
<source
srcSet={getProcessedImage(imageSrc, hasBgBlur ? '240x240' : '480x480', imageFocus)}
media="(max-width: 460px)"
width={480}
height={480}
/>
<img
src={getProcessedImage(imageSrc, hasBgBlur ? '1000x500' : '2000x1000', imageFocus)}
alt=""
width={2000}
height={1000}
className={styles.bgImage}
/>
</picture>
)}
{!!imageSrc && (hasBgBlur || hasBgGradient) && (
<div
className={cnb(
styles.overlay(hasBgGradient),
bgBlurs[bgBlur],
gradientFroms[gradientTop],
gradientVias[gradientVia],
gradientTos[gradientBottom],
)}
/>
</>
)}
<Container className={styles.contentWrapper}>
{superhead && (
<Text
size={3}
font="serif"
weight="bold"
align="center"
leading="tight"
color="white"
aria-hidden
className={styles.superhead}
>
{superhead}
</Text>
)}
<Heading
as="h1"
font={isDrukHeading ? 'druk' : 'serif'}
weight={isDrukHeading ? 'black' : 'bold'}
align="center"
leading={isDrukHeading ? 'none' : 'tight'}
color="white"
className={styles.heading(isDrukHeading, isSmallHeading)}
>
{superhead && <SrOnlyText>{`${superhead}: `}</SrOnlyText>}{title}
</Heading>
{subheading && (
<Text
size={2}
<Container className={styles.contentWrapper}>
{superhead && (
<Text
size={3}
font="serif"
weight="bold"
align="center"
leading="tight"
color="white"
aria-hidden
className={styles.superhead}
>
{superhead}
</Text>
)}
<Heading
as="h1"
font={isDrukHeading ? 'druk' : 'serif'}
weight={isDrukHeading ? 'black' : 'bold'}
align="center"
leading="display"
leading={isDrukHeading ? 'none' : 'tight'}
color="white"
className={styles.subhead}
className={styles.heading(isDrukHeading, isSmallHeading)}
>
{subheading}
</Text>
)}
{!!heroContent && (
<div className={styles.content}>
{heroContent}
</div>
)}
{superhead && <SrOnlyText>{`${superhead}: `}</SrOnlyText>}{title}
</Heading>
{subheading && (
<Text
size={2}
align="center"
leading="display"
color="white"
className={styles.subhead}
>
{subheading}
</Text>
)}
{!!heroContent && (
<div className={styles.content}>
{heroContent}
</div>
)}
</Container>
</Container>
</Container>
);
);
};
2 changes: 1 addition & 1 deletion components/MomentPoster/MomentPoster.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const root = 'relative overflow-hidden';
export const wrapper = 'relative w-full z-10';

export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-t via-50%' : '');
export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-b via-50%' : '');

export const contentWrapper = 'lg:rs-pr-9 ml-0';

Expand Down
4 changes: 2 additions & 2 deletions components/MomentPoster/MomentPoster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,9 @@ export const MomentPoster = ({
className={cnb(
styles.overlay(hasBgGradient),
bgBlurs[bgBlur],
gradientFroms[gradientBottom],
gradientFroms[gradientTop],
gradientVias[gradientVia],
gradientTos[gradientTop],
gradientTos[gradientBottom],
)}
/>
)}
Expand Down
18 changes: 18 additions & 0 deletions components/Storyblok/SbBasicPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import { Masthead } from '@/components/Masthead';
import { getNumBloks } from '@/utilities/getNumBloks';
import { type SbImageType } from '@/components/Storyblok/Storyblok.types';
import { type HeroPaddingType } from '@/components/Hero/BasicHero.styles';
import {
type GradientFromType,
type GradientToType,
type GradientViaType,
BgBlurType,
} from '@/utilities/datasource';

type SbBasicPageProps = {
blok: {
Expand All @@ -14,6 +20,10 @@ type SbBasicPageProps = {
isSmallHeading?: boolean;
hero?: SbBlokData[];
heroImage?: SbImageType;
gradientTop?: GradientToType;
gradientBottom?: GradientFromType;
gradientVia?: GradientViaType;
bgBlur?: BgBlurType;
paddingType?: HeroPaddingType;
superhead?: string;
subheading?: string;
Expand All @@ -30,6 +40,10 @@ export const SbBasicPage = ({
isSmallHeading,
hero,
heroImage: { filename, focus } = {},
gradientTop,
gradientBottom,
gradientVia,
bgBlur,
paddingType,
superhead,
subheading,
Expand All @@ -56,6 +70,10 @@ export const SbBasicPage = ({
subheading={subheading}
imageSrc={filename}
imageFocus={focus}
gradientTop={gradientTop}
gradientBottom={gradientBottom}
gradientVia={gradientVia}
bgBlur={bgBlur}
heroContent={HeroContent}
paddingType={paddingType}
/>
Expand Down
2 changes: 1 addition & 1 deletion components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { cnb } from 'cnbuilder';

export const root = 'relative overflow-hidden';
export const bgImage = 'absolute top-0 left-0 w-full h-full object-cover';
export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-t' : '');
export const overlay = (hasBgGradient?: boolean) => cnb('absolute top-0 left-0 w-full h-full z-10', hasBgGradient ? 'bg-gradient-to-b' : '');
Copy link
Member Author

Choose a reason for hiding this comment

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

Previously I had the gradient direction going from bottom to top to take advantage of not having to write to-transparent TW class (no need to write this if fading to transparent). However, after testing real example pages, I found that we rarely would start with a transparent color at the top anyway so no need for me to do this reverse gradient trick.

export const header = 'relative overflow-hidden cc 3xl:px-100 4xl:px-[calc((100%-1800px)/2)] z-20';
export const superhead = 'text-shadow-sm';
export const heading = 'fluid-type-7 md:gc-splash mb-0 whitespace-pre-line';
Expand Down
4 changes: 2 additions & 2 deletions components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ export const SbHomepageThemeSection = ({
className={cnb(
styles.overlay(hasBgGradient),
bgBlurs[bgBlur],
gradientFroms[gradientBottom],
gradientTos[gradientTop],
gradientFroms[gradientTop],
gradientTos[gradientBottom],
)}
/>
)}
Expand Down
Loading