[typhoon] Modular page does not show hero image

[setuix]

I set up a modular page to be used with a gallery but the formatting on the page looks weird. The hero image won't show as well.

How can I make the modular page show exactly the same as like a Blog page with sidebar and hero image?

[rhukster]

The problem is that Blog page is specially built to show a hero + sidebar + list of blog items (https://demo.getgrav.org/typhoon/blog/). You can see this in the templates/blog.html.twig file. However, this is not a modular parent page type that is intended for supporting modular subpages like the "onepage" demo shows (https://demo.getgrav.org/typhoon/onepage/).

To do what you want, will require a bit of manual work. You'll need to start with a copy of the blog page and basically replace the bit that shows the blog posts with modular template bits (the code that loops through all the modular subpages). Here's a real quick example that has NOT been tested:

templates/modular-sidebar.html.twig

{% extends 'partials/base.html.twig' %}
{% set blog = theme_var('root_of_blog', null, null, true)|e %}
{% set collection = page.collection() %}
{% set show_sidebar = theme_var('show_sidebar', true)|e %}
{% set show_pagination = theme_var('show_pagination', true)|e %}
{% set show_breadcrumbs = theme_var('show_breadcrumbs', true)|e %}

{% block body %}
  <section class="flex-1 bg-gray-100 dark:bg-gray-800">
    <div class="">
      {{ block('content_surround') }}
    </div>
  </section>
{% endblock %}

{% block content_wrapper %}
  <div class="{{ hero_display ? 'pt-0' : 'pt-16' }}">
  {% if show_breadcrumbs and config.plugins.breadcrumbs.enabled %}
    {% include 'partials/breadcrumbs.html.twig' %}
  {% endif %}

  {% embed 'partials/layout.html.twig' %}

    {% block items %}

      {# This is commented out as it's for displaying the blog posts #}
      {#
      <div class="flex flex-wrap -mx-4">
        {% for post in collection %}
          {% include "partials/post-item.html.twig" with {page: post} %}
        {% endfor %}
      </div>
      {% if config.plugins.pagination.enabled %}
        <div class="flex justify-center w-full p-6 mx-auto">
          {% include 'partials/pagination.html.twig' with {base_url: blog.url, pagination: collection.params.pagination} %}
        </div>
      {% endif %}
      #}

      {# Add the modular stuff instead %}
      {% for module in page.collection()|filter(module => module.template != 'modular/hero') %}
        {{ module.content|raw }}
      {% endfor %}

    {% endblock %}

    {% block sidebar %}
      {% include 'partials/sidebar.html.twig' %}
    {% endblock %}

  {% endembed %}
  </div>
{% endblock %}

A couple of things to note. This doesnt' use a modular hero, it uses a standard hero section as defined like the blog.html.twig page. And it uses a modular content collection like a regular modular page. So in your modular-gallery.md file that you will need to create it should have this in in the frontmatter to load the modular subpages:

content:
    items: self@.modular

and something like this from the blog page to define the stuff in the hero:

hero:
    image: reuben-teo-fUZWpaUknyI-unsplash.jpg
    overlay_direction: bottom
    overlay_gradient:
        - '0.8'
        - '0.1'
    subtitle: 'The ramblings of a rambler'
    title:
        text: 'A Gravtastic Blog'
    content: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua ad ad non deserunt sunt.'
    image_alignment: object-center
    height: 50vh

Of course to be able to do this via the admin you will also need to create a bluerprints/modular-gallery.yaml file to define the fields. The hero stuff is defined in default template, but the header.content.items should be defined here:

blueprints/modular-gallery.yaml

title: Blog
extends@: default

form:
  fields:
    tabs:
      fields:
        content:
          fields:
            content:
              unset@: true
            header.media_order:
              ordering@: 99

            header.content.items:
              type: textarea
              yaml: true
              label: Modular Collection
              default: 'self@.modular'
              validate:
                required: true
                type: yaml