hero component: reverse text<->image

[amrutadotorg]

Hi,

Here are two features you might want to consider implementing in the hero component:

1. Reverse Positioning:
   Add a reverse variable that, when set to TRUE, swaps the position of the description with the image/video.

2. Lazy Loading for Video:
   If the poster variable is provided, include the preload="none" attribute along with the poster attribute to prevent automatic video download, which is beneficial for large files. If the poster variable is not provided, exclude both the preload and poster attributes, allowing the video to download automatically.

example:

SELECT 'hero' as component,
'"I bow to all the seekers of truth."' as title,
TRUE as reverse,
'images/video_covers/i_bow.jpg' as poster,
'/media/1982-1007_I_bow.webm' as video;

hero.handlebars

<header class="row align-items-center" {{#if id}} id="{{id}}"{{/if}}>
  {{#if reverse}}
    {{#if image}}
      <img src="{{image}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" />
    {{/if}}
    {{#if video}}
      <video src="{{video}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" controls 
        {{#if poster}}
          preload="none"
          poster="{{poster}}"
        {{/if}}>
      </video>
    {{/if}}
    <div class="hero-title col text-center">
      <h1 class="lh-lg" style="font-size: 3rem">{{title}}</h1>
      <div class="fs-1 mx-5 text-muted">
        {{~description~}}
        {{~#if description_md~}}
            {{{markdown description_md}}}
        {{~/if~}}
      </div>
      {{#if link}}
        <a href="{{link}}" class="btn btn-primary mb-3 mt-2 text-wrap">{{default link_text "Go"}}</a>
      {{/if}}
    </div>
  {{else}}
    <div class="hero-title col text-center">
      <h1 class="lh-lg" style="font-size: 3rem">{{title}}</h1>
      <div class="fs-1 mx-5 text-muted">
        {{~description~}}
        {{~#if description_md~}}
            {{{markdown description_md}}}
        {{~/if~}}
      </div>
      {{#if link}}
        <a href="{{link}}" class="btn btn-primary mb-3 mt-2 text-wrap">{{default link_text "Go"}}</a>
      {{/if}}
    </div>
    {{#if image}}
      <img src="{{image}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" />
    {{/if}}
    {{#if video}}
      <video src="{{video}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" controls 
        {{#if poster}}
          preload="none"
          poster="{{poster}}"
        {{/if}}>
      </video>
    {{/if}}
  {{/if}}
</header>

<hr />

<div class="row justify-content-center mt-2">
  {{~#each_row~}}
  <div class="col-lg-6 col-xxl-4 mb-4">
    <div class="card border-0 h-100">
      <div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
        {{#if icon}}
        <div style="margin-top: -1.5rem;" class="badge bg-{{default color 'success'}} text-{{default color 'success'}}-fg fs-1 mb-4 p-2">
            {{~icon_img icon 30~}}
        </div>
        {{/if}}
        <h2>
          {{#if link}}
          <a href="{{link}}">
          {{/if}}
            {{title}}
          {{#if link}}
          </a>
          {{/if}}
        </h2>
        <div class="mb-0">
          {{~description~}}
          {{~#if description_md~}}
              {{{markdown description_md}}}
          {{~/if~}}
        </div>
      </div>
    </div>
  </div>
  {{~/each_row~}}
</div>

[lovasoa]

I'm not sure about the reverse and the code duplication it implies. You can implement this reverse with a single css attribute:

main > header {
  flex-direction: row-reverse;
}

For the video, I think preloading by default offers a better user experience. Why do you want to remove it ?

[amrutadotorg]

Hi, thank you. I did know about the css trick. I thought that having two hero components on the page the only way was to create a custom component.

The default behavior for loading a video stays the same. There’s just an option to lazy load the video. That’s all.

[lovasoa]

Okay, that's fine by me. Do you want to make a PR?

[amrutadotorg]

Hi,

With pleasure. There’s no pressure from my side; I just want others to enjoy using the SQLPage project as much as I do.

Regarding the PR, if I understand you correctly, we only need to implement the lazy load part?

[lovasoa]

Yes, just the poster, with the matching change to the documentation

[amrutadotorg]

the poster property was added to the hero component

[lovasoa]

If you still need it, you can open a new issue about the reverse attribute

[amrutadotorg]

Thank you. The css trick is fine.

[lovasoa]

Actually, I'm realising this could be achieved without additional css, with just a flex-row-reverse class added to the <header> in shell.handlebars. I think having an attribute accessible in sql for that would be nice.

[amrutadotorg]

that's awesome!