Custom Outline for Blog Media image display

[blackyzero]

Hi everyone,

I am using Grav and Gantry, i created a Outline with Right sidebar, then assign it for blog page.
The point is, i want Page Media (image or video) can show as header image instead of showing in blog header content as below.

1. How could i show blog Page Media as in Header particle? applied for all blog pages.

2. In case, i still want to keep the blog Page Media as part of blog content, How could i align the image and the sidebar to make both of them on same line.

Thank you.

[paulhibbitts]

Hi @blackyzero, not sure about #2, but for #1 are you trying to do something like this? http://demo.hibbittsdesign.org/grav-eportfolio-blog/

[blackyzero]

Hi @paulhibbitts

Yeah, that's exactly what i want for 2)
The image will display on top of the blog title on blog list page and individual page.
Please show me how to do this.

For 1) i need to align the image and the side bar following the top of right sidebar
This appear in individual blog page.

Thank you.

[blackyzero]

i could answer 2), this is feature in Page "Blog Item" section and Header image.
Is it necessary to set "Summary Image File" option, cause i still see the blog header image with/without it.

Regard to 1), i look into your site, and it's exactly the one i need to customize as below, align header blog image and the search box in right sidebar, as below:

[paulhibbitts]

So for that skeleton (which you can download and access the repo at https://github.com/hibbitts-design/grav-skeleton-eportfolio-blog) I've added some custom Twig and a page folder to hold the header image. Please note that the header image is site wide though - will that work for you?

I am hoping to get this eventually done as a Particle, but in the meantime I've used a customized Engine Twig file (which is not recommended, but it works):

1. In your Helium theme folder, create the following series of sub-folders:
   /custom/engine/templates/

2. Create a file called page.html.twig and add the following (essentially the existing engine Twig file with a few lines added to display the image header):

{%- do gantry.debugger.startTimer('render', 'Rendering page') %}
{%- do gantry.theme.setLayout() -%}
{%- do gantry.theme.loadAtoms() -%}
{%- set segments = gantry.theme.segments() -%}

{%- set content %}
    {% if gantry.theme.hasContent() %}
        {% block content %}
        {% endblock %}
    {% endif %}
{% endset -%}

{%- set offcanvas = null -%}
{%- for segment in segments if segment.type == 'offcanvas' %}
    {%- set offcanvas = segment -%}
{% endfor -%}

{%- set page_offcanvas %}
    {% block page_offcanvas %}
    {# insert optional header image above menubar - hibbittsdesign.org #}
    {% set background_image = pages.find('/headerimage').media.images|first %}
    {% if background_image %}
        <div class="myheader" style="background-image: url({{ background_image.url }});"></div>
    {% endif %}
{% if offcanvas %}
            {% include '@nucleus/layout/' ~ offcanvas.type ~ '.html.twig' with { 'segment': offcanvas } -%}
        {% endif %}
    {% endblock %}
{% endset -%}

{%- set page_offcanvas = page_offcanvas|trim ?: '' %}
{%- set offcanvas_position = page_offcanvas ? offcanvas.attributes.position|default('g-offcanvas-left') : '' -%}

{%- set page_layout %}
    {% block page_layout %}
    {% for segment in segments if segment.type != 'offcanvas' %}
        {% include '@nucleus/layout/' ~ segment.type ~ '.html.twig' with { 'segments': segment.children } %}
    {% endfor %}
    {% endblock %}
{% endset -%}

{%- set page_top %}
    {% block page_top %}
    {% endblock %}
    {{ gantry.document.getHtml('top')|join("\n    ")|raw }}
{% endset -%}

{%- set page_bottom %}
    {% block page_bottom %}
    {% endblock %}
    {{ gantry.document.getHtml('bottom')|join("\n    ")|raw }}
{% endset -%}

{%- set body_top %}
    {% block body_top %}
    {% endblock %}
    {{ gantry.document.getHtml('body_top')|join("\n    ")|raw }}
{% endset -%}

{%- set body_bottom %}
    {% block body_bottom %}
    {% endblock %}
    {{ gantry.document.getHtml('body_bottom')|join("\n    ")|raw }}
{% endset -%}

{# Head and footer needs to come last because of any of the above blocks may have CSS or JavaScript in them #}

{%- set page_head %}
    {% block page_head -%}
        {% include 'partials/page_head.html.twig' %}
    {%- endblock %}
{% endset -%}

{%- set page_footer %}
    {% block page_footer %}
        {% do gantry.platform.finalize() -%}
        {{ gantry.scripts('footer')|join("\n    ")|raw -}}
    {% endblock %}

    {{ gantry.debugger.render()|raw }}
{% endset -%}

{%- block page -%}
<!DOCTYPE {{ gantry.config.page.doctype|default('html')|raw }}>
<html{{ gantry.page.htmlAttributes|raw }}>
    {{ page_head|raw }}
    {% block page_body -%}
    <body{{ gantry.page.bodyAttributes({'class': [offcanvas_position, gantry.page.preset, 'g-style-' ~ gantry.theme.preset]})|raw }}>
        {{ gantry.config.page.body.body_top|raw }}
        {{ body_top|raw }}
      {{ page_offcanvas|raw }}
        <div id="g-page-surround">
            {% if page_offcanvas|trim %}
            <div class="g-offcanvas-hide g-offcanvas-toggle" data-offcanvas-toggle><i class="fa fa-fw fa-bars" aria-hidden="true"></i></div>
            {% endif %}
            {{ page_top|raw }}
            {{ page_layout|raw }}
            {{ page_bottom|raw }}
        </div>
        {{ body_bottom|raw }}
        <script type="text/javascript" src="{{ url('gantry-assets://js/main.js') }}"></script>
        {{ page_footer|raw }}
        {{ gantry.config.page.body.body_bottom|raw }}
    </body>
    {%- endblock %}

</html>
{% endblock -%}

3. Create a folder called headerimage and place the image you want to to use as your site header

4. In your Helium theme folder, create the following series of sub-folders:
   /custom/scss/templates/custom.scss

5. Add the following CSS to the custom.scss file:

.myheader {
  background-color: #464646;
  background-repeat:no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:center;
  width: auto;
  height: 230px;
}

// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {
  .myheader {
      height: 190px;
  }
}

// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {
  .myheader {
      height: 150px;
  }
    #g-offcanvas {
      margin-top: 150px;
  }
}

// typically max 30rem
@include breakpoint(small-mobile-range) {
  .myheader {
      height: 110px;
  }
    #g-offcanvas {
      margin-top: 110px;
  }
}

Please let me know if the above works for you, but remember it does use a non-recommended method (http://docs.gantry.org/gantry5/theme-development/theme-customization#override-pagehtmltwig-not-recommended).

[paulhibbitts]

An update: based on this discussion I've added initial support for page-level site header images - you can now simply include the headerimage folder within any page folder and it should then display that image.

You can grab the updated twig at https://github.com/hibbitts-design/grav-skeleton-eportfolio-blog/blob/master/themes/g5_hydrogen/custom/engine/templates/page.html.twig

[mahagr]

@paulhibbitts There's 4 positions in the document that you can be used to add html from atom or particle.

{% pageblock top %}
This text will be added to the top of the page before any content from layout.
{% endpageblock %}`

Options to play with are: body_top , top , bottom and body_bottom.

So it would be easier to just make an atom for this. :)

[paulhibbitts]

@mahagr That would be definitely preferable 🙂 So far I was unable to find a way to do that and insert the image before the menubar... I will try your suggestion and see what I get, thanks very much!

[paulhibbitts]

Amazing, thanks again @mahagr for pointing me to using pageblock👍

@blackyzero , site and page-level header images are now available as a Atom at https://github.com/hibbitts-design/grav-gantry-atom-header-image

Please let me know if this works for you.

[mahagr]

It's really atom, not particle, lol. :)

But yeah, makes it really easy to do almost whatever you want, doesn't it?

[paulhibbitts]

LOL, yes I should call Atoms... 'Atoms' Thanks again, I am finding Gantry more and more amazing as I get into a bit more.

[blackyzero]

thanks a lot @paulhibbitts and @mahagr

I tried to do as your instruction, but still couldn't get it works.

Under user/themes/g5_helium/custom/particles/ folder,

-rw-r--r-- 1 user staff 753B May 25 13:11 headerimage.html.twig
-rw-r--r-- 1 user staff 257B May 25 13:12 headerimage.yaml

Under root level, create folder headerimage/, same level as user/ and index.php file

-rw-r--r-- 1 user staff 60K May 25 13:15 biofruit_press_globalgap_certification_6a.jpeg
-rw-r--r-- 1 user staff 60B May 25 13:15 default.md

Still couldn't see that image.
Then, i also tried to add Headerimage atom as below:

Still not work too.
Please advise how to get it works.

Thanks so much!

[blackyzero]

After giving some tries, the header image still doesn't show, from inspect window i can see the related code for header image, and the image is also visible if browsing to image URL
I see the different css is applied for background-image, it seems custom css is not complied properly, continue finding ....

[blackyzero]

finally, i got it works, after making CSS change from Base Outline. I think this triggered to recompile the custom.scss file.
Thanks @paulhibbitts and @mahagr a lot !

i have another question, how could i turn off the header image on specific pages like a filter display for header image?

[paulhibbitts]

Glad you got it going @blackyzero . I will add a note on the Atom re: Gantry cache/CSS recompile. BTW, are you working in Gantry 'Development' mode?

Re: Turn off image header... hmmm... the only way to do that is to remove the "headerimage" folder from the root of the site and then only within the pages you want a header to be displayed place the folder (or symlink I guess?). Right now there is no way to set a page to not display the image if there is a top-level (i.e. root) image available. Will that work-around do for now?

[blackyzero]

No, i am using Production mode.
I see. I think about creating a custom Outline, and assign for pages/posts which should display headerimage.

Thanks again @paulhibbitts

[mahagr]

Production mode saves some CPU time by not looking at changes in the filesystem. This is why your changes didn't show up (without clearing cache or manual recompile).

[blackyzero]

thank you for that info.