Home Forums Weaver Xtreme Theme Header Image Replacement HTML (per page)

Topic Resolution: Resolved

This topic contains 10 replies, has 2 voices, and was last updated by  havacoke 3 weeks, 4 days ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #57365

    havacoke
    Participant

    Hi there,

    I just installed Weaver Xtreme Plus so that I can display a different header image on each page. I can get the image to display on the appropriate page but it’s displaying way too large.

    So far, I’ve added the HTML to the Header Image Replacement field on the Xtreme Plus options section and included height and width in the HTML but no matter what values I use, the image size doesn’t change.

    Is there anything else I need to do to make this work?  Thank you.

    #57372

    scrambler
    Moderator

    Please paste the HTML you have used here (using the preformatted paragraph style) and give us a link to the page where you put the Header image HTML replacement.

    FYI, you can change the header image on any page using the Page Featured image, and selecting header image replacement in the feature image drop down list found in the Page option layout tab.

    #57382

    havacoke
    Participant

    Thanks for the resonse.

    The HTML is: Bus Photo

    The link is: https://jimmv.org/testkenw/about/

    I did try the Page Featured image method you mentioned but it does the same thing.

     

     

    #57383

    havacoke
    Participant

    Rats. Here’s the HTML:

    Bus Photo

    #57385

    havacoke
    Participant

    Darn, sorry for the multiple submissions. Thought my second attempt would work by using the “paste as text” option. Not sure how to paste using preformatted paragraph style.

    #57388

    scrambler
    Moderator

    0- To paste HTML, you paste it, then select it and select preformatted in the paragraph format toolbar

    1- Header image HTML replacement.
    Your HTML specifies to use the image at a width and height of 50, so sure it is small…

    change your HTML to the one below without the width and height

    <img src="https://jimmv.org/testkenw/wp-content/uploads/2018/09/20180529_154240.jpg" alt="Bus Photo" />

    3-Page Featured image method you mentioned but it does the same thing

    That makes no sense at all, so you may not have understood what I said.

    INSTEAD of using HTML, you can go to your page editing page. On the right, in the Featured Image box, you click “set Featured Image”, then select your image.

    Once the featured image has been selected, you go to the page option Layout tab, and in the Featured image dropdown list, you select Header Image replacement.

    Note: You image has a very vertical / Portrait format, so it will make a very High banner…

    #57390

    havacoke
    Participant

    I tried what you suggested but there was no change in the displayed image for that page. I used 50 to see if the image size would change at all, however, it doesn’t matter what values I use, the displayed image stays the same size. This image is 780×1040.

    For the Featured Image method, I tried that on a different page and image, exactly the way you described. The image for that page is only 400×300 but also displays as large as the one I’m using the Header Image Replacement HTML method. The link for that page is https://jimmv.org/testkenw/faq/

    Thanks again.

     

    #57391

    scrambler
    Moderator

    OK I misunderstood what you were saying.

    1- If you are using HTML and want to reduce the size of the image, you need to use CSS inline with the image like below

    <img src="https://jimmv.org/testkenw/wp-content/uploads/2018/09/20180529_154240.jpg" alt="Bus Photo" style="max-width:300px;height:auto;"/>

    2- If you are using the featured image method and you want the image to display at its actual size, use the option in Main Options > Header > Header Image > Use actual size.

    #57392

    havacoke
    Participant

    Ah, thanks very much, the CSS inline helps…kinda  🙂

    Is there an “easy” way to have a different header image displayed on each page and auto sized to the same size as the main header image on the home page using Header Image Replacement HTML (per page)?

     

    #57393

    scrambler
    Moderator

    The easiest would be to upload all the images at the same size 🙂

    I don’t think we are understanding each other though.

    Your site is set to be displayed full browser width, with some content limited to 1100px.

    So on your home page, your header image is displayed at full browser width. This is exactly what you had originally, so what do you mean when you say you want your other header image to be the same size?

    Are you referring to the height of the image?

    Because if so, then what exactly would you expect to happen. Your home page header image has a horizontal / landscape ratio with a resolution of 1032px by 326px.

    If your other images are more square, what would you expect should happen to give them the same rectangular ratio. Should they be cropped (top, bottom, both)? should they be squished ?….

    If you want all your header image to have the same ratio, then you should create them and upload them this way.

    And if you do not want your site to be full width, change the setting in Main options > Full Width > One step layout to traditional, and read the article below on controlling full width design.

    https://guide.weavertheme.com/full-width-design/

     

     

    #57394

    havacoke
    Participant

    Being relatively new at web design, HTML, CSS, themes, etc I was hoping for a simple magic checkbox and one that reads my mind  🙂

    Thanks so much for your patience and help.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.