[typhoon] header graphic switches sizes on blog postings

[cmwg71]

Hi folks,

if you look at https://grams-it.com you can see the issue. The header graphic is fine on home and Blog but as soon as i drill down into a blog posting, it switches to a different view (zoomed in). The graphic is still the same, just zoomed in. Is this a setting within Grav / Theme or is this hardcoded? Any way to change it?

Thanks for the help!

[rhukster]

By default, the hero height is actually dynamic based on the hero content.. You can override the hero.padding to adjust the size 'around' the content of the hero.

I am going to add an optional hero.height setting which will also take tailwind classes and allow for a fixed hero height, there could be responsive implications with this however.

[cmwg71]

By default, the hero height is actually dynamic based on the hero content.. You can override the hero.padding to adjust the size 'around' the content of the hero.

thanks for the reply, which actually went over my head :) I know of the hero settings within a blog post or new page that i create, but have never used these.

do i need to add the hero.padding (and in what format with which settings) to every page or is there a central overriding setting i should make?

[cmwg71]

i found hero defaults (pt-32 md:pt-40 lg:pt-48 xl:pt-56 pb-16 md:pb-20 lg:pb-24 xl:pb-32) but no idea what i would need to change

[cmwg71]

By default, the hero height is actually dynamic based on the hero content.. You can override the hero.padding to adjust the size 'around' the content of the hero.

rhukster pls advise how i would actually do that.

[rhukster]

i would get this running locally first, as you will need to install the node modules to recompile the CSS and include any changes you make: https://getgrav.org/premium/typhoon/docs#installing-npm-to-compile-css

Once you have things so that Tailwind can pick up any CSS changes you make and recompile them into the compiled and optimzed CSS, you can play with the padding sizes.. Here's a quick intro on Tailwind padding classes: https://tailwindcss.com/docs/padding

The thing to relize is that Tailwind is a mobile-frist framework. So th ept-32 actualy is the default for mobile on up.. that translates into "padding top of 32 tailwind units", which converts into something like padding-top: 8rem. the md:pt-40 is for "medium" breakpoint on up, and that means for medium size screens on up, set the padding top to 40 tailwind units", and that becomespadding-top: 10rem`, etc.

So in reality if you want to make the padding bigger, just increase those sizes across the board.

NOTE: Tailwind size and padding units work in multipls of 4 generally speaking.. So try adding 8 to all of them, something like:

pt-40 md:pt-48 lg:pt-56 xl:pt-64 pb-24 md:pb-28 lg:pb-32 xl:pb-40

Again, you will need to make sure you recompile the CSS to pick up these changes.

[cmwg71]

correct me pls if i am wrong, but padding around the header text (ie. the title of a page, with author and date) should not actually change the background image of the header itself? At least if the header text gets longer (long titles) it shouldn´t actually zoom into the background image.

it is strange behaviour for me, since when i use your settings above, which has larger padding, the actually header (including background image) gets far smaller.

sorry not sure if i am explaining the correctly, i have added two pictures,

the original settings

your settings

[rhukster]

yes this is expected... the image is set to fill the space as best it can depending on the width and height. If you make the browser narrow you will notice the background image changing size also. This is to prevent unwanted tiling, or blank spots in the background. You might want to consider a more 'pattern-based' background for the sub-pages and keep the detailed banner for the homepage? Just an idea.

[cmwg71]

okay thanks for the info. this can be closed.