ActionsForge

webP image file and tag

Wed, 12 Nov 2025 15:22:44 +0000

Dual Image Hybrid (WebP + Fallback)

Version 4.0: By Max Fancourt, 2025

So this is version 4 yes v2, v3 and everything before was work in progress… quite a bit has changed and so its a complexity new action so dump the old this is what it does basically to fill in the gaps that good old freeway didn’t handle:

This cunning little Freeway Action bridges the gap between the past and the future… gracefully combining old school reliability with modern image wizardry. It automatically swaps your standard image for a modern, lightweight WebP (or AVIF) version where supported, while politely providing a JPG/PNG fallback for those browsers still living in 2008.

For those feeling particularly clever, it even supports responsive breakpoints, allowing you to serve different images for different screen sizes. All neatly wrapped up inside a proper tag. Of course, if you’re feeling nostalgic, the Action can also fall back to the classic “onerror” method, ensuring everyone gets to see something, no matter how ancient their device might be.

It also politely if you want converts Freeway’s generated IDs into CSS classes for more flexible styling plus extra classes if you want and alt tag option. Finally it automatically injects retina safe scaling because nobody likes crap pixilated images.

In summary (or: what this Action does while you’re not looking)

Outputs modern elements with optional WebP/AVIF sources
Automatically falls back to standard image formats for older browsers
Supports up to two extra responsive sources for different breakpoints
Converts Freeway IDs to CSS classes like the CSS: ID to Class FW7 action
Auto-detects and adapts to Freeway’s HTML level (no in HTML3, sorry)
Adds retina-friendly scaling and display fixes automatically
Works seamlessly whether positioned inline or absolutely
Requires no JavaScript on your part… it handles everything silently
Adds polite notes reminding you to keep your CSS tidy
Still loves legacy browsers

CSS Grid Item

Wed, 07 Aug 2024 13:47:41 +0000

CSS Grid Item

In the CSS Grid Layout Module, a grid item is any direct child of a grid container. Grid items are the elements that are placed within the grid and can be controlled individually or in groups. The module provides numerous properties that allow for precise placement and alignment of grid items within the grid container.

Key Properties of a Grid Item:

grid-column-start and grid-column-end:

Defines where a grid item starts and ends on the columns.
Example: grid-column: 1 / 3; places the item starting at the first column line and ending just before the third column line.

grid-row-start and grid-row-end:

Defines where a grid item starts and ends on the rows.
Example: grid-row: 2 / 4; places the item starting at the second row line and ending just before the fourth row line.

grid-area:

Allows you to assign an item to a specific grid area, defined in the grid container.
Example: grid-area: header; places the item in the grid area named “header”.

justify-self:

Controls the alignment of an individual grid item along the inline (row) axis.
Example: justify-self: center; centers the item horizontally within its grid cell.

align-self:

Controls the alignment of an individual grid item along the block (column) axis.
Example: align-self: end; aligns the item to the end (bottom) of its grid cell.

grid-column:

A shorthand for grid-column-start and grid-column-end.
Example: grid-column: 1 / span 2; makes the item span across two columns starting from the first column line.

grid-row:

A shorthand for grid-row-start and grid-row-end.
Example: grid-row: 2 / span 3; makes the item span across three rows starting from the second row line.

CSS Grid Container

Wed, 07 Aug 2024 13:40:03 +0000

General overview of the ‘CSS Grid Layout Module’

The CSS Grid Layout Module is a powerful layout system designed to offer a two-dimensional grid-based layout, both for rows and columns, making it easier to design web pages without the need for complex floats and positioning. It provides a more intuitive way to create layouts, giving developers the ability to align items into a responsive grid with minimal effort.

Key Features of CSS Grid Layout Module:

Two-Dimensional Layout: Unlike Flexbox, which is primarily a one-dimensional layout system, Grid Layout handles both columns and rows, allowing for more complex and versatile layouts.
Explicit and Implicit Grids: You can define your grid structure explicitly with grid-template-rows and grid-template-columns, or let the browser implicitly create rows and columns as needed.
Flexible and Responsive Design: With the ability to create flexible grid tracks, CSS Grid makes it easy to design responsive layouts that adapt to various screen sizes.
Alignment and Spacing: Grid Layout provides precise control over alignment, spacing, and positioning of grid items using properties like justify-items, align-items, justify-content, and align-content.
Grid Areas: The ability to define named grid areas simplifies the process of arranging content and makes the code more readable.

Grid Container

The grid container is the parent element that holds the grid items. To create a grid container, you apply display: grid or display: inline-grid to an element. The grid container defines the structure of the grid and controls the layout of its child elements.

Key Properties of a Grid Container:

display:

display: grid;: Establishes a block-level grid container.
display: inline-grid;: Establishes an inline-level grid container.

grid-template-columns:

Defines the column structure of the grid.
Example: grid-template-columns: 1fr 2fr; creates two columns, with the second column being twice as wide as the first.

grid-template-rows:

Defines the row structure of the grid.
Example: grid-template-rows: 100px auto; creates two rows, with the first row having a fixed height of 100 pixels and the second row taking up the remaining space.

grid-template-areas:

Allows for a visual way to place items in the grid by naming areas.

Example:

 grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";

gap:

Defines the space between grid items.
Example: gap: 10px; sets a 10-pixel gap between all grid items.

justify-items and align-items:

Controls the alignment of grid items within their respective cells.
Example: justify-items: center; centers items horizontally.

justify-content and align-content:

Controls the alignment of the entire grid within the grid container.
Example: justify-content: space-between; evenly distributes extra space between grid items.

grid-auto-flow:

Controls the auto-placement algorithm for grid items that are not explicitly placed.
Example: grid-auto-flow: row dense; places items in rows and fills in gaps as tightly as possible.

Flexbox Container Action

Tue, 25 Jun 2024 10:15:25 +0000

Flexbox Container Action Description

The Flexbox Container Action for Freeway allows designers to effortlessly create responsive layouts using CSS Flexbox properties. This action provides an intuitive interface to set up flex containers with various display settings, flex directions, wrapping behaviours, and alignment options. Users can define different styles for breakpoints, ensuring a seamless and adaptive design across all screen sizes. With options for customising gap sizes, enabling comments, and specifying child elements, the Flexbox Container Action simplifies the process of building flexible and modern web layouts.

Additionally, you can launch a webpage to read more and experiment with different options directly from within the action palette.

Just corrceted some mistakes and added the third break point interface as well in the latest 1.6 version

Flexbox Items Action

Fri, 21 Jun 2024 17:14:19 +0000

Flexbox Item Action Description

The Flexbox Item Action for Freeway allows designers to precisely control the behaviour and alignment of individual flex items within a flex container. This action provides an easy-to-use interface to adjust properties such as order, flex-grow, flex-shrink, flex-basis, and align-self. Users can also set custom values and define different styles for breakpoints, ensuring that each flex item adapts smoothly across various screen sizes. The Flexbox Item Action streamlines the process of creating flexible and responsive designs, offering detailed control over each element’s layout and appearance.

Additionally, you can launch a webpage to read more and experiment with different options directly from within the action palette.

Ive added a third break point and fixed some errors as well in version 1.8

Script-Action-Set

Thu, 01 Apr 2021 16:18:28 +0000

This action set contains everything I could think of to allow you to construct intergrate and adjust an: xml, css, html, php, javacript, asp, txt… in fact just about any script type within Feeway that Freeway cant handle directly.

For a quick overview of how these two actions are used and applied: https://vimeo.com/531894188

Release Notes Changes in 2.1.1

New: ScriptLinker javascript option has a new Attribute drop down so you can set this to none, async or defer: The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads “in the background”, and then runs when the DOM is fully built. – The async attribute is somewhat like defer. It also makes the script non-blocking. But it has important differences in the behaviour. The browser doesn’t block on async scripts (like defer). 0ther scripts don’t wait for async scripts, and async scripts don’t wait for them.
Script Placement: Scripts 1 - 8 are placed before the end of the HEAD tag. Scripts 9 & 10 are placed just before the end of the BODY tag
Bug Fix: Random bug fixes.

Release Notes Changes in 2.1

New: ScriptLinker can now link up-to 10 script pages
Bug Fix: Random bug fixes e.g. comments inclusion now works correctly

Release Notes Changes in 1.3

New: ScriptLinker can now link up-to 8 script pages
Bug Fix: ScriptLinker activation of interface is now working correctly
Bug Fix: ScriptCreator Can now be applied to a Master page

Release Notes Changes in 1.2

New: ScriptMaker & Linker can now be used to edit and link to the lightweight and fast JavaScript toolkit; MoreCSS.
New: Freeway examples containing “JQuery & MoreCSS are now included.

YouTube

Mon, 27 Jul 2020 13:27:13 +0000

Add a YouTube movie to your web page.

To use

Sketch out an instance of the Action using the Action tool. The Action will inform you if the box you have sketched is an optimum size and will advise on a height based on the width of the Action on the page. This will change depending on controller options. You can ignore the recommendations. However, your video will be either “letter boxed” or “pillar boxed”.

Action Options

Movie URL: Enter the URL of the YouTube movie you want to display

YouTube Player: Select a YouTube player option from the dropdown. The default setting is the best one to use. Note that Version 2 is deprecated, and may not be supported by YouTube in the future. It is provided here for compatibility purposes. We recommend the use of either the iFrame or the Version 3 options.

Version 3 is a Flash based player, which will be embedded in the browser. The iFrame option chooses whether to use an HTML 5 native player or the Version 3 Flash player depending on browser capabilities. Note that some other options may not work as expected in this version of the player if HTML 5 video is served.

16:9 Aspect Ratio: If your movie is filmed in a wide screen format, then select this option. This will help the Action advise you on the best dimension to use.

Autoplay: Movie will start playing when the page has loaded

Show Controls: The movie controls will be shown or hidden (affects item dimensions)

Automatically hide controller: Controller will minimise after a couple of seconds of playing (affects item dimensions)

Show related videos: YouTube will recommend more videos when the movie has finished playing

Show Information: movie information will be shown before it starts playing

Show Annotations: Annotations added to the movie will be shown if this checkbox is on

Full screen button: allows the playing of the movie in full screen

Start Position: starts the movie playing at the number of seconds indicated

Loop: Loops the movie

Disable keyboard controls: Determines whether the keyboard can control the movie

Play High Definition Alternative: If there is a high definition version of this movie, then it will play in favour of the standard definition (Version 2 only).

YouTube player Version 3 (and iFrame) determines which movie to play depending on the size it appears on the page.

Border: Displays a border around the movie (Version 2 only)

Colour 1 & Colour 2: select colours to use for the controllers and border (Version 2 only)

Full screen flag added to iFrame for 2.0.3

RootResources

Wed, 29 Apr 2020 17:47:27 +0000

This Action attempts to construct a site-root-relative link to each graphic or other Freeway-attached resource on the page.

In practice, it is not 100% effective. Use with caution.

Strip Head & Body tags

Mon, 23 Mar 2020 15:23:34 +0000

Meant to be used in conjunction with Softpress' Create e-mail action.

Removes Doctype, Head, HTML and Body tags, leaving behind just the fw-bodytable layout table.

I needed this to generate an e-mail template that had an additional HTML signature injected by Gmail. Adding the HTML after the close HTML tag was causing display issues, so the best way seemed to be to remove everything except the TABLE tag.

Many thanks to Walter Davis for getting it to work.

CSS3 Columns

Wed, 04 Mar 2020 23:33:13 +0000

Make multi-column text without any extra elements. Apply this Action to a text box, set the number of columns or the desired column width, the space and divider properties, and see multi-column text in your modern browser. As with all CSS3 goodies, browsers that don’t support these properties will silently ignore them.

One thing to watch out for: if you apply this Action to a text box that has a fixed height and overset text, the extra text will run out of the box to the right, adding multiple columns as it goes. This is because the multi-column layout respects whatever height you may have set for the element it’s applied to, and will prefer that height over the number of columns you may have chosen.

ScriptyLightbox3

Sat, 02 Feb 2019 02:52:05 +0000

New version 0.4.0: Removes Flash; Uses Video tag for MPEG video

The third generation of the ScriptyLightbox series. This Action is similar in application and design to ScriptyLightbox2. Under the hood, it is all new, using the CDN-hosted scripts and resources to make your pages lighter weight and faster to load.

Includes a graphic box (thumbnail) version and an inline (text link) version. Both operate the same way:

Select a graphic box containing a thumbnail image and apply the Action, or place your text cursor where you want the link to appear and insert an instance of the Action.
In the interface, choose the file or page or URL you want to appear in the popup window. Set the dimensions and other options.

The video player is designed for iOS-compatible formats like m4v and mp4, or you may link to a still photo in any Web-friendly format.

Form in DIV/Table

Mon, 21 Jan 2019 16:33:14 +0000

Creates a form tag that wraps the div or table that the action is applied to.

Configuration includes:

Name (deprecated in XHTML)
ID (must be same as Name if both used in HTML5)
Action
Method
Enctype (if method is Post)

Thanks to Tim Plumb and Walter Davis

V1.6 update - added fields for Class, onSubmit, Data (just one for now) and Target

Hi-res e-mail images

Mon, 07 Jan 2019 14:48:13 +0000

To use high-resolution (Retina) images in HTML e-mails, Outlook needs the height and width to be added as attributes in the img tag. By default, Freeway puts these in CSS - perfect for websites, but no good for HTML e-mails.

A Page Action, designed to be used in conjunction with Softpress' Create Email action.

Pretty much entirely written by Tim Plumb because I couldn’t get it to work.

v2 Update - Added an option for a Cache-buster query string to be appended to images – useful during the proofing process as Apple Mail aggressively caches images in HTML e-mails.

v2.1 update - Added ‘Vertical align top’ control to remove additional spacing sometimes showing below images.

HTTPS Helper

Mon, 12 Nov 2018 23:14:36 +0000

This Page Action attempts to enforce HTTPS protocols everywhere there is a link, script, or form. Apply it to your page to change any generated URLs within your page code from HTTP to HTTPS.

The only interface control is a checkbox to disable the Action for debugging purposes.

Leaflet for Open Street Map

Sat, 13 Oct 2018 02:58:23 +0000

This Action allows you to use the Open Street Map service wherever you might use Google Maps. The resulting map is pleasantly-colored, and is very mobile-friendly. It works well in flexible or responsive layouts, too.

This Action is safe to use within secure (HTTPS) pages.

To use, draw or insert an HTML box where the map should appear, and apply the Leaflet Action to that box. If you know the latitude/longitude that you would like to center the map on, you may enter it directly, or you can use the address lookup service to find it. Zoom goes from 1 to 18, with illegal values ignored.

To add markers to the map, use the included Leaflet Marker Action. This is a “draw it on the page” Action, accessible from the Action tool in the application toolbar. The marker element may be drawn anywhere you like on the page, the resulting HTML will be removed anyway.

Choose which map it belongs to (you may have multiple maps, or multiple markers per map).

Use the address/latitude/longitude interface fields to enter the location of the pin, then enter the text you would like to see on the marker tooltip. If you want to split the text across multiple lines, just add <br> tags where needed.

CSS - ID to Class

Fri, 13 Apr 2018 13:16:23 +0000

Version:2

The latest 2 version now works correctly with Freeway 7.
It converts ID-based styles into Class styles and or removes ID’s it can also add extra styles or a combination of all three. It also works with master styles sheet based items.
(Please note: version 2 is a freeway 7 only action although the later Multi version contains both FW6 and FW7 versions)

In the end, we scrapped what we did a few days ago and used parts of the old method to allow us to insert CRITICAL CSS styles into the head before any other styles.

ok so what we have now is

Items on Master pages now work correctly, and you have complete control over how you wish those styles to be associated with the HTML element or if you prefer no association (anonymous).
If you wish, just Class styles can be chosen and no ID’s.
If convert to ‘Class styles’ option is not chosen and the Delete ID is checked, you can still apply extra classes from the text panel within the action palette.
If you apply a style from the inspector this will also be included.
If you add a class via extended then this will be incorporated within the HTML.
Critical CSS styles can be inserted into the head before all other styles.
The Action works with media queries so is fully responsive savvy.
If you choose ‘No External Style Sheets’ in Document setup then the action will now function correctly (it failed before).

I have also combined the older but updated Class to ID Action because it may be useful and of course works properly with freeway version 6.
I have named these latest actions differently from previous. They now have FW-6 or FW-7 designation at the end of the names. This is because people may have too many documents with the old action applied so rather than remove that old action and run the risk of things failing, I have decided to rename the new actions. You should be able to install this combined version without destroying the old.

OLD PreVersion 2

This is a straightforward action to create a class based style from most objects that have an ID Style and then remove if chosen the ID name.

Carousel 2

Wed, 21 Mar 2018 12:39:37 +0000

Update March 2018

This action now creates HTTPS links (for secure hosting) exclusively. This should not cause any side-effects in non-secure hosted pages, and will alleviate the need to use the HTTPS CDN Helper Action to create secure links to the external JavaScript libraries.

This is a complete re-write of Carousel, designed to stand alone and cooperate with Protaculous 2. By popular demand, you can now create “infinite” carousel animations, which appear to wrap around rather than zipping back to the start.

Carousel2 and Freeway 7

If you have used Carousel2 in the past (pre Freeway 7) to animate in-flow (or inline) graphic boxes, then this construction will fail in Freeway 7 and above. The reason has to do with a fundamental change in Freeway (for the better) toward a simpler HTML construction. Unfortunately the solution to this is a little convoluted (until I update the Action to accommodate this).

For each Graphic Box in your carousel, follow these steps:

Note the dimensions of the box. Draw a new HTML box exactly that size (draw it any size, then use the Inspector to set the dimensions – much easier!).
Do one of the following:
- Drag the graphic box over the top of the HTML box, pressing the spacebar as you do. When the edges of the HTML box highlight blue, you may release the mouse button and let go of the spacebar. Then you may drag the image (which is now a nested child of the HTML box) into the top-left corner of the HTML box, or use the Inspector to do the same. Remove the Action from the image, and apply it to the HTML box, following the same settings as the Action on the graphic box.
- Draw a new HTML box the same size as the graphic box. Import the image from the graphic box as a background image on the HTML box. (You may want to export the original image to capture any cropping/sizing steps that you performed on the original before doing this.) Apply the Action to the HTML box, and delete the original graphic box. Ensure that the settings are the same as before.

Either of these approaches will work around the issue of Freeway 7’s improved HTML structure, and your page will behave the way you expect. Yes, these are more complex directions than you may be used to, but until the Action can be updated, please follow them to avoid frustration.

Offline use

This is a single-file Action, and all JavaScripts are externally hosted. As such, it will not work on a CD-ROM or in a development environment without a working Internet connection.

The following Actions are included in this one file:

Carousel 2
Carousel 2 Pane
Carousel 2 Button
Carousel 2 Tab
Carousel 2 Text Button
Carousel 2 Text Tab

Construction

Draw an HTML box where you want your effect to appear. Either double-click inside of it and build your first pane using inline layout techniques, or draw nested elements within the first pane (click once on the pane so its handles are showing before drawing each element within it). Duplicate this box, then apply the Carousel 2 Action to the original.

Apply Carousel 2 Pane to the duplicate box, and choose the first box in the Target picker. Modify the contents to become the second pane of your animation. Duplicate this second pane (and modify each copy) enough times to complete your effect.

You may position these additional panes anywhere on the page or the pasteboard – they will be hidden when the page loads. (Anyone visiting your page with JavaScript disabled will see them in their original location, though, so if that’s something you think will happen, take a moment to put them somewhere legible.)

Navigation

Carousel 2 Tab (and Carousel 2 Text Tab) may be used to create links to specific panes of the animation. When these are clicked, the (optional) auto-animation will stop and the carousel will turn to show the chosen pane.

Carousel 2 Button and Carousel 2 Text Button may be used to create “previous” and “next” buttons.

Options

Direction: choose horizontal or vertical animation
Effect duration: how long the effect takes to move from one frame to another (0.4 seconds default)
Wrap around: give the illusion of an infinite loop of panes, rather than a fixed film-strip.
Play automatically: start animating when the page loads (Interval sets the time in seconds between moves)
Move borders to outside: if your panes all have a border, check this to make the border stay still while the pane contents animate. (The first pane’s border will be used, and the other panes' borders will be removed.)

ScrollMe

Tue, 06 Mar 2018 15:38:37 +0000

This action makes it easy to incorporate the ScrollMe jQuery library: http://scrollme.nckprsn.com.

ScrollMe uses data attributes to set up the animations, which is very time-consuming using the Extend dialogue box.

Download jQuery and ScrollMe and attach them using the External Javascript page action.

Use the ScrollMe action on containers and AnimateMe on items to animate. For items that need both scroll and animate, use the AnimateMe action, and turn on Scroll Me.

—– EDIT —–

It looks like there’s a compatibility issue with jQuery 3. You can download jQuery v1 or v2 from the jQuery CDN page (right-click and select ‘Download linked file’ to download locally).

Facebook Open Graph Meta Tags

Tue, 07 Nov 2017 12:54:29 +0000

This page action allows you to add Facebook’s Open Graph Meta data (which, for some reason, use ‘property’ instead of ‘name’ attributes, so can’t be added in Page -> Meta tags).

Mobile Redirect PHP

Wed, 14 Jun 2017 15:41:23 +0000

This is a quick action that allows you to redirect to a new page if being viewed on a mobile device. This differs from the existing Mobile redirect action because we are triggering the redirect before most of the page loads using a PHP script placed before the HEAD Tag

Critical CSS Styles

Fri, 31 Mar 2017 15:38:18 +0000

Critical CSS
This Page actions allows you to insert ‘bespoke’ Critical CSS Styles as inline styles into the HEAD Tag before any other style.

For more information on what Critical CSS is:
https://www.smashingmagazine.com/2015/08/understanding-critical-css/

Critical CSS Generator:
https://jonassebastianohlsson.com/criticalpathcssgenerator/

HTTPS CDN Helper

Mon, 23 Jan 2017 02:35:17 +0000

If you’re building a secure page, you need to use HTTPS links to your CDN-hosted scripts and other resources to avoid mixed-security warnings or errors.

Apply this Action to your page to convert all links to CDN-hosted resources from http:// to https://.

Update: This will also work with any of the scripts hosted at the Freeway CDN.

Anonymous

Sat, 18 Jun 2016 02:06:52 +0000

This Action removes the IDs from any elements (and their children) to which it is attached.

Use it to make your layout elements loop-safe.

HTML5 Block Link

Mon, 25 Jan 2016 19:35:44 +0000

Apply a link directly to an HTML item in Freeway 6. The HTML5 specification allows you to wrap an HTML item with a link, like this:

<a href="example.html">
  <div id="item42">
    <p>Some content here.</p>
  </div>
</a>

Apply this Action to the HTML item, and set the link and any extra attributes for the link using the Actions palette interface.

List Item Starter

Sun, 27 Dec 2015 11:29:37 +0000

FW makes it very difficult for you to change the starting item # in an ordered list. This little action gives you that option. Add the action via Insert>List Item Starter in your list of items and it will seek out the enclosing ordered list Tag and add the start attribute for you. The action is also available from here