[UX] New default 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.