Add a preview of the background image to Hero block configuration forms

[docwilmot]

Description of the need

There is no preview of the background image of Hero blocks in the block configuration forms.
At least one user reported not realizing that the background image was configurable. This might help.

Proposed solution

Add a preview of the background image to Hero block configuration forms.

Additional information

Backdrop v 1.29.1

Draft of feature description for Press Release

Backdrop now includes a preview of the background image of Hero blocks in the block configuration forms

[docwilmot]

I've pushed a PR for this, but unfortunately it doesn't show an image for the out of the box hero block. This is because there is no hero block background image out of the box, and Basis theme just has a CSS image that it applies to hero blocks with no background.

[olafgrabienski]

and Basis theme just has a CSS image that it applies to hero blocks with no background.

What do you think about adding the CSS image also to the Seven theme in this case?

[izmeez]

@docwilmot Great idea to add preview.
@olafgrabienski The seven theme doesn't have an image in hero block so you'd have to add it anyway if you wanted to use it as a site theme.

[izmeez]

The PR has some phpcs coding errors.

[olafgrabienski]

The seven theme doesn't have an image in hero block (...)

I know, but my idea was: If the Seven theme uses somehow the CSS image definition from Basis for blocks without background image, the CSS image could also show up in the preview when you use Seven as admin theme and edit a block without background image. Not sure if something like this would work.

[docwilmot]

The seven theme doesn't have an image in hero block (...)

I know, but my idea was: If the Seven theme uses somehow the CSS image definition from Basis for blocks without background image, the CSS image could also show up in the preview when you use Seven as admin theme and edit a block without background image. Not sure if something like this would work.

Its reasonable I agree to assume that if the front theme is Basis or a subtheme thereof and there is no image then Basis CSS background may be being applied in the front end, but that may be a fragile plan because we couldnt be sure if the CSS was overridden, in a subtheme. And then we'd need to include an image in Seven thats only used for a particular front end theme. Doesnt all sound right TBH.

[izmeez]

I would vote against adding the Basis hero image to the Seven theme.

[quicksketch]

This is a nice little improvement. The overall approach looks good to me, I left a few suggestions in a review: backdrop/backdrop#4898 (review)

[stpaultim]

More than one person has told me that they did not realize that they could replace the default image. I think that this PR will improve that situation!

[olafgrabienski]

More than one person has told me that they did not realize that they could replace the default image. I think that this PR will improve that situation!

@stpaultim Unfortunatly, the PR doesn't improve the particular situation with the default image, see #6736 (comment):

This is because there is no hero block background image out of the box, and Basis theme just has a CSS image that it applies to hero blocks with no background.

[olafgrabienski]

I've tested the PR in the sandbox, works for me!

One observation: The image aspect ratio in the preview is the same as the uploaded image. If this ratio isn't extra wide, the preview can seem quite narrow (see first screenshot below). I think the preview would meet expectations for a hero block better, if it fills the full width of the block configuration window (see second screenshot).

Current aspect ratio of the preview:

Suggestion:

The suggestion could be achieved by setting the image width to 100% and its height to auto. The intended height of 250px could then be applied to the surrounding div, including overflow hidden and a little margin-bottom.

[docwilmot]

One issue though is that we cannot know what the image will look like on the front end theme, after that theme's CSS alters the image and the block. I think its clearer to show what the native image looks like rather than cropping and forcing a landscape image. Its not a preview of the hero block, its a preview of the image.

[docwilmot]

More than one person has told me that they did not realize that they could replace the default image. I think that this PR will improve that situation!
@stpaultim Unfortunatly, the PR doesn't improve the particular situation with the default image, see #6736 (comment):

The current code shows nothing if there is no background image; could we instead of that, show a message saying "No image uploaded, some themes may define the background image in CSS" or something such? Or maybe even just blatantly say, if Basis is front end, "Basis uses a CSS image" or such?

[stpaultim]

@docwilmot

Your suggestion of adding some text when there is no default image would be an improvement. I think we could also display a small thumbnail that represents the current backdrop texture, when there is no image available.

I recommend one of those two options - UNTIL we build agreement on my preferred solution, which is adding a new default image to Backdrop to celebrate the 30th release. I opened a new issue for that discussion to avoid bikeshedding specific images in this issue - or getting sidetracked discussing whether or not that is even a good idea.

This current PR is a good idea either way.

[docwilmot]

I think we could also display a small thumbnail that represents the current backdrop texture, when there is no image available.

Unfortunately there is no Backdrop texture, only a Basis texture. See #6736 (comment).

[olafgrabienski]

I think its clearer to show what the native image looks like rather than cropping and forcing a landscape image.

Agreed! I probably misunderstood the goal, also because there was already a very wide image in the sandbox uploaded from someone before, which covered the full width of the configuration window. The wide display looked quite convincing to me, and when I uploaded an own example, its narrow display looked somehow strange in comparison.

However, if we want to show what the native image looks like, why not use the usual thumbnail, known from image fields (see screenshot)?

[docwilmot]

The PR actually does display a thumbnail, but the "medium" size, not the "thumbnail" size.

[docwilmot]

I went ahead and added the browse button to this PR. Easily removed if there is disagreement but I think it belongs.

[stpaultim]

Unfortunately there is no Backdrop texture, only a Basis texture.

I understood that, but could have been clearer. My point was that we could create a thumbnail of the texture that is ONLY used to represent what is being displayed, even though it is not an image.

I prefer the idea of adding a new default image.

EDIT: Sorry, I realize now that the texture is defined by the theme and if Basis is not the active theme, our fake thumbnail would not be accurate. So that idea does not work.

In this text: "No background image is currently set. Some themes, such as Basis theme, may display a background image defined in CSS."

Possible alternative wording (3 words removed): "No background image is set. Some themes, such as Basis, may display a background defined in CSS."

I like the idea of adding the "Existing File" option.

[olafgrabienski]

The PR actually does display a thumbnail, but the "medium" size, not the "thumbnail" size.

Fair enough! Interestingly, the dimensions changed in the meantime. Maybe by defining the image style in a different way? Anyways, I like the new (less obstrusive) size!

New:

Before:

[stpaultim]

Just trying to come up with ideas to shorten the text when there is no image present, under the belief that the less text we use the more likely it will be read.

screenshots

Current PR

Shorter Text Suggestion

[izmeez]

I think the longer text is helpful. It is educational in that it teaches/reminds people that images can reside elsewhere, e.g. in the theme css.

[olafgrabienski]

I also think that longer text is helpful here. Ideas to improve it a little:

• Add the description class (and some margin) to the text element.
• Put most important part in first line.
• Put the rest in a second line, improve wording.

Screenshot:

[docwilmot]

PR updated. As usual I cannot reliably advocate, since I'm usually at work during meetings, but I'm happy to be the advocate, so can this get a milestone please?