%[endif]%

%[if %("%id=freestyle_type%" == "gettingstarted")% ]%

Welcome to FreeStyle!

Introduction

In the old days, banners in RapidWeaver typically consisted of fixed height boxes with a CSS background image applied through the theme style settings. The problem with this method was that users were typically tied to whatever settings the theme provided, and options for creativity were rather limited. Then something called 'responsive web design' came along in 2012, and people needed banners that were also fully flexible; in response to the 40% or so of handheld/mobile traffic arriving at some websites.

We decided to listen to what our theme customers were saying. We took into consideration the things people wanted to do with theme banners and headers in RapidWeaver. Time was spent researching emerging trends in web design. As a result of this, the 'FreeStyle' banner concept was conceived. FreeStyle has solved a great many problems and given RapidWeaver users (both novice and expert users) options to build beautiful banners that simply were not possible a few years ago.

Basically FreeStyle is a branch off the opensource ExtraContent project, but also borrows a few ideologies from the Concrete5 publishing platform. FreeStyle is nothing more than an empty divisional container in the theme index.html file. With the correct code or stack, you can effortlessly embed a broad range of different content into the theme banner container. FreeStyle does some important tasks behind the scenes for you, like ensuring content is responsive and search engine optimised.

This stack serves as an optional 'FreeStyle enabler'. It can be used to configure FreeStyle banner containers in a compatible theme (any theme advertised as having support for FreeStyle). This FreeStyle stack can do all sorts of wonderful things, like display static images, a slideshow or even video content. The possibilities are almost endless. As the name suggests, 'FreeStyle' gives you the freedom to create eye-catching banners of any style you like.

Although mostly intended for use in ThemeFlood RapidWeaver themes, it's certainly feasible (as proven in the past) to reuse this same stack in non-FreeStyle themes from other companies. To do so, just uncheck the Embed In FreeStyle setting, and place this stack in the normal page flow or within the ExtraContent stack. However please note that we do not provide support for RapidWeaver addons from other companies and therefore cannot guarantee compatibility or suitability of this stack beyond ThemeFlood themes.

Getting started

In the stack settings over on the right, choose the type of banner you want to setup from the Template popup menu. This will load one of several ready-made templates. Each template displays a different set of instructions, together with configurable options relevant to what you're building. Just follow the instructions carefully on the screen, enter your code or content and hit publish to see the results.

Start building RapidWeaver theme banners the easier and smarter way!

%[endif]% %[if %("%id=freestyle_type%" == "blank")% ]% %[if edit]%

FreeStyle - Blank Template

%[endif]% %slice% %[if edit]%

Drag and drop stacks into the placeholder shown above. Supports styled text, images, video, columns, HTML code and most other basic stack elements; including things like the ImageCaption, HoverBox and ImageKiosk stacks (sold separately). Experimental support is provided for PlusKit @import and Joe Workman Global Content. Embed code for other things like SoundCloud can also go in here, within HTML stacks.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "static_image")% ]% %[if edit]%

FreeStyle - Static Image Template

%[endif]% %[if %("%id=image_src%" == "local_image")% ]% %image% %[endif]% %[if %("%id=image_src%" == "html_src")% ]% %html=" Banner 1

"% %[endif]% %[if %("%id=image_src%" == "local_image")% ]% %[if edit]%

Drag and drop an image from your computer into the placeholder shown above (denoted with the downward-pointing arrow). Double-click the image to view its properties (switch off any constrained sizing and give the image a suitable ALT attribute). Search engines like nice ALT attributes that give a brief description about the image being displayed. You can change the image file name too if you prefer.

%[endif]% %[endif]% %[if %("%id=image_src%" == "html_src")% ]% %[if edit]%

If you prefer to source an image from another location (like an image warehouse), type a standard HTML image tag in the HTML code box. Here are some examples of typical HTML image tags you can use in RapidWeaver:

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "splash")% ]% %[if edit]%

FreeStyle - Splash Template

%[endif]% %[if %("%id=splashimage_src%" == "local_image")% ]% %image% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %html=" Banner 1

"% %[endif]%

%slice%

%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

The Splash template works almost identically to the Static Image template. However in this template, an extra placeholder is provided. Into this placeholder you can drag and drop columns, text or image stacks (and other basic addon stack elements like UsefulStack). Content placed inside this new placeholder will be rendered over the top of the banner image. This enables you to build an eye-catching 'splash' container at the top of a page, featuring a vivid image and bold text.

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the placeholder on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "jumbotron")% ]% %[if edit]%

FreeStyle - Jumbotron Template

%[endif]% %[if %("%id=jumbotronimage_src%" == "local_image")% ]% %image% %[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% %html=" Banner 1

"% %[endif]%

%slice%

%[if %("%id=jumbotronimage_src%" == "local_image")% ]% %[if edit]%

The Jumbotron template follows-on from the Splash template. However in this template we instead provide two blank placeholders that float over the background image. Both of these placeholders are 50% wide; one is floated on the left and the other floats on the right. This FreeStyle template is ideal for creating typical 'app' headers, which often feature a bold block of text on the left and a vivid graphic or icon on the right.

%[endif]% %[endif]% %[if %("%id=jumbotronimage_src%" == "html_src")% ]% %[if edit]%

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

In the stack settings, you can adjust something called the 'breakpoint'. What this does is to dissolve the columns on smaller screens and render the content underneath the banner image. This solves the problem of text or graphics breaking outside of the banner region and looking messy. It guarantees that people viewing your website on a smaller screen can still see all basic content in your FreeStyle banner.

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "slider")% ]% %[if edit]%

FreeStyle - BX Slider Template

%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]%

%slice%

%[endif]% %[if %("%id=slider_setup%" == "draganddrop")% ]% %[if edit]%

BX Slider is an opensource slideshow plugin, released freely under the MIT license for personal and commercial use. This slider is fully responsive and has lots of customisable options for RapidWeaver users. On touch devices, users can navigate slides using finger swipe gestures. BX Slider works reliably on all modern web browsers. Visit the developers website at bxslider.com for more information about the original slider plugin reused here in FreeStyle.

Right now, you have the slider set to the 'Drag And Drop' setup mode, in the settings on the right. This is good to use if you want to setup a basic image slider without needing to use any HTML code! However it can make things a little more tedious if you want to change the order of slides in future or pull in images from a warehouse (in which case HTML Code might be a better setup to use).

Using the 'Slides' setting on the right, you can adjust how many slides to display in this slider. Every time you increment the number, a new placeholder will be rendered above. From this point onwards, simply drag and drop basic stack elements into each slide, along with your content.

Note that some slider settings only work when others have been enabled or disabled. For example, the carousel only works correctly when the slider mode is changed to 'horizontal' and if Image Captions are turned on it's advisable to turn off pagers and auto controls.

%[endif]% %[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]%

%[endif]% %[if %("%id=slider_setup%" == "htmlcode")% ]% %[if edit]%

Each slide is formed using a basic HTML list element, for greater flexibility. Don't panic if you have never used HTML code before - it is very easy! Some example code with links to 4 images is already loaded in the HTML code box above (double-click to view and edit this code). Each slide list item can contain images, links or any other basic HTML tags; or a combination of different content (like images nested inside link tags). Type each list item in the box shown above, like this:

<li><img src='http://example.com/images/pic1.jpg' alt='Picture 1' title='Title for 1' /></li>
<li><img src='http://example.com/images/pic2.jpg' alt='Picture 2' title='Title for 2' /></li>
<li><img src='http://example.com/images/pic3.jpg' alt='Picture 3' title='Title for 3' /></li>
<li><img src='http://example.com/images/pic4.jpg' alt='Picture 4' title='Title for 4' /></li>

Images can be attached to your project and referenced as RapidWeaver resources:

<li><img src='%resource(pic1.jpg)%' alt='Picture 1' title='Title for 1' /></li>
<li><img src='%resource(pic2.jpg)%' alt='Picture 2' title='Title for 2' /></li>
<li><img src='%resource(pic3.jpg)%' alt='Picture 3' title='Title for 2' /></li>
<li><img src='%resource(pic4.jpg)%' alt='Picture 4' title='Title for 4' /></li>

Or you can use example images bundled in the theme already:

<li><img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1' title='Title for 1' /></li>
<li><img src='%pathto(images/editable_images/2.jpg)%' alt='Banner 2' title='Title for 2' /></li>
<li><img src='%pathto(images/editable_images/3.jpg)%' alt='Banner 3' title='Title for 3' /></li>
<li><img src='%pathto(images/editable_images/4.jpg)%' alt='Banner 4' title='Title for 4' /></li>

%[endif]% %[endif]% %[endif]% %[if %("%id=freestyle_type%" == "googlemap")% ]% %[if edit]%

FreeStyle - Google™ Map Template

%[endif]%

%[if edit]%

The FreeStyle stack lets you embed Google maps, and runs-off the standard embed code that Google freely provides website owners already. Maps make interesting banners, and can be used to show locations which the page may relate. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

Go to google.com/maps in your desktop web browser
Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
Click on the cog icon at the bottom of the screen. Select Share and Embed Map from the menu
In the new modal window that opens, click on the Embed Map tab
Set the map size to Custom. Set the width to 1500px and the height to 600px or thereabouts*
Copy the iFrame code provided and paste it into a blank text or code file
Extract the URL (src attribute) from the map. It will look something like this: https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5205174.633627887!2d-3.7632390876009407!3d50.430125479655565!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1386361228260
In the configurable options on the right, paste the URL into the Map URL box
Adjust the height setting so that a good proportion of the map is showing
The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Google has an odd way of sizing maps. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "openstreetmap")% ]% %[if edit]%

FreeStyle - Open Street Map Template

%[endif]%

%[if edit]%

The FreeStyle stack lets you embed Open Street Maps. This can be considered an opensource competitor to the Google Maps service, and some people favour Open Street Maps for having a clearer license agreement and easier usage. There is some evidence to suggest that these maps are more accurate and frequently updated too. A key advantage of using Open Street Maps over Google Maps is the ability to drag and drop a single marker pin on the map, which remains intact when the map is embedded on another website. This makes Open Street Maps ideal for highlighting specific locations, right down to street level. The map container scales horizontally, and retains a fixed height. Follow these steps to get your map setup in FreeStyle:

Go to openstreetmap.org in your desktop web browser
Ensure that the map you'd like to embed appears in the current map display, on your screen. This includes the zoom level
Click on the share icon on the right of the screen
If you want to display a map pin, click the Include marker option and drag the pin into position
On the share tabs, click the HTML option
Copy the iFrame code provided and paste it into a blank text or code file
Extract the URL (src attribute) from the iFrame code. It will look something like this: http://www.openstreetmap.org/export/embed.html?bbox=-4.046230316162109%2C50.48511856761413%2C-4.003958702087402%2C50.507886381012156&layer=mapnik&marker=50.496503846052356%2C-4.025094509124756
In the configurable options on the right, paste the URL into the Map URL box
Adjust the height setting so that a good proportion of the map is showing*
The map should load in Stacks edit mode at this stage. If the map does not load, check the URL again

*You may need to play around with the map sizing a little bit. Typically it has been found that the map will always retain the same height, set in the FreeStyle configurable options. However the sides of the map will crop correctly as the screen becomes narrower. Refreshing the web browser window will re-centre the map again.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "dailymotion")% ]% %[if edit]%

FreeStyle - Dailymotion Video Template

%[endif]%

%[if edit]%

The FreeStyle stack lets you embed a Dailymotion video. Follow these steps to get your video setup in FreeStyle:

Go to dailymotion.com in your desktop web browser and navigate the website to find the video you want to embed
Click on the Export tab under the video. In the settings, set the video size to the maximum possible
In the embed code box, copy the iFrame embed code into a blank text or code file
Copy the video URL. So if the video URL was http://www.dailymotion.com/embed/video/xcir20, that would be the URL to use
Paste this URL into the stack settings on the right (marked Video URL)
The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "html5video")% ]% %[if edit]%

FreeStyle - HTML5 Video Template

%[endif]%

%[if !edit]%

%[endif]%

%[if edit]%

Use the HTML5 Video template for embedding audio or video content you convert and host yourself. HTML5 audio and video works in all newer web browsers, including iOS and Android. Follow these steps to get your video setup in FreeStyle:

Use free software like Miro Video Converter to convert your media into web-safe .mp4, .ogv and .webm formats
Upload these converted files to your web server or an online warehouse (like Amazon S3)
Double-click the HTML code box above and edit the code to point to your audio or video in the required formats
Adjust the aspect ratio setting to increase the proportionate height of the video container and poster image
Change any of the video options shown in the settings on the right, like the poster frame, autoplay, looping, controls and preloading

The opening and closing <video> tags are included for you already; you just need to provide the source tags and the links to your uploaded audio or video files. If you need help with understanding the HTML5 video code, search online. Some companies like Mozilla, HTML5-Rocks and Opera have published some brilliant information and working examples that you can follow. Providing your video in .mp4, .ogv and .webm formats greatly improves browser compatibility, because not all web browsers support MP4. FreeStyle will scale HTML5 Video and poster image responsively to fit within the banner. If you find your media is not playing back in some web browsers, make sure your MIME types are correctly set on the server hosting the files.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "kickstarter")% ]% %[if edit]%

FreeStyle - Kickstarter Video Template

%[endif]%

%[if edit]%

The FreeStyle stack lets you embed a Kickstarter video. It uses the standard Kickstarter HTML5 / Flash embed method. For best results, use the largest video size (normally 800px wide and 600px tall). Follow these steps to get your video setup in FreeStyle:

Go to kickstarter.com in your desktop web browser and navigate the website to find the project video you want to embed
Click on the Share button under the video. In the new window that opens, set the video size to the maximum possible
In the embed code box, copy the iFrame embed code into a blank text or code file
Copy the video URL. So if the video URL was http://www.kickstarter.com/projects/doublefine/double-fine-adventure/widget/video.html, that would be the URL to use
Paste this URL into the stack settings on the right (marked Video URL)
The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "ted")% ]% %[if edit]%

FreeStyle - TED Video Template

%[endif]%

%[if edit]%

The FreeStyle stack lets you embed a TED video. It uses the URL that TED provides in the website embed code. For best results, use the largest video size (normally 853px wide and 480 tall). Follow these steps to get your video setup in FreeStyle:

Go to ted.com in your desktop web browser and navigate the website to find the video you want to embed
Click on the Embed button under the video. In the modal window that opens, set the video size to the maximum possible
In the Embed this video box, copy the iFrame embed code into a blank text or code file
Copy the video URL. So if the video URL was http://embed.ted.com/talks/allan_savory_how_to_green_the_world_s_deserts_and_reverse_climate_change.html, that would be the URL to use
Paste this URL into the configurable options on the right (marked Video URL)
The video should load in Stacks edit mode at this point. If the video does not load, check the URL again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vine")% ]% %[if edit]%

FreeStyle - Vine Video Template

%[endif]%

%html=""%

%[if edit]%

Use this template to embed a 6-second long Vine video. Vine is a good choice to use for short video's that do not need to be more than 600px wide. Follow these steps to get your vine video setup in FreeStyle:

Open the Vine video in your web browser
On the lefthand side, click on the Embed button
From the embed options, choose the Simple or Postcard options (postcard displays the Vine username, title and description below the video)
Set the video to the desired size (normally 600px wide is best for websites). It's recommended that audio is prevented from auto-playing
Copy the embed code provided. Paste it into the HTML code box above

A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing &autoplay=1 will cause the video to start playing automatically as the page loads. There are several other settings you can apply to Vimeo content. See the Vimeo developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "vimeo")% ]% %[if edit]%

FreeStyle - Vimeo™ Video Template

%[endif]%

%[if edit]%

The FreeStyle stack lets you embed a Vimeo video. It uses the standard Vimeo HTML5 / Flash embed method (similar to the code provided under the share button on the Vimeo website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

Go to vimeo.com in your desktop web browser and navigate the website to find the video you want to embed
Take a note of the video ID, displayed in your browser address bar. This is often a random string of letters or numbers sometimes in mixed case. So if the video URL was https://vimeo.com/877053, its ID would be 877053.
Copy and paste this ID into the stack settings on the right (marked Video ID)
The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "youtube")% ]% %[if edit]%

FreeStyle - YouTube™ Video Template

%[endif]%

%[if edit]%

The FreeStyle stack lets you embed a YouTube video. It uses the standard YouTube HTML5 / Flash embed method (similar to the code provided under the share button on the YouTube website already). Only video's that have been marked as 'public' and allow for embedment can be used in this stack. Check the video license agreement carefully. For best results, use HD video content. Follow these steps to get your video setup in FreeStyle:

Go to youtube.com in your desktop web browser and navigate the website to find the video you want to embed
Take a note of the video ID, displayed in your browser address bar. This is often a random string of letter and numbers in mixed case. So if the video URL was https://www.youtube.com/watch?v=2YjY_A8g_FA, its ID would be 2YjY_A8g_FA. In other words, the string of letters and numbers after v= is the video ID
Copy and paste this ID into the stack settings on the right (marked Video ID)
The video should load in Stacks edit mode at this point. If the video does not load, check the viewing permissions and ID code again

A box marked Custom Para's is also provided in the stack settings. In here, you can enter custom parameters to customise how your video is displayed or behaves. For example, typing ?autoplay=1 will cause the video to start playing automatically as the page loads. You can have a video start at a particular point, hide the player controls, loop the video, display a playlist and various other things. See the YouTube developer website for full details of parameters available.

%[endif]% %[endif]% %[if %("%id=freestyle_type%" == "calltoaction")% ]% %[if edit]%

FreeStyle - Call To Action Template

%[endif]% %[if %("%id=calltoaction_src%" == "local_image")% ]% %image% %[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% %html=" Banner 1

"% %[endif]%

%id=calltoaction_text%

%[if %("%id=calltoaction_src%" == "local_image")% ]% %[if edit]%

The Call To Action template displays a static image with a ghosted-style button layered over the top. The button is set to display in the centre of the image; and you can adjust the button vertical alignment using the configurable settings provided. As the name suggests, this template is ideal for creating bold banners with a vivid 'call to action' button. The call to action button itself can be set as a link to another page, a shopping cart, a file download, an email subscription signup form, and many other actions.

%[endif]% %[endif]% %[if %("%id=calltoaction_src%" == "html_src")% ]% %[if edit]%

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

%[endif]% %[endif]% %[endif]% %[if %("%id=overlay_display%" == "block")% ]% %[if edit]%

FreeStyle Overlay

%[endif]%

%slice%

%[endif]% %[if %("%id=freestyle_type%" == "hashtag")% ]%

%[if edit]%

FreeStyle - Hashtag Template

%[endif]% %[if %("%id=hashtagimage_src%" == "local_image")% ]% %image% %[endif]% %[if %("%id=hashtagimage_src%" == "html_src")% ]% %html=" Banner 1

"% %[endif]%

%slice%

%[if %("%id=splashimage_src%" == "local_image")% ]% %[if edit]%

%[endif]% %[endif]% %[if %("%id=splashimage_src%" == "html_src")% ]% %[if edit]%

A standard HTML image tag calling an image from another website via a URL:

<img src="http://example.com/images/ice-cream.jpg" alt="Ice Cream">

Using an image that has been added to your RapidWeaver project as a resource:

<img src='%resource(ice-cream.jpg)%' alt='Ice Cream'/>

Using an image stored in the theme contents:

<img src='%pathto(images/editable_images/1.jpg)%' alt='Banner 1'/>

%[endif]% %[endif]% %[endif]%

%[if %("%id=append%" == "true")% ]%