[UX] New default Hero block image on new sites

[stpaultim]

Description of the need

Add a default image in the hero block on the front page of NEW backdrop sites.

There are several reasons to make this change.

1. As discussed in this issue, several people have reported that the lack of a default image in the default hero block, gives them the impression that it is more difficult to change the hero image than it actually is. Having a default image and a preview would make the workings of this block much more transparent and easy to understand.

2. Freshen up the look of Backdrop. Make a small change that shows some creativity and life in the community and the project. The default front page has remained pretty stagnet (other than the "cards") for the last 29 releases.

3. The hero block is installed on very new site, but only Basis (and some other contrib themes) provide a css background. This means that if a new site installs a theme like Shasetsu, there is no image or background image. This means that the theme creator might easily fail to provide css for what this block should look like and people using the theme might not realize that the hero block is present.

4. Specifically to celebrate our 30th release. Image a screenshot of the front page on our 30th release announcement that reflects some celebration of our acheivements.

Proposed solution

That we add a default image to this block on new sites. I've provided a few samples about what a new front page image would like. I assumed that something that is at least partially abstract would be good and appeal to a larger audience.

I focused on two themes. "Backdrop" or "Celebration." We could go in a different direction, but the first step is to decide if we are even open to having a default image file, before we spend time trying to decide which one.

https://pixabay.com/photos/tea-plantation-landscape-vietnam-3358870/

https://pixabay.com/photos/abandon-aged-apartment-backdrop-5235248/

https://pixabay.com/photos/abandoned-places-factory-hall-5348735/

https://pixabay.com/photos/bokeh-lights-blurred-background-792083/

https://pixabay.com/photos/beach-coast-sea-sand-wave-ocean-2562563/

https://pixabay.com/photos/festivities-fireworks-celebration-1285263/

https://pixabay.com/photos/balloons-celebration-hover-helium-1012541/

Alternatives that have been considered

Not sure, open to ideas.

Additional information

We could change the image for 1 release only. Anyone who downloads version 1.30 would get this image. With 1.31 we could go back to the original image.

We could also decide to change this with each release.

This would be part of the install profile, so updating it on live sites would have no impact on existing sites.

Draft of feature description for Press Release (1 paragraph at most)

In celebration of our 30th release, Backdrop CMS has introduced a new default hero image on the front page of new sites. This new image should freshen up the appearance of Backdrop and give us all new perspective to bring with us for the next 30 releases or the next 10 years.

[docwilmot]

I think this is an excellent idea which would be simple to complete in time for the new release rather than a new theme. Perhaps we could also adjust the default color scheme at the same time to match the image, and, my long term irritation, the color of the cards.

My preference is the fireworks and the blurred background.

[stpaultim]

I added to the original post another (very subjective) reason that this change might make sense.

A theme like shasetsu, does not provide any default css background for this block. This reduces the likelihood of the block being themed or it's functionality noticed.

I suppose it's possible a theme doesn't want any kind of hero image, image file or css. But, the blocks is still there and someone could still easily add an image.

Maybe this is why the block was not originally given a default image.

I'm still a little confused about whether a contrib theme should have an opinion about something like the use of the hero block or if the expectation is that every contrib theme should be prepared for the use of this default block, with or without an image.

[olafgrabienski]

I like the idea to provide a default background image for the Hero block, both generally and as an opportunity to give Backdrop a fresh look for the next Backdrop release. To find and provide a new Hero image should be much easier than making a new core theme, but I guess it will be challenging enough.

Let's see! I was curious and have experimented with some images from Unsplash. See screenshots in collapsible elements below.

Btw, it was not easy to find a photograph which looks good in various screen sizes. Graphical patterns were easier. I guess, we'll have to test thoroughly and maybe even adapt photos so that they fit in various situations. In my experiments below, I didn't change any photo, but manipulated their background-position. The patterns worked without manipulation.

Balloons

Nice photo, in my opinion. Good for celebrating without being too determined.

Clouds

Some people see the current Hero image in Basis as clouds, so I looked for a cloud photo. As you may note, the font color isn't the usual black. Black doesn't look good and isn't readable here, so I chose a bright blue. (Separate issue: allow to choose a font color for the Hero block.)

Railway

This is really an experiment, not a suggestion, even if I like the yellow balloon as celebrating reference. Apart from that, I was curious if it's possible to use a more busy photo. As you see, I had to apply some styles to the heading to make it readable.

Bright pattern

Even though the image is a photograph, it looks like a graphic pattern. As mentioned above, patterns work very good for different screen sizes. I like this one, but I admit, it's a bit colorless.

Colored pattern

Tadaaa ... more color! And my favorite so far. Looks good and works very well in different situations. If there's interest, I can provide screenshots from other themes.

[docwilmot]

And my favorite so far

Oh, the clouds are my favorite so far now. It keeps the previous blue hue, it invokes newness and brightness, and clouds on a "backdrop" of blue sky. 😄

[findlabnet]

clouds are my favorite so far now.

... and slightly similar to my profile page 😄

[stpaultim]

@olafgrabienski Thanks for adding some more ideas. My initial samples were meant as proof of concept and I did not look for an image that would work well on both desktop and mobile. I assumed that would come later. Thanks for taking that step.

Of yours, I would be happy with Clouds, Balloons, or Colored Pattern.

I'm actually good with the train as well, but I think it's too "real world" to get broad approval. Something a bit more abstract like clouds or balloons will have broader appeal, I think.

I like the idea of selecting a new image for each release, but I'm not sure if that will get much traction. I just think it might be fun and engaging. If we changed the default image frequently, we could be a bit more experimental with some of our choices.

I suppose we should check to see if having a default image has negative side effects on any contrib themes that are not expecting it.

[docwilmot]

Could we ask use of those AI image generators to create something with a dragon in it? AFAIK generated images don't have copyright issues, right?

[stpaultim]

OK, I tried a few.

Dragons

[izmeez]

I like the dragon with mountain and clouds. Maybe some color would enhance it.

[olafgrabienski]

While I also like the dragon with mountain and clouds, I'm skeptical about whether we should use the dragon for the Hero block at all. In my opinion, dragon images are well suited for internal and community purposes, but to the outside world or newcomers they may appear more hobby-like and unprofessional.

[olafgrabienski]

I suppose we should check to see if having a default image has negative side effects on any contrib themes that are not expecting it.

@stpaultim I've tested the Colored pattern image with a dozen contrib themes and with Bartik and didn't see negative effects. This image seems to work well in different situations, even for themes which have own default images.

Screenshots

Axioma

B21

Bartik

Bootstrap Lite

Cleanish

Corporate Kiss

Lateral

Monochrome

Opera

Pelerine

Scenery

Shasetsu

Snazzy

[olafgrabienski]

Could we ask use of those AI image generators to create something with a dragon in it? AFAIK generated images don't have copyright issues, right?

@docwilmot I'm not an expert, but photos from Unsplash shouldn't have any copyright issues either.

[docwilmot]

@olafgrabienski, while I also liked the colorful background, I thought it looked a bit too pink, a bit dramatic switch from the cool blue we had before. It might be my personal prejudice though, but can you find a similar pattern that's blueish?

In my opinion, dragon images are well suited for internal and community purposes, but to the outside world or newcomers they may appear more hobby-like and unprofessional.

Fair enough. I'm thinking now as well, with the short timeline, an abstract image may be easier to agree on.

[olafgrabienski]

can you find a similar pattern that's blueish?

On Unsplash, I didn't find a similar pattern image with other colors, but now that things are moving more towards patterns, I remember a nice SVG background source that I have used before. Here is an example with a blueish SVG background from there for a first impression:

[docwilmot]

Here is an example with a blueish SVG background from there for a first impression:

I like this. I thnk the curves soften things a bit; Backdrop is generally all angles. Disclaimer I feel like a fake TV interior decorator saying all this, I have no experience or authority in design and colors and such, going on gut feeling here.

Having said that, with limited time, can we get thumbs up on the last image if its OK, so someone can PR, and so we can start adjusting other colors if needed?

[izmeez]

I like the last image with shades of blue, like waves.

[olafgrabienski]

can we get thumbs up on the last image if its OK, so someone can PR, and so we can start adjusting other colors if needed?

Thanks for your feedback! So far, we have three thumbs up (@docwilmot, @izmeez, and me). @stpaultim, what do you think of the SVG background?

The image is from svgbackgrounds.com, by the way. It's the first of the free SVGs, and I've changed the colors from yellow to blue. If we want to use it, we have to look at the license and the attribution guidelines. The guidelines provide acceptable options, in my opinion, but I can't assess whether the license is also OK. (If not, we could try to create a similar image ourselves.)

---

SVG image:

[stpaultim]

To be honest. I liked the idea of something a bit more photographic, but still abstract. Having said that, I realize how easily this issue can get bogged down and I'm all in favor of riding whatever tide of consensus we can generate.

This recent image with blue waves is nice and I think it's an improvement. I was hoping for something more distinct than this (distinct from the current image), but I'm good with this.

I think someone should create a PR, so that we get more attention to this issue. (I'm still waiting for someone to identify a reason why we shouldn't do this at all.)

[olafgrabienski]

@stpaultim Thanks for your feedback! Glad to hear you're good with the blue waves suggestion. I also see your hesitation, and in my opinion we have still different options, including a photographic one. IIRC, three suggestions got mostly positive comments, each with different advantages and different caveats (see a comparison below).

A PR would be nice, are you able to create one? And I suggest to discuss this issue at the next weekly meeting to get more attention.

Clouds photo	Colored pattern	Blue waves
Pro: photographic, fresh look	Pro: new colors, good fit for different themes and sizes	Pro: smooth, not 'all angles', very small file size
Con: needs adoption, not very flexible	Con: unfamiliar colors	Con: not very distinct in comparison to current CSS background in Basis
Notes: screenshot is with custom background-position and title color; the latter could be a setting which would improve accessibility generally	Notes: –	Notes: license situation to be clarified

[stpaultim]

OK, we have a PR for this issue using the blue waves. So, we can see how this new feature MIGHT be implemented.

I'm open to other images, but before we spend more time deciding which image to use - I think we need more agreement that having a default image is a good idea.

[olafgrabienski]

Thanks for the PR, looks good at first sight!

I wanted to check the look and feel with some contrib themes in the PR sandbox, but installing them failed (message: "Permissions are not set up properly").

[yorkshire-pudding]

Yes, I think an image is a good idea. I'm happy with anything.

[stpaultim]

I wanted to check the look and feel with some contrib themes in the PR sandbox, but installing them failed (message: "Permissions are not set up properly").

This is a known problem. It used to be possible to add contributed themes and modules to PR sandboxes, but we lost that ability a while back (I think that @klonos has been complaining about this for almost a year or more). @klonos was working to fix this, but I don't think he ever finished.

[indigoxela]

@stpaultim I can see, which problem you're trying to solve by using a "real" (uploaded) file, but as a contrib theme maintainer, if find this unacceptable.

This severely breaks the style and concept of Lateral, Scenery, Snazzy, Pelerine and Monochrome - of which I'm maintainer. And probably also breaks the design of almost every existing contrib theme.
I object. Sorry, but I can't avoid a hard objection here.

There must be a better way to advertise the (easy) upload of hero images, that does not ruin all themes other than Basis. And even Basis looks miserable, as soon as one switches to a different (pre-defined) color scheme.

[indigoxela]

I do support a new background image via CSS, that doesn't affect any other theme than Basis. Actually, I like the wavy image - but it should work with luminosity, so switching the color scheme inherits the background color.

If replacing texture.png for newly installed sites only (used in CSS on .block-hero-no-image) is feasible, I'd support that.

[stpaultim]

@indigoxela

I have to say that I'm a bit perplexed by your need to object so strenuously. A very mild objection would suffice, if in fact this change breaks contrib themes. I think that there is a VERY strong history of NOT making changes that break contrib themes and this is exactly the kind of feedback we were looking for.

Two weeks ago, I asked about this potential problem.
#6752 (comment)

I suppose we should check to see if having a default image has negative side effects on any contrib themes that are not expecting it.

I had some reason to believe that this would not negatively effect contrib themes, but had not yet tested them myself. Sharing screenshots or information about how this breaks your themes would have been helpful. But, no worries. I'll test this myself.

[stpaultim]

I see the problem. Here is Lateral before the new image:

Here is after:

[stpaultim]

Axioma is another theme that has already selected an image and this default image replaces it with a VERY different feel.

Axioma

Before:

After:

This is a pretty dramatic change for Opera (which I created) as well. I didn't think I would mind, but this is pretty harsh.

Opera

Before:

After:

Look at what happens with Scenery:

Scenery

Before:

After:

I don't think it really matters on themes like Bootstrap (or Shasetsu which I have not screenshotted):

Bootstrap 5 Lite

Before:

After:

[indigoxela]

Here's a 5 minute POC for what I could imagine... backdrop/backdrop#4919 Pretty rough around the edges. I made the SVG myself, so there's no license problem with that.

[indigoxela]

@stpaultim It's not necessary to close this issue, as I only object to the way it's implemented in the first PR, but do support the idea of using a new image for hero blocks in Basis - as long as it doesn't break contrib. And I do belief, it's feasible.

[stpaultim]

@indigoxela Thanks for the POC. As you pointed out, this does not address reasons (1) and (3) for this issue. BUT, it does very much address reasons (2) and (4).

Having looked closer at this issue, I'm not sure it's possible to address reason (1). But, I'll give it more thought - always keeping in mind that whatever solution proposed, must work nicely with contrib.

If we do this ONLY for reasons (2) and (4), I hope we can come up with an image that is more distinct from the current design. The blue waves are too close to the current design to really call it a "refresh" in my opinion. But, I can be persuaded.

However, I'd like to be sure that we have consensus that we want to make this change, before we spend time debating which design to use. This current POC PR is helpful in demonstrating how this would be done.

[stpaultim]

But, I think the PR by @indigoxela would require progress on #4782 to make it backward compatible.

My PR was backward compatible, because it inserted the image as part of install profile and would not effect existing sites. The PR by @indigoxela would change core CSS, which could effect existing sites (unless we introduce supplemental CSS selectors).

NOTE: I never intended to close this issue. That must have been a mistaken click on my part.

[indigoxela]

@stpaultim before you raise concerns re BC ... mind to look at the actual code change? 😉 My PR is BC and does not depend on any other issue.

[olafgrabienski]

This severely breaks the style and concept of Lateral, Scenery, Snazzy, Pelerine and Monochrome - of which I'm maintainer. And probably also breaks the design of almost every existing contrib theme.

@indigoxela and @stpaultim, I guess I'm partially responsible for the current situation, sorry for that! Stating in #6752 (comment), that "I've tested the Colored pattern image with a dozen contrib themes" without seeing negative effects was at least misleading. Looking at contrib themes at that point, I hadn't backwards compatibility (edit: or theme compatibility in the narrower sense) in mind, I just wanted to see if the background looks okay in popular themes. I'll check the alternative PR as soon as possible.

[indigoxela]

I updated the POC PR, moved the logic completely into Basis, and updated the version check to give a better impression, how this is supposed to work.

I'm aware, that this POC doesn't even consider point 1 (issue description), but this could get addressed in a follow-up.

[olafgrabienski]

Thanks for the proof of concept PR, @indigoxela! The background appears in the sandbox, great! Are there already particular things to test? (As far as I understand, the luminosity approach for support of different color schemes isn't yet implemented.)

[indigoxela]

(As far as I understand, the luminosity approach for support of different color schemes isn't yet implemented.)

In fact, it is - as this approach uses only CSS.

Things to test, hmmm... Different color schemes in Basis? Subthemes of Basis (other themes aren't affected anymore)?

Caution, the version check's still a bit misleading - currently the evaluated timestamp doesn't fit, yet. That's for easier testing with existing dev instances, but it can be a bit confusing.

[olafgrabienski]

As far as I understand, the luminosity approach for support of different color schemes isn't yet implemented.

In fact, it is - as this approach uses only CSS.

I see! As far as I understand now, luminosity makes sure that the background doesn't look blueish but neutral (gray) in other color schemes. I was expecting it changes the background color according to a scheme's main color, but currently the color schemes don't provide an item for Hero background color.

[indigoxela]

luminosity makes sure that the background doesn't look blueish

Not really. It was necessary for the grey-ish pattern.png, but wouldn't be necessary at all, if we stick with the (now) white image, which only works with steps of transparency. So, in fact we could drop that CSS for new sites.

currently the color schemes don't provide an item for Hero background color.

"Mobile site name background" sets that also. A bit hidden. 😉