Feature request: Responsive Hero Layout

[kyledenlinger]

I'd love to have a way to create a layout block to serve as the hero/banner for a collection. I'm trying to use a "cover" image across all pubs in the same collection, and I'd like to display that cover prominently on the collection page.

The text block, while somewhat responsive, doesn't allow for much in terms of side-by-side alignment of elements. The HTML block seems to ignore what I'm trying to do with various styling approaches that don't require media queries, but it's pretty much a certainty that I'm doing that part wrong. :)

Basically what I want is this two-column layout:

But on smaller screens, the text elements would flow below the image, and the image would fill the column. I'd use the heck out of this if it was available (or if someone could help me modify my code to work reliably across communities). My extremely hacky copypasta below:

<div style="display: grid;
  padding: 1rem;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
 max-width: 3000px;
  align-items: center;
font: 500 100%/1.5 system-ui;
  margin: 0 auto;">
<div><img src="https://resize-v3.pubpub.org/eyJidWNrZXQiOiJhc3NldHMucHVicHViLm9yZyIsImtleSI6IjF4M3BsbjVjLzcxNjY5ODMwNjI5NDY3LnBuZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6ODAwLCJmaXQiOiJpbnNpZGUiLCJ3aXRob3V0RW5sYXJnZW1lbnQiOnRydWV9fX0=" alt="img" style="  max-width: 100%;
  height: auto; filter: drop-shadow(0 0 0.15rem black);"/>
</div>
<div style="float:right;">
<h1>Gender & Sexuality in World History</h1>
<h2>Fall 2022, Section A</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

[gabestein]

Hi Kyle, sorry for the delay here...a lot of the page functionality is due for an update, to be sure. A responsive banner with different image alignment options is a great idea that I'll pass along. (I should note, however, that one of the things we're looking at is a larger overhaul to migrate page functionality on to pub infrastructure so you get draft/release, auto-saving, collaboration, etc. for pages as well as Pubs, so I suspect we'll do that before making too many mods to the pages.)

In the meantime, you can accomplish this pretty easily by simply adding a class name (e.g. wfu-responsive-banner) to the grid div and the following to the html block (you could also use a style tag to replace all the inline styles, which might make it easier to manage and would also mean you wouldn't have to use !important):

<style>
@media only screen and (min-width: 750px) {
   .wfu-responsive-banner {
       grid-template-columns: 1fr !important;
    }
}
</style>

If you wanted to do this a lot without using html: it's a little hacky, but you could use the global css to override our existing banners a bit, too.

[kyledenlinger]

Thanks, Gabe. Made a couple of tweaks but it works great now! I'll probably move to custom CSS soon when I have some more time.

For those who might like something similar, here's what I used. You can see it in action here.

<style>
@media only screen and (min-width: 750px) {
   .wfu-responsive-banner {
display: grid;
grid-template-columns: 300px 1fr;
padding: 1rem;
gap: 2rem;
max-width: 3000px;
align-items: center;
font: 500 100%/1.5 system-ui;
margin: 0 auto;
    }
 }
</style>
<div class="wfu-responsive-banner">

<div><img src="https://live.staticflickr.com/5481/11074573926_9097551605_3k.jpg" alt="Cover Image" style="  max-width: 100%;
  height: auto; filter: drop-shadow(0 0 0.15rem black);"/>
</div>
<div style="float:right;">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p><em>Published December 2022</em></p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices in iaculis nunc sed. Magna fringilla urna porttitor rhoncus dolor purus non. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sed velit dignissim sodales ut eu. Non consectetur a erat nam at lectus urna. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor.</p>
</div>
</div>