►
From YouTube: Backdrop CMS: Add or Change Your Hero Image
Description
A short introduction to the hero image block in Backdrop. How to change the Hero image and modify it's appearance with the Configurable Block Style module. For more info on Configurable Block Style module: https://youtu.be/Htn7jw4c8eg
A
A
A
So
I'm
looking
for
the
home
page
layout
I'll
go
to
manage
blocks
on
the
home
page
layout
and
what
we
are
looking
for
here.
If
we
read
the
block
titles,
it's
not
obvious
from
the
title
here,
but
if
we
read
the
description
of
the
block,
it
says
a
hero
block
often
consists
of
text
over
a
background
image,
although
either
are
optional.
So
what
we're
going
to
do
is
configure
that
hero
block
and
I'm
going
to
actually
do
something
here,
which
is
change.
A
The
administration
label
to
hero
block
just
to
make
it
a
little
bit
more
clear
for
my
purposes
in
the
future.
So
now,
oh,
I
want
to
go
back.
So
I
saved
that
change.
I
changed
the
the
admin
label,
but
I
want
to
go
back.
The
main
purpose
we
came
here
was
to
change
the
image.
The
default
image
doesn't
show
up
here,
it's
just
in
the
theme,
but
if
we
want
to
replace
that
sort
of
blue
cloudy
image,
we
just
hit
browse
and
I'm
going
to
start
with
this
image.
A
I
found
a
a
free
image
on
the
internet,
a
wiki
commons
image
of
a
farmers
market,
and
this
is
the
raw
image
that
I
downloaded,
and
I
just
want
to
illustrate
a
couple
of
things
with
that.
We're
going
to
just
save
this.
Go
back
look
at
our
front
page,
and
we
are,
of
course
still
using
the
basis
theme
for
this
demonstration
and
I
spot
a
couple
of
things
right
away.
A
First
of
all,
this
text,
the
way
the
text
is
laid
out
by
default
is
not
gonna
work
and
for
the
purposes
of
this
video
we're
just
going
to
remove
that.
The
other
thing
is,
though,
that
the
image
it
crops
kind
of
weird
it
just
takes
the
top
of
the
image.
This
is
actually
almost
square
image.
It's
it's
a
vertical
horizontal
or
a
horizontal
photo,
but
it's
pretty
high
and
we're
just
getting
the
top
parts
of
it.
That's
not
really
useful!
A
I
can
see
if
I
inspect.
This
is
a
developer
tool
that
you
might
not
have
available
in
your
browser.
But
what
I
want
to
do
is
just
close
my
window
and
we
can
see
it's
not
a
bad
image
if
you
get
the
whole
thing,
but
by
default
your
backdrop
is
only
showing
us
a
part
of
it
and
not
that
the
helpful
part,
so
we're
going
to
need
to
make
a
change.
Let's
go
back
this
time.
Let's
take
the
shortcut,
we
can
go
to
that
little
contextual
menu
and
say
configure
this
block
there.
A
It
comes
just
had
to
wait
a
minute,
so
one
thing
we're
gonna
do
is
we're
gonna
get
rid
of
this
text.
The
text
in
the
title
is
what's
displaying
over
the
block
and
we
can
just
delete
that
we
have
to
have
either
an
image
or
some
text,
but
we
can't
we
don't
need
both.
So
and
now,
I'm
gonna
remove
that
image
and
what
I
did
was.
I
already
went
ahead
and
cropped
that
same
image
into.
A
A
So
I
tried
to
crop
this
in
a
way
where
the
most
important
part
of
the
image,
I
think
the
people
sort
of
interacting
with
each
other,
is
at
the
top
and
then,
as
the
image
gets
bigger,
it
shows
more
we'll
see
that
in
a
minute,
so
I'm
going
to
go
ahead
and
hit
open,
update
this
block
and
we
always
whenever
we
make
changes
to
a
block.
We
also
have
to
save
that
layout
before
we
can
go
check
it
out.
This
takes
us
back,
so
this
is
much
better,
but
this
is
all.
A
A
So
I'd
like
to
see
more
of
that
now,
we
can't
do
that
with
the
you
know,
the
our
choices
for
doing
that
would
either
be
to
change
the
theme
we
could
show
more
of
this
block
using
the
theme
or
we
can
use
well,
one
option
would
be
the
configurable
block
style
module.
This
is
not
part
of
core.
I
went
ahead
and
downloaded
it
before
and
enabled
it
prior
to
the
start
of
this
video.
I
guess
we'll
look
really
quick.
A
A
A
Now
the
the
configurable
block
prior
to
adding
this
module,
we
have
the
default
and
dynamic
is
our
two
options.
The
configurable
block
style
adds
this
set
of
options.
If
we
click
on
that
a
bunch
of
other
things
appear
and
there
I
have
another
video
which
you
can
look
for
specifically
about
this
module
that
we'll
talk
about
all
the
details.
A
For
the
purposes
of
this
module,
we're
going
to
jump
right
to
the
height
and
we
could
set
a
fixed
height,
so
we
could
set
this
to
be
a
certain
height.
Always
we
can
set
a
response
of
height
which
is
going
to
change
depending
on
the
width
of
the
the
screen.
This
is
what
we're
going
to
do.
We'll
see
that
in
a
minute
and
the
fixed
background
or
fit
background
image
means
that
that
block
is
going
to
get
as
big
as
your
images.
A
40
of
the
vertical
width
of
the
screen,
whatever
screen
the
user
is
using,
but
within
within
250
or
500
pixels,
so
I'm
gonna.
I
happen
to
have
been
involved
in
setting
these
defaults.
So
I
know
I
like
them,
so
I'm
gonna
just
keep
them,
and
I'm
gonna
hit
update
block,
go
back
to
the
home
page
and
we
saved
we
saved
our
content,
we're
back
on
the
home
page
and
there
we
go.
That's
a
much
more
sort
of
attractive
view.
A
I
think
let's
try
refreshing
and
see
so
that's
a
little
bit
weird
I'd.
Rather
it
not
do
that,
but
really
to
solve
that
problem
to
solve
the
problem
of
the
how
it's
cropping
here.
I
would
either
need
a
different
theme
again
we're
using
basis,
or
I
would
need
to
to
sort
of
override
that
behavior
in
a
custom
or
a
try,
a
sub
theme
of
basis,
which
we
will
talk
about
in
another
time.
Okay.
A
So
for
now,
though,
this
is
much
better,
certainly
on
a
desktop
and
a
lot
of
devices
in
between.
I
think
it's
much
better.
I
do
have
some
concerns
on
mobile,
although
it's
not
it's
not
awful.
So
that's
good
enough
for
now
and
we're
going
to
leave
this
video
there
thanks
for
watching
and
see
you
soon.