• Share this article:

FreeStyle Header & Banner Containers

In the old days of RapidWeaver themes, banner and header containers were typically formed out of a box container with a CSS background applied. Although these worked okay, they could not resize easily on different screen sizes (due to fixed height or width settings applied) and typically you could only apply static images. It became clear that many RapidWeaver users wanted greater freedom and flexibility; after all the page header or banner is one of the most important parts of a page and often the first thing website visitors see.

FreeStyle

The term 'FreeStyle' was coined by a ThemeFlood customer, who discussed the need for "a more free-style approach to theme banners and greater flexibility with what you can do in them". FreeStyle should not be confused with a series of RapidWeaver themes from another company, also called 'Free Style'.

FreeStyle is a sort-of hybrid between ExtraContent and the banner controls you may be used to in Concrete5 (if you've ever used Concrete5 before). As the name implies, the fundamental idea behind FreeStyle is to give you, the web developer, a very flexible space in which to create beautiful, fully-responsive theme banners and headers in RapidWeaver. In particular, FreeStyle has the following advantages over traditional fixed-sized theme header and banner containers:

  • You can display different images on different pages, and not hit a 20 or 40 background image limit imposed by the theme
  • FreeStyle images can be pulled in from RapidWeaver resources, dropped into a page, sourced from an online warehouse, or pulled in from a website like Flickr
  • Ability to assign attributes on the images (like title, width, height, language or ALT attributes), to improve SEO, navigation, performance and overall site accessibility
  • Images used can follow any naming convention you already use, and can be in JPG, PNG or GIF format
  • Any image in a FreeStyle banner is set to 100% wide by default, and scales down responsively to fit the screen size
  • FreeStyle banners automatically resize, and do away with the need for complicated height, width, breakpoint and positioning settings
  • Customise FreeStyle banners using your own custom CSS code; like rounded corners, borders, box shadows, padding and margins

There are several different ways to use FreeStyle and get attractive banners setup in your websites. Some of the methods outlined are ideal for novice RapidWeaver users wanting to avoid complicated code or configuration, whereas other methods will appeal more towards users seeking to warehouse static images or setup a greater number of custom banners within a project.

Creating a FreeStyle banner using dragged-and-dropped images

The easiest option for static banner images (which has been added to all of our theme designs as-of March 2016) is to simply drag and drop a suitably-sized image into your main page container or styled text sidebar, named one of the following:

  • banner.jpg
  • Banner.jpg
  • header.jpg
  • Header.jpg
  • freestyle.jpg
  • Freestyle.jpg
  • freestyle.jpg
  • FreeStyle.jpg

If one of the above (named) images is seen in the content or sidebar region, it will be moved into the FreeStyle container. No additional code or configuration is required.

Creating a FreeStyle banner using ExtraContent

The second method is to toggle-on the Preview ExtraContent Containers option in the theme Miscellaneous style settings. Look for the designated ExtraContent container marked 'FreeStyle Banner' or 'FreeStyle Header' in red text (or any other area advertised as being a banner, header or slideshow region). Then use the standard ExtraContent code snippet or ExtraContent stack to place images or other content into that numbered ExtraContent container. ExtraContent is already discussed in detail in this theme user guide.

If you like using the Stacks plugin, then you should definitely try the free ExtraContent Plus stack, or the FreeStyle stack (pictured below). This will let you setup a range of different FreeStyle banner types, including static images, sliders and video. The stack consists of clear instructions and various 'templates' relating to the type of content you intend on setting up in your FreeStyle banners.

FreeStyle stack

Creating a FreeStyle banner using basic code snippets

The traditional method for getting FreeStyle banners setup (and arguably the quickest for regular static images) is to type the following HTML code into your page content or sidebar container:

<div id='fs'></div>

Then enter a standard HTML image tag, to pull your image in, like this:

<div id='fs'><img src='http://example.com/images/tree.jpg' alt='My Image'/></div>

Images can be pulled in using the normal RapidWeaver resource macro:

<div id='fs'><img src='%resource(my-image.jpg)%' alt='My Image'/></div>

Or using the %pathto()% macro for an image that is already stored in the theme contents (like one of the example banner images supplied with the theme):

<div id='fs'><img src='%pathto(images/editable_images/1.jpg)%' alt='My Image'/></div>

In the above pathto example, incrementing the number of the image (e.g. 1.jpg), will change the image displayed. So 4.jpg would display a different image.

These code snippets can be saved in RapidWeaver for quick future use. The alt='' attribute you see in the image tag can be used to provide a description about your image to search engines and social media services.

When a FreeStyle-enabled theme sees the 'fs' code, it knows to treat that as content for the FreeStyle container. It's hoped that this new FreeStyle concept will give control of theme banners and headers back to theme users again, and help streamline developer workflows.

Useful tip: If you find your FreeStyle banner images are causing content to get shifted down the page as it loads, try providing a height and width attribute in the HTML image tag, set to the same width and height as your original image:

<div id='fs'><img src='http://www.example.com/my-image.jpg' alt='My Image' width='1500' height='500'/></div>

All modern web browsers will then reserve a space (equal to the dimensions you specify) for the image to load in, which will reduce shifts occurring during and after page rendering. Quite a few web browsers will even go ahead and calculate responsive scaling, before the image has finished loading. So this can be a useful trick to know about.

Many of the example demo sites published on the ThemeFlood website are using examples of FreeStyle banners. When you download these project files using the links provided on the website, you can see how the FreeStyle banners were configured on each page. Typically we use the HTML code snippets discussed above to display static images, and these code snippets can typically be seen in the main content or sidebar regions, in RapidWeaver edit mode.

As always, any custom code being used to setup or modify theme graphics should not be pasted into the RapidWeaver Custom Header box, in the page inspector. This input box is reserved for code you need to put in the page header, above the visible section of the page. Putting content code in here risks breaking the page or creating other problems. Typically the FreeStyle banner code discussed above is best to put directly into a page content container or sidebar (even if the container has been set to hide).

Embedding images in a FreeStyle banner using RapidWeaver 7 banners

RapidWeaver 7 introduced the ability to drag and drop images into a banner placeholder (within the site setup or page inspector). This feature is enabled in all the latest versions of ThemeFlood themes. This is by-far the easiest method for quickly embedding static images within your theme banner region.

RapidWeaver 7 banners

For banner images dragged and dropped into RapidWeaver 7, the RapidWeaver site setup displays the recommend size of banner images (below the drop-zone). These are provided just for rough guidance and your are always welcome to provide images of your own size or shape. In most themes, the banner automatically resizes to fit the images you provide.

Images will not be scaled larger than their original size. This is because stretching images to a larger size (using CSS or HTML) typically results in images becoming blurry. If you do wish to stretch your images larger, you can use custom CSS code like this:

#rwBanner img {
    width: 100%;
    height: auto;
    max-width: none;
}

If using images dragged and dropped into RapidWeaver 7, the option is also given to provide an ALT attribute. The ALT attribute (alternative text) comprises of a short description explaining what the image is about. As well as being of significant benefit to search engines (that can't see your images) the ALT attribute is also used by visually-impaired website users; to get a spoken description about the image they can't see.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.