Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UX] New default Hero block image on new sites #6752

Open
stpaultim opened this issue Nov 16, 2024 · 33 comments · May be fixed by backdrop/backdrop#4917 or backdrop/backdrop#4919
Open

[UX] New default Hero block image on new sites #6752

stpaultim opened this issue Nov 16, 2024 · 33 comments · May be fixed by backdrop/backdrop#4917 or backdrop/backdrop#4919

Comments

@stpaultim
Copy link
Member

stpaultim commented Nov 16, 2024

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.

image

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.

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

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

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

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

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

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

image
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
Copy link
Contributor

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
Copy link
Member Author

stpaultim commented Nov 19, 2024

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.

image

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
Copy link

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
Copy link
Contributor

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
Copy link

findlabnet commented Nov 19, 2024

clouds are my favorite so far now.

... and slightly similar to my profile page 😄

@stpaultim
Copy link
Member Author

@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
Copy link
Contributor

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
Copy link
Member Author

stpaultim commented Nov 24, 2024

OK, I tried a few.

Dragons

image

image

dragon-2

image

image

@izmeez
Copy link

izmeez commented Nov 24, 2024

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

@olafgrabienski
Copy link

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
Copy link

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

screen-hero-theme-axioma

B21

screen-hero-theme-b21

Bartik

screen-hero-theme-bartik

Bootstrap Lite

screen-hero-theme-bootstrap-lite

Cleanish

screen-hero-theme-cleanish

Corporate Kiss

screen-hero-theme-corporate-kiss

Lateral

screen-hero-theme-lateral

Monochrome

screen-hero-theme-monochrome

Opera

screen-hero-theme-opera

Pelerine

screen-hero-theme-pelerine

Scenery

screen-hero-theme-scenery

Shasetsu

screen-hero-theme-shasetsu

Snazzy

screen-hero-theme-snazzy

@olafgrabienski
Copy link

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
Copy link
Contributor

@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
Copy link

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:

screen-hero-svg-pattern-blue-basis

@docwilmot
Copy link
Contributor

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
Copy link

izmeez commented Nov 29, 2024

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

@olafgrabienski olafgrabienski changed the title [UX] New default image on new sites [UX] New default Hero block image on new sites Dec 2, 2024
@olafgrabienski
Copy link

olafgrabienski commented Dec 2, 2024

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:

hero-block-image-waves

@stpaultim
Copy link
Member Author

stpaultim commented Dec 2, 2024

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
Copy link

olafgrabienski commented Dec 3, 2024

@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
Copy link
Member Author

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
Copy link

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
Copy link
Member

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

@stpaultim
Copy link
Member Author

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
Copy link
Member

indigoxela commented Dec 5, 2024

@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
Copy link
Member

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
Copy link
Member Author

@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
Copy link
Member Author

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

image

Here is after:

image

@stpaultim
Copy link
Member Author

stpaultim commented Dec 5, 2024

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

Axioma
Before:

image

After:
image

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:

image
After:

image

Look at what happens with Scenery:

Scenery

Before:

image
After:

image

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

Bootstrap 5 Lite

Before:

image
After:

image

@indigoxela
Copy link
Member

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
Copy link
Member

@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.

@indigoxela indigoxela reopened this Dec 5, 2024
@stpaultim
Copy link
Member Author

stpaultim commented Dec 5, 2024

@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
Copy link
Member Author

stpaultim commented Dec 5, 2024

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
Copy link
Member

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment