Add Block: Cover Image

[jasmussen]

Cover Image (née "Hero Image") is a decorative block that can have text overlaid, and scrolls the image itself in a fancy way, fixed attachment as a start.

This block has nothing to do with the "Featured Image" panel, which is merged into master and works on normal images. See #855

Attributes

• None, Left, Right, Center, Full Width.
• Title
• Edit

States (see all)

[ellatrix]

What does "Hero" mean here? I'm wondering if there's any better name for it :)

[joyously]

Call it background image.

[aduth]

I can't speak to whether it's a familiar term to the majority of users, but it is standard and includes characteristics that distinguish it from other similar content types:

Hero image is a term used in web design for a specific type of web banner. A hero image is a large banner image, prominently placed on a web page, generally in the front and center.[1][2] The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content. A hero image often consists of image and text, can be static or dynamic (e.g. a rotating list of images and/or topics).

https://en.wikipedia.org/wiki/Hero_image

[jasmussen]

I'm not in love with the term "Hero" image, it feels a bit too designery for me. But for the exact reasons Andrew stated above, it's the best term I could think of. However open to suggestions as to what else we could call it that would describe its role. Background image captures some of the technical behavior, but I worry that users might conflate it with the ability to change the background of their entire post with it.

[joyously]

Background image captures some of the technical behavior, but I worry that users might conflate it with the ability to change the background of their entire post with it.

That's basically what it does. But the user could clearly see that it is a block, not the whole post.
Since you mentioned it was fixed position, it makes it seem more like the entire post instead of just the block. And doesn't fixed position cause problems on mobile viewports? This doesn't seem like something the core should be doing.

[jasmussen]

Since you mentioned it was fixed position, it makes it seem more like the entire post instead of just the block. And doesn't fixed position cause problems on mobile viewports?

My apologies, I was unclear in my phrasing. I meant to imply suggest the image position is fixed using background-attachment: fixed;. You can see it by visiting this example post and scrolling:

http://moc.co/sandbox/example-post/

This doesn't seem like something the core should be doing.

Why not?

[joyously]

Ah, that is different. It truly is a background image, so you should call it that instead of hero, which probably doesn't translate well.
I tried your example post on my phone browser. The part that tries to be fixed position (the menu) is obnoxious as it jumps around. The background image part is a bit odd with how the browser updates it after scrolling, but acceptable.
I was thinking core shouldn't be doing any blocks that need special treatment on mobile. But you're not doing position:fixed.

[inhll]

"Hero Image" is commonly accepted terminology, but perhaps "Title Image" would be a clearer name?

"Background image" could cause confusion as the page background would not be filled with the image, as the term implies it would be.

[jasmussen]

"Title Image" is pretty good! It does sort of omit the fancy fixed image attachment effect on the block, which you might like to use without a title, but perhaps that's okay?

LivingDocs has a similar block called "Peephole". Which in a way describes what's going on, but on the other hand just sounds wrong to me.

[inhll]

Definitely -1 for "Peephole" 😆

[rileybrook]

It does sort of omit the fancy fixed image attachment effect on the block, which you might like to use without a title.

An alternative description for a top-fixed image (with optional text) could be "header image" or "cover image." These are two descriptions taken from the Twitter and Facebook profile page editing tools respectively.

Here we are discussing content editing, and not profile editing but - User's might intuitively understand what these descriptions mean since the user base of those two products is so widespread.

[jasmussen]

An alternative description for a top-fixed image (with optional text) could be "header image" or "cover image." These are two descriptions taken from the Twitter and Facebook profile page editing tools respectively.

I kind of like "Cover Image".

Since it will be a block you can insert wherever you like, not just the header, we probably can't call it "Header Image".

Some other brainstorms, "Caption Image", "Opening Image", "Keyhole Image". I'm not sure I like any of those as much as I like "Hero Image" (though again I do recognize that this is not a widely used outside of design circles term, and therefore not ideal either).

[melchoyce]

Per our Slack convo:

I see in your mockups that you can add a “caption” on top, which is cool. Most hero blocks I see usually let you add a header, paragraph, and even a button or link. Any chance of that making its way into the block?

[mapk]

Since it will be a block you can insert wherever you like, not just the header, we probably can't call it "Header Image".

For this reason, we should stay away from "Header", "Title", etc. I'd also advise against stating what type of text would be displayed on top of the image like "Caption" because the user could really use this section for anything, I'm guessing... bullets, headings, paragraphs, etc.

Maybe "Overlay Block", "Superimpose Text Block"... hmmm.

[jasmussen]

I'm coming around to "Cover Image" so far as being the best. It does double duty suggesting that it can serve as a "cover" (magazine-esque), and that the background covers the content. It's also short and sweet.

[georgeh]

It seems like the "alignment" attribute doesn't make sense for a cover image - they are full-width by design right?

This is the markup I've been working off of so far:

<section className="cover-image" style={ { backgroundImage: `url('${ url }');` } }>
	<h2>{ title }</h2>
</section>

[jasmussen]

It seems like the "alignment" attribute doesn't make sense for a cover image - they are full-width by design right?

If it's not too much work I think it's worth trying to keep the layout alignments intact. It would be fun to see what we might do with them. I could see them working in normal text width also.

[hugobaeta]

@joyously

This doesn't seem like something the core should be doing.

@jasmussen I kinda agree with this statement (I know I'm super late to the discussion, so apologies if I missed the right timing to comment on this). The reason why is that a lot of themes use the existing "Featured Image" functionality to create these Hero/Cover/Title scenarios. It almost seems like Gutenberg is taking this kind of decision away from themes by imposing a certain layout or implementation. Core doesn't usually impose so heavily on what happens in the front-end. Not that it's necessarily a bad thing, but how will themes use with this new block? Will they be forced to display it as you are proposing here? And where does the "Featured Image" functionality end up?

Just being devils advocate here. I use the "featured image" extensively in my themes, as do most theme designers. So I'm surprised that topic hasn't come up here.

[jasmussen]

Just to clarify, this block has nothing to do with featured image. That feature isn't going anywhere, and the panel to set it is already implemented. Also, you can place this block anywhere. It doesn't have to be at the top. Does that change anything?

[joyously]

For me, the issue is preventing inline styles and locking in to one way to do it. I don't want to see another of the old way to do gallery (before we had the html5 version). Core did it one way and it was difficult to change or make it work better until the add_theme_support('html5') came along.
This implementation has a class name and an inline style. Themes can't override inline styles without a lot of crazy filtering or something to strip them off. So to make it as portable as possible, you would have to put an ID on it to get the right background image associated. Or don't use inline styles, but put the image into the content and put the URL in an attribute that can be used to style it.

Anyway, I'm now thinking that the bigger question is where do you draw the line? Should all the blocks be the same: add markup with classes and let the theme/plugins style it? Or editor does some, theme does some?

[jasmussen]

Some of the block styling discussion is being looked at currently, so worth following #963 and #422 for that.

As a little bit of context — it's important that we have standards and best practices for how blocks in core behave, and what we consider to be a good way of creating blocks. This is a documentation task that will soon begin. Outside of that there's no technical way for us to prevent third parties from creating whatever block type they want.

[jasmussen]

Renaming ticket to "Cover Image" with props to @rileybrook for the name!

Also updated the body text to note that this has nothing to do with the featured image feature.

[LizNix]

I've been using the featured image to create this effect for years. I've always called it a hero image to colleges and clients.