[Resolved] Wordsmith Hero Image Size

Home Forums Support [Resolved] Wordsmith Hero Image Size

Home Forums Support Wordsmith Hero Image Size

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2345997
    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!

    #2346039
    Ying
    Staff
    Customer Support

    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!

    #2346097
    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?

    #2346480
    David
    Staff
    Customer Support

    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 ?

    #2346690
    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?

    #2346693
    David
    Staff
    Customer Support

    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:

    https://www.screencast.com/t/xwyR6HTd

    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

    #2346695
    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!

    #2361727
    David
    Staff
    Customer Support

    You’re welcome

    #2361750
    John

    Resolved – thanks again!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.