Grav + gantry. eportfolio skeleton. How to remove/replace coffee cup image?

Help please?

I am new to grav but have experience with gantry 4 in joomla.

I have spent more than a day searching for how the coffee cup image gets to be inserted ahead of the gantry header in hydroge (and above the navigation in helium). There is nothing there in the layout! There is no showcase.

I can find no reference in any user code or user setup. I do not see the image in gantry and it seems to be above the gantry header.

I have replaced the home page with my own but the coffee cup shows up on all pages.

How can I remove or replace it?

Thanks
Norma

Hello Norma,

Can you provide us with a screenshot of what you are speaking about? Do you mean the mobile menu icon?

Kind regards,

Reggie

If I'm not mistaken, this is @paulhibbitts ePortfolio Skeleton. I don't see a coffee cup in the demo, could you - as simmonsr requests - specify where this is?

Hello Reggie

Thank you so much for responding.

I think I have finally found the problem

My pages look like this

And the offending image is the one( in the page “header image”) with a long name that shows a coffee cup. (I did not notice that it was there.)

I have learned a lot while looking for this!

I have just removed the headerimage page and I am back in business until I find the next obstacle.

But I still do not understand why that page would display outside the template and on every page? It seems that “headerimage” is a special name in grav that displays an image ahead of the template? Perhaps this should be somewhere in the documentation? Are there more special page names?

Anyway thanks and I am happy to be on my way with grav. So far it is way easier than jumping around between articles and menus and templates and modules, so I am hoping to convert my sites to it.

Norma

<img src='//cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex036/uploads/getgrav/original/1X/c2163a4e18ed82822676d36b5dbc020f797f7aea.png' width='320' height='222'>

Interesting! If you look at https://getgrav.org/downloads/skeletons showing all the skeletons, the coffee cup is there. But if you go inside and click on "demo" it is not there. And if you download and run the skeleton it is there because of the user page called "headerimage"! Indeed it is not in the demo.

Hi @normawhite, @OleVik is correct that I am the author of the skeleton ePortfolio Blog.

I need to document this issue🙂 But in the meanwhile, to remove the header image totally, go to Admin -> Gantry -> Page Settings, scroll down to the bottom of the page and remove the Atom called Header Image

I think you could also delete the image in the folder HeaderImage and that should have the same result (after clearing caches).

I was adjusting the demo recently and forgot to restore the HeaderImage myself!

BTW, I've made the HeaderImage a separate Particle that other can use in their own Gantry sites: http://learn.hibbittsdesign.org/grav-gantry5-particles/header-image

Please let me know if the above helps.

Thanks Paul

This is a huge learning experience as I have only used Gantry 4 and not yet got my head around atoms and particles.

Removing the whole HeaderImage folder works, but I was wanting to put my own header so I can your Atom as a start.

But I could not find the “headerimage” in the layout - how does it know to display at the top? Is that in the twig file?

Here is the site I am trying to convert from Joomla to grav http://www.nhbpeterborough.com/ http://www.nhbpeterborough.com/ - not a very complex site. The header is a logo picture, custom HTML - red text, and a link. I already have the Ensembles menu implemented.

Thanks
Norma

Hi Norma,

To intercept the rendering of the page needed to inject a header image before anything else, I ended up needing to define the "Particle" as an Atom, and Atoms are actually defined on the "Page Settings" tab (not "Layout"). There is Twig within that Atom that injects display of the HeaderImage before the rest of the page is rendered.

There is a lot to learn about Gantry 5🙂 It's very powerful and flexible, but I've only scratched the surface myself. If this is the first time you are using Grav I'd honestly suggest considering working with a Grav-only theme (which also as a Skeleton to get going faster with), and then once you are pretty comfortable with Grav then explore what Gantry can do. This is at least the approach I took...

Cheers,
Paul

Thanks. I did start with the grav only and got some pages working, but found I needed Gantry to get dropdown menus working. Yes, there is lots to learn about Gantry.
Norma

Hi Paul

Yes, I did figure out how you injected the picture ahead of everything else and I learned a lot that will be useful in time.

I also stumbled on another (for me simpler) way of doing the same thing. I extended the navigation bucket (with plus), then moved logo and menu into it. For the pages the way I wanted them, I dragged in a logo and two custom HTML particles for my stuff. You could put your picture in there.

Your demo does not include an example of “inject page”. I see the code is there to do it, but I failed to figure out what to do. Could you please show me how?

Thanks
Norma

Thanks for sharing another approach to adding a header image!

If you look at the Layout tab (in Gantry) you will see there is a default "Inject Page" Particle in the right sidebar. This is configured for the "Sidebar" page, so if you add any content to that page it will automatically display.

Each "Inject Page" Particle can contain the path of one Grav page - as shown here:
http://learn.hibbittsdesign.org/grav-gantry5-particles/inject-page

Thanks Paul

I see now why you got the header image using injectPage! (as an illustration)

But I cannot get the injectPage to work in the sidebar.
I took a new copy of portfolio to be sure that I had not messed with anything.
In the pages/sidebar folder, I added a file my sidebar.md

Contents of the file are

Hi Norma,

Your message got cut-off, but my hunch is that the .md file in the sidebar folder should be called default.md. Downloading a fresh ePortfolio Blog skeleton there should also be an already provided file like that in the sidebar folder - you could also try pasting your own Markdown into that .md file.

Let me know if you can get that working.

Cheers,
Paul

That works perfectly! Thanks. With that I have almost everything I need for my site (I think).

Code in sidebar.md

<img src='//cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex036/uploads/getgrav/original/1X/20c56940d6a00d87a59494e53e5a31348d766884.png' width='241' height='285'>

Excellent! BTW, the I am working on a new Grav-only (Gantry not required) theme called "Antimatter Open Publishing" which (you guessed it) will be based on the Antimatter theme and brings with it almost all the features of ePortfolio Blog.

Demo:
http://demo.hibbittsdesign.org/grav-open-publishing/

Repo:
https://github.com/hibbitts-design/grav-theme-antimatter-open-publishing

A skeleton for this is also in the works.
Paul

That will be great as the overhead of gantry setup is heavy, especially for anyone who does not know gantry5.
Norma

Hi Paul

Actually, not quite there yet. Unfortunately, the sidebar displays on every page.

I need to have a sidebar probably only on the home page, and maybe a different sidebar on one other.

I thought that moving the sidebar page into a special page might do the trick but it did not.

<img src='//cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex036/uploads/getgrav/original/1X/587c8d631c0e2076d460b49ce7f5060cb0e0e5ca.png' width='241' height='250'>

For elements to be only on certain pages in Gantry you need to create multiple outlines, and then assign these outlines to the pages you want to use them.

So, you can go to the Outlines section in Gantry and duplicate the base outline. Once that outline is created (make sure it is the selected Outline) then go to the Assignments tab and assign the pages you want to use that Outline. Finally, edit the Layout of that Outline and I think you should then be able to modify the page (I'd make a copy of the provided example sidebar page and then rename) that the Inject Particle uses (just for that outline). You may need to turn off an Inheritance setting... not sure.

Here are the related Gantry docs:
http://docs.gantry.org/gantry5/configure/outlines
http://docs.gantry.org/gantry5/configure/assignments

Hopefully, I have not missed a step🙂

Back to eportfolio!
I noticed that some of my pages were being truncated (scrollbar not long enough).
So I went back to the original eportfolio again. It too cuts off the bottom of Setup Guide in a large window. Of course you get the effect on all pages if you shrink the window width.

Hmm... not sure what the issue might be.

[UPDATE:] I can now see it too though. Let me look into it.

Thanks,
Paul