Gateway Theme Header Image
-
I cant get my image to show as large as the one in the live demo. The image in the live demo is large but when I activate the home page,it is more of a strip
The blog I need help with is: (visible only to logged in users)
-
Hi,
The large image at the top of the front page of the Gateway demo is a featured image set on the static front page with the homepage template assigned. See the Homepage Template section of the Gateway theme guide, where it says:
2. If you wish, assign the page a Featured Image to appear as a background to the header. If no Featured Image is assigned, the Custom Header Image will be used instead.
and see also the following relevant support pages:
-
Hi musicdoc, I followed all the steps in the Gateway guide and it does not seem to work for me. I created a new page, set it as Homepage under options and made it static etc but the image stayed shrunken
-
Setting a static page as the front page, and assigning the homepage template to that page, are two important steps that you’ve successfully taken. What you’re missing is a featured image. The site header doesn’t expand when it’s on a static front page. It displays at the same size that it does on other pages, as well as on single posts and archives pages. The Gateway demo front page has a featured image set. The featured image is different from the site header image. See the Featured Images support page.
-
Another possible problem would be if you have a featured image set on the static front page, but “Display on pages” is unchecked at Customize > Content Options > Featured Images.
-
Hi musicdoc1, I have a featured image on my homepage and have “Display on Pages” checked. The image on the homepage is still the same size
-
Hey 77orchids!
Looks like you and musicdoc1 have gotten the home page set up perfectly – static page, template, and featured image!
The height of that section will be controlled by the amount of text that’s displayed there.
If you click on My Site > Customize (next to Themes), you can open the Theme Options section.
Inside Theme Options, you’ll see the Homepage Template options.
Fill in the Hero Title and Hero Content to add some text to the top of your homepage, which will also make that section taller and display more of the image.
Let us know how it goes!
-
Hi chad1008, THANK YOU! That did it for me! I just googled some basic html processes for adding spaces and line breaks and just like that I’m a coder! j/k no but thank you so much!
Thank you also to musicdoc1! -
Hi 77orchids,
You’re very welcome! Love the header…except for one minor thing. The definition below the title defines the word “serendipity.” The definition of a “serendipitist” could be “a person with an aptitude for making desirable discoveries by accident.”
-
Hi musicdoc1,
Great point! I just edited that so it makes more sense. I just tried changing my custom header image (on the other pages, not homepage) and that’s giving me some trouble too hehe I am using the recommended dimensions of 2560 x 640 and when i load the header, the full image does not show, it is cut off. Any tips? -
-
You’re welcome.
when i load the header, the full image does not show, it is cut off
The ratio of 2560 to 640 is 4:1. It’s long and thin, or wide and short. The file image is scaled, but it looks like that ratio holds. Compare your header image on the pages “About” and “Contact” on your site with the header on the pages “Templates,” “Styles,” “Images,” and “Contact” on the Gateway demo. They appear to be the same size, with the same width to height ratio.
-
-
Correction and amendment:
File images used for the header image on the Gateway theme are not only scaled, but also cropped, even if the original images are precisely of the recommended 4:1 ratio width to height dimensions. I find the ratio of the header images on the demo, on your site, and on a test site of my own to have closer to a 5.4:1 width to height ratio.
Secondly, on many themes a header cropping tool is available that allows you to crop the file images you load to create the header images, or to skip cropping. Such a tool is present with the Gateway theme, but it doesn’t work as one would expect. The odd thing I found was that the Gateway header image cropping tool appears to be allowing you to either skip cropping or crop the full size image as desired, but the changes do not hold when they are saved. Every attempt I made resulted in an image with dimensions of approximately 1262 x 235 pixels (~5.37:1 ratio), the same size as the header image in the demo, and on your site.
-
I ran some similar tests to musicdoc1 with similar results – I’ll need to take a look at the currently recommended header size for Gateway :)
when i load the header, the full image does not show, it is cut off
That will happen with a header image like Gateway’s. It’s built to serve as a background to your site title, so it always covers the header area.
The challenge there is that as the screen becomes narrower, the header becomes narrower – but the height remains the same. So the aspect ratio isn’t constant.
That means we need an image that has enough extra space in it to expand to the various ratios the theme will encounter on your visitor’s devices.
I’d recommend going with an image thats around 2000px by 1100 – that’s similar to the dimensions used in the Gateway demo site‘s header image.
If you open the page I’ve linked to, you can see what I mean by making your browser window wider/narrower. As the screen gets narrower, the aspect ratio decreases, so you get more and more of the city, and eventually you see the mountains in the background as well.
-
Hi musicdoc1 & chad1008,
so I tried changing the image size to 2000×1100 and it still gets cut off. Then I opened a different browser with the Gateway theme sample header (included in the customizer) on it and right-clicked to inspect the size. It looks like they are actually 1227.73 x 237.97 so I tried that size as well but no luck. At least we’ve learned the actual aspect ratio is 5.1:1
I’ve left my custom header up so you can see that the whole image does not appear. I wonder if it has to do with the logo on the Gateway theme header.. -
At least we’ve learned the actual aspect ratio is 5.1:1
As chad1008 indicates above, both the aspect ratio and the portion of the file image displayed is dependent upon the screen dimensions and browser settings of the visitor. In his example, keeping the height of the screen constant while narrowing the width (I don’t know how to duplicate this!), the height of the header remains constant while the width narrows. However, chad1008 also notes that the change in aspect ratio results in a larger percentage of the image being displayed.
My tests, using zoom on a Firefox browser, had an opposite effect regarding the dimensions, but a similar result regarding the portion of the image displayed. When zooming in, the width of the header image remains constant as the height grows with each zoom click. The end result, however, is again that a greater percentage of the image is displayed.
On my desktop PC, with FF at normal zoom settings, the ratio is 5.37:1. After four zoom clicks in the ratio is 3.54:1, and a greater portion of the file image is displayed.
-
@musicdoc1
hmm I just tried viewing the header on my ipad (Safari) and more of the image is displayed, about 80% of it to be precise! So you’re right about the aspect changing with the width of the screen. I’m using FF at 100% as well..
Gateway is beautiful but is complicated to duplicate the demo lol It would be great if all these tips could be displayed on the demo as a “Tips page”. I’ll keep playing around with it and please let me know if you find something that works -
It sounds like you’re on the right track @77orchids :)
Because of the varying aspect ratio, you’ll almost never see the entire image – except in rare cases where your device’s screen width produces a ratio that exactly matches the image dimensions – as other devices load the page there will be parts that get cut off when the theme adjusts to the screen size.
This type of background style header image works best with images like the one on the gateway demo – they’re a background image that works even it isn’t fully displayed.
Another trick is to use an image where the focal point or most important item is in the center, and not extending all the way to the side(s) or top/bottom.
That way, when you lose some of the edges, you’re less likely the part of the image you wanted to see.
- The topic ‘Gateway Theme Header Image’ is closed to new replies.
WordPress.com Forums 