[Resolved] Wordsmith Hero Image Size

[John]

Does anyone know the exact dimensions for the hero image in Wordsmith? Not what will work, but the exact size. I’m trying to keep any issues I might have at making the theme my own to a minimum. Granted, I might be asking this question out of ignorance about how it really works, but I’m trying ; ) Thanks for any and all input!

[Ying]

Does anyone know the exact dimensions for the hero image in Wordsmith?

Which hero image are you referring to?

If you are talking about the home page hero, it is the full width of your screen, so there’s no exact dimension, it varies by screen size.

Let me know!

[John]

Thanks for the reply Ying! I’m referring to the hero image for the home page. Is there a recommended size so it renders well on all screens?

So, if I wanted to make it 2560×584 so it would be thinner, would that be ok?

[David]

Hi there,

the original hero image is 1920 x 1280px – but that is oversized for what may be required.

Question – will you wanting the background to be responsive so 100% if the image is visible no matter the screen size ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Yes, EXACTLY! I’ve had trouble with that and saw a post reply you made.
reply #2332987

you need to make the Page Heros aspect ratio match that of your original image.

1. Calculate your original images aspect ratio: Height / Width * 100 = Aspect Ration %.
Your example URL is: 1280 / 1920 * 100 = 67%.

2. Now you can add this CSS to make the page-hero match that ratio:

.page-hero {
min-height: 67vw;
}
This will make it so 100% of the image is shown on any screensize.
——–
Questions:
1) where do I insert the CSS?
2) Can I constrain a hero image to only be…say 300 pixels high or is there a point where it is no longer a hero image?

[David]

you can select the Container Block that the background image is assigned to and set its Spacing > Minimum Height to the aspect ratio eg. 67 vw – see here:

The thing is with restricting heights of the container is that the content inside it, eg the title may have different needs, so i would try the above method first, and then see if we need to restrict its max-height

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Ok, sounds good. I’ll be working on it today and will either close the ticket or ask more questions.
Thank you for your quick and detailed response!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Resolved – thanks again!

[Author]

Posts