Size for Banners


(Michael Kane) #1

Hi, I’m trying to create a website which has a responsive banner. I made the graphic at the recommended size of 2000 px (wide) by 1000 pixels high, with text in the middle. I placed this graphic in the “Banner” section on the “General” page under settings. I’m not using any custom CSS, except for Google fonts. The graphic works OK on the iPhone simulation, but on the desktop the text is covered up.

I can use the graphic as an image and not a banner, but then the modern effect is lost. I read the articles about the Reason theme not having a responsive banner (I’m not using this theme) but I would use any blank theme that works. The other articles address the issue of the banner not scaling for phone sizes, but I have the reverse issue.

Any ideas?


(Joe Martin) #2

Not much info!
May we know what you are using and see a link?


(Michael Kane) #3

I’ve uploaded the page to ok2legal.com.

I’m using RW 8.1.

Stacks 3.# (the update that came today).

The RWSkinz beta theme–it’s a blank, responsive theme.

Compared with Wil Woodward’s Old Book theme.

The site, which is one short page long, is comprised of 431(files) including all sorts of fonts never called for in composition. Where is all this weight coming from?


(Doug Bennett) #4

Well, first of all, you’re using a beta version of the theme. That might be why you’re having to upload “all sorts” of fonts". You should contact @willwood about that at his site.

You said weight are you talking the page weight a viewer of the page gets, or the upload size?
That page loads to a viewer at a total transferred size of 3.2mb. One single image, and not the banner but the tiny (displayed at 250px by 170px) image on the page is 2.4mb (2560px by 1746px).

You need to resize that image as it right now is about 75% of the page weight a visitor will get.


(Michael Kane) #5

By ‘weight’ I was referring to the 431 files uploaded to compose a simple webpage. The RWskinz was but one of the themes I used; all of them had problems and none addressed the banner issue in an easy fashion. I understand that Willwood has developed proprietary Stacks to use with it. I was trying to use RW’s built in functionality.

The Pure theme (I thought it was deprecated) seems to come closest.

Thank you very much for pointing out the issue with the floating image. I didn’t realize that it was at 300 dpi. That’s why it is so large.


(Michael Kane) #6
  1. Republishing all files now uploaded 22, instead of 431 files (!).
  2. The banner size image issue is more or less resolved using the (deprecated?) Pure theme. But there must be themes that:
    –obey RW’s internal banner settings; or
    –make it easy to change the supplied image.

Thoughts on no.2?


(Michael Kane) #7

No one? Bueller?


(Lisa Sandler) #8

I’m guessing no one has responded because your question is too broad. Pretty much any current theme should let you change banner images, if you know how to use Rapidweaver. Sometimes you might want to use different sized images for different screens. It’s really your choice for banner size, so there is no one answer to “obey RW’s internal banner settings”, as the theme is what usually allows you to set that.

Everyone has their favorite developers, but I started with @willwood 's Volcano theme: https://themeflood.com/volcano/ and switched to Foundation after 6 years of using Volcano. Now I am looking at Will’s RWSkins as well, but have not had time to play with it. If you ever had questions about Will’s themes or stacks, he is very responsive… just shoot him an email.


(Michael Kane) #9

As far as I can determine, the most reliable way to change the banner image for a theme like Volcano (and I would include Lander, Multi Xloom, Old Book, Reason, Shape, Voyager, etc. is OUTSIDE of Rapidweaver:

  1. Locate theme in Finder.
  2. Duplicate theme.
  3. Open theme, locate banner image.
  4. Delete or rename banner image.
  5. Substitute new image.
  6. Restart RW.

There should be a way to do this on the fly with RW and I was hoping version 8 had this functionality; apparently it does not.

Query: is there a way to change the banner image on a per-page basis (i.e., when the theme is not the Master style) for the Artful theme?


(Will Woodgate) #10

Wrong. That is possibly the hardest way to change banner images. And depending on how you are duplicating the theme, you might be causing some huge problems for yourself further down the line.

As you stated in post #1 the method to change a banner image to be used as a ‘master’ is to do so in the website general settings.

Now if you want to change a banner image on a page-by-page basis, simply flip-open the RapidWeaver Page Inspector (where you normally change the page directory name and browser title) and there is a similar box in the Page Settings to provide a banner image specifically for that single page.

Any image you supply as a banner should be saved in either JPG or PNG format (JPG is preferable, because you gain the smallest file size, versus quality). Images must always be 72 dpi and it is wise to scale them to an appropriate shape and size before importing them into RapidWeaver. In other words, don’t simply take 8MB RAW files straight from a digital camera and drop them directly into RW - you will be disappointed with the outcome! Much like many other web publishing platforms, edit and prepare your images before importing them.

The sizing shown for banner images is a broad recommendation only. In many themes, the header or banner area will automatically resize in height to fit your images. And themes will normally scale images down to fit smaller screen sizes - known as responsive behaviour.

It sounds like you are new to RapidWeaver. I would strongly urge you to take the time to follow some of the excellent video tutorials Realmac have published on their website that cover the basics. I am certain there are tutorials that cover what’s new in RW8 and topics like editing theme banner images. Most theme developers also provide their own user guides on their websites.


(Michael Kane) #11

Thank you very much for your answer.
I didn’t say this way was easy–it is clearly not. But it is the most “reliable” way. Why?
There are generally two (that is, I have only found two) places to change the banner.
The first is on the General Settings page, where the current recommendation is for banners to be 2000 pixels wide and 1000 pixels high.
Unfortunately, adding an image here often does…nothing.
The second place is on the General Settings tab in the Inspector (Not Settings=>General but Inspector=>General Settings). Here, under “Override Site Banner” there is a place to put an image if you want to override the site banner. But sometimes this does not work either. To be fair, you will get an error message along the lines of, “the theme you have chosen does not support (changing?) banner images” or words to that effect.
So after you’ve tried A. and B. the only way to reliably change the banner image is outside of RW, using Finder or some other file management program.
Believe me, I wish there was a way to reliably change the banner.
The only recommendation from RW (again, that is prominently displayed) is that 2000 x 1000 px advice referred to above. But that is not universal (look at their own Artful theme which requires different dimensions).

Does this mean as well that you can change themes from page to page? I’d like to know the answer without experimenting.

I’ve been around since RW 6, but so what? If anything, that’s why I was hoping that some of these problems would be solved by new versions of Rapidweaver. I read yesterday that the unfortunately-named Topper stack (because there is already a stack named “topper”) should solve these issues, but that Stack hasn’t been released. And, as noted above, this should be resolved through RW internals–especially given that there are two places in the program where a fix might be applied.


(Will Woodgate) #12

@mokane99 Most newer, conventional RapidWeaver themes support dragged and dropped banner images. You can either set the same image to display on all pages, or vary the images shown between different pages.

Older or more specialist themes may not support dragged and dropped banner images. RapidWeaver will tell you if the theme does not support dragged and dropped banner images. In which case, you will need to find the documentation for the theme or ask the developer for help. Themes need to be updated to support dragged and dropped banner images.

For any other unexpected behaviour, bugs or general weirdness in RapidWeaver 8, then your best option is to forward all the details onto Realmac to take a closer look at.

It is very unusual nowadays to find oneself needing to open the guts of a theme to manually swap-out images. And with many themes supporting automatic updates, you’d probably be advised to leave non-duplicated themes well alone. If you need to edit a theme, always duplicate it and rename it properly from within RapidWeaver.

Tools like RWMultiTool have not been updated for a while and others like RWThemeMiner have been discontinued altogether. Simply because there are newer and easier ways to get custom banners into themes. I think this is a trend that may continue.

It is possible to change themes on a page-by-page basis if required. But this is a very rare occurrence. Most people tend to stick with using the same theme for a whole project. It is easy enough to customise certain variables like the banner area or hiding a sidebar etc. on individual pages.

I see no “problems” with the way newer themes handle banner images and it seems the 3 people who ‘liked’ my last post would agree. I feel you might perhaps be making this process far more complicated than it needs to be, which I why I’m suggesting you apply the brakes for a moment and carefully research the options you have for editing theme banners in RapidWeaver 8. Newer and updated themes make the process remarkably quick, safe and simple.


(Michael Kane) #13

Here’s someone else with the same issue: Help needed with themes


(system) #14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.