Turn off Hero section on post
-
April 10, 2022 at 3:01 pm #7235
[anonymous]
I have on the first page a image 100% full screen on the individual post but no images.
How can I prevent the hero area from remaining unnecessarily?
I want the post to appear directly at the top of the screen.
Theme Simple
April 11, 2022 at 12:50 pm #7237[anonymous]
I have now simply deleted in the /input/themes/simple post.hbs the part:
{{#featuredImage}} {{#if url}} <figure class="hero__image hero__image--overlay"> <img src="{{url}}" {{#if @config.site.responsiveImages}} {{responsiveImageAttributes 'featuredImage' srcset.post sizes.post}} {{/if}} {{ lazyload "eager" }} height="{{height}}" width="{{width}}" alt="{{alt}}"> {{#checkIfAny caption credits}} <figcaption> {{caption}} {{credits}} </figcaption> {{/checkIfAny}} </figure> {{else}} {{#checkIfAll @config.custom.uploadHero @config.custom.displayHeroImage}} <figure class="hero__image hero__image--overlay"> <img src="{{@config.custom.uploadHero}}" {{#if @config.site.responsiveImages}} {{responsiveImageAttributes @config.custom.uploadHero}} {{/if}} {{ lazyload "eager" }} alt="{{@config.custom.uploadHeroAlt}}"> {{#if @config.custom.uploadHeroCaption}} <figcaption> {{@config.custom.uploadHeroCaption}} </figcaption> {{/if}} </figure> {{/checkIfAll}} {{/if}} {{/featuredImage}} <header class="hero__content">{{#if @config.post.displayDate}}</header><time datetime="{{date createdAt 'YYYY-MM-DDTHH:mm'}}"> {{#checkIf @config.custom.formatDate '!=' 'custom'}} {{date createdAt @config.custom.formatDate}} {{else}} {{date createdAt @config.custom.formatDateCustom}} {{/checkIf}} </time>{{/if}} <h1> {{title}} </h1> {{#if @config.post.displayAuthor}}{{#author}} {{#if avatar}} <img src="{{avatarImage.url}}" {{ lazyload "eager" }} height="{{avatarImage.height}}" width="{{avatarImage.width}}" class="post__author-thumb" alt="{{avatarImage.alt}}"> {{/if}} {{name}} {{/author}}{{/if}}and inserted some <br/> for the distance. This is for sure a dirty way. Can someone please tell me a clean solution?
April 11, 2022 at 1:40 pm #7238[anonymous]
[anonymous] wrote:This is for sure a dirty way. Can someone please tell me a clean solution?
I’m not an expert in Publii yet, but there are several ways to approach this that I can think of. The way you did it is definitely the “dirty” way and since you modified the theme directly, it won’t “stick” the next time you update the theme. Publii periodically releases updates to the themes themselves, so your changes will be overwritten when you update. Of course, you could always modify the updated theme files directly again, it’s sort of the brute force method, but there is a better way. Here are other options I’ve stumbled across in my own learning curve with Publii:
- Use overrides — instructions can be found https://getpublii.com/dev/theme-overrides/ and https://getpublii.com/docs/overriding-publii-theme.html — and lots of threads in the forum — it’s basically the same approach you did, but it is protected against future updates to your main theme files in an overrides folder, which allow you to manage your custom code much better. Definitely the way I would do it.
- Inside Publii itself there is also a custom CSS and custom HTML option, which *might* help you accomplish something similar, depending on how you go about it with styles, etc… https://getpublii.com/docs/tools.html — the custom CSS/HTML is helpful, but not as powerful as overrides.
- Also, some themes have additional customizations of what can appear on the homepage — so there might be some other theme that would suit your needs a little better.
For options 1 and 2, you’d need to know your way around CSS and HTML of course, and there are probably many ways to go about what you want accomplish, either with editing styles or the way you did it with a more “dirty” but effective HTML approach. I’m guessing there’s something more elegant you can do with styles, but however you go about doing it, overrides are likely the best way to get there.
Hope that helps a little.
April 15, 2022 at 3:03 pm #7280[anonymous]
jammpub is spot on! Creating an override is the way to go.
You could play around with the handlebars code in post.hbs so that it only generates that div if there’s an image. I believe it would look something like {{#if featuredImage}}, followed by the code you had deleted, and then {{/if}} at the end.
If you want to get even more complex, you could create a custom post template that could be selected everytime you create a new post, or use the Post Config options to add a custom option to hide the image.
See:
https://getpublii.com/dev/post-config-options/
https://getpublii.com/dev/how-to-create-custom-templates/
I’d also try another theme if that’s simpler. I use Mercury all the time, and if I don’t have a cover image, it removes the space.