Tutorials stack icon

RSS Architect

The ultimate RSS template creator for RapidWeaver by Weavium

Table of Contents

  • How to use (Start Here)
  • Viewing Accessible Feed Data
  • Different Data Types
  • General Settings
  • Build Tools
  • RSSA Text
  • RSSA Image
  • RSSA Button
  • RSSA Icon
  • RSSA Repeat
  • Done!


How to use

Get up in running with RSS Architect in no time!

  1. dd the main RSS Architect stack to your page, and go to the Stacks settings panel.

  2. Enter the URL of the RSS feed that you want to display on your site.

  3. Preview your page in RapidWeaver and click on the RSS Architect button to view a snapshot of the RSS feed data that you can display on your page

  4. Create your Feed item template by using the included RSS Architect theme stacks.

Access feed item attributes using double curly braces like so: {{item.attribute}}

That's all you need to do! Easily display RSS feed data with your own custom template!

Le'ts take a closer look below:


Viewing accessible feed data

The thing that makes RSS Architect so awesome, and unique from other RSS stacks is that it doesn't limit the data that you can display, or the layout / look of your feed.

It's all completely up to you!

So how do you know what data is accessible from your feed? Great question.

RSS Architect comes with an awesome tool called the "RSS Snapshot", which organizes your feed data and presents it to you in a readable way so that you know exactly what data your feed as to offer.

If you preview your page in RapidWeaver (after adding in your Feed Url) you will see a neat button in the bottom right corner of the page, like this:

If you click on the RSS Architect Button, you will then see a section pop up with a snapshot of all the feed items fetched from your RSS feed.

Clicking on an item will reveal the attributes that you can display in your template:

You will see the accessible attribute keys on the left, and the value of the attribute on the right.

Clicking on any of the attribute keys on the left will automatically copy the text, so you can easily paste it in your template: : )

Whenever pasting a value as plain text in RapidWeaver (not in the settings panel), wrap the attribute key in double curly braces like so:

{{item.title}} or {{item.dcCreator}}



Different Data Types

There are 3 different types of data that you may see in your data snapshot

  • Single values
  • Values with sub-attributes
  • Repeatable values (lists)

Each of these types should be accessed differently. We have easily distinguished each type for you in the Data Snapshot menu.

Single Values

Single values are basic values that can be easily grabbed like so {{item.value}}

they look like this:

Values with sub-attributes

Values with sub-attributes are values that contain multiple sub-values, which can be grabbed like so:

{{item.value.subValue}} or {{item.mediaCredit.url}}

the words subValue and url are sub-attributes of the main value.

In the data snapshot, they look like this:

Repeatable Values

Lastly, you may also find Repeatable values, which is a list of child items that can be looped through, such as a category.

In the data snapshot, these attributes look like this:

Repeatable attributes must be accessed using the included RSSA Repeat stack.

If we want to display all of the categories in the item.category attribute above, we can drag a repeat stack into our template section, and then enter the item.category attribute value in the settings panel like so:

Then, inside of our repeat stack, we can access each sub-category using the list_item keyword, like so:

{{listitem.text}} or {{listitem.domain}}

In our case, we are using an RSSA Button stack, and placing the listitem.text value inside of the button. In the button settings, we have also applied th listitem.domain value as the link to the category. Our result looks something like this:

That's it! Easily display rss feed data of all types in just these 3 simple ways. : )



RSSA – General Settings

FEED URL

This is the first and most important setting in the stack. This is where you will paste the URL to the RSS feed that you would like to display on your page.

Max Items

Here you can set a limit for the number of items to be loaded onto your page

Link items to original site

If you want, you can make it so that clicking on entire items will bring the user to the original site. You will need to provide an attribute name to be used for the link, as all feeds are different. It will most likely be something like item.link

Feed Type

With RSSA, you can display feeds in two different ways, as a List or as a Horizontal Slider. You can choose which method to display your feed here.

Spacing

Here you can choose the amount of spacing between each feed item. It applies to both list and slider items.

Max Width

This sets the maximum width for the entire stack

Mobile Points (Tablet, Mobile)

When creating your template using the RSSA build tools, you will see some responsive options. These are the mobile breakpoints that will be used for the responsive options.

Margin (Top & Bottom)

Here you can set the vertical margin above and below your feed.



RSSA – BUILD TOOLS

We have created a nice set of build-tools to help you easily create beautiful & dynamic layouts with your RSS feed data.

The tools include:

  • Row / Column Container stacks
  • Icon stack
  • Button stack
  • Image stack
  • Text stack (Text/Markdown/HTML/Dates)
  • Repeat stack (Used for displaying list data)

We have kept the settings for each of these stacks very simple, to make creating layouts quick and easy.

Let's go through each of the stacks and settings below:



RSSA - Row/Column Container stacks

Containers are the foundation of any layout. They contain options for backgrounds, padding, corner-radius, borders, box-shadows, etc. These are the styled-boxes in which your place your content.

The Row/Column Container stacks are exactly the same, with the exact same options. The only difference is the direction in which the inner content flows.

Row Container Stack

In the row container stack, content flows from Top to Bottom, meaning that all content inside will be stacked vertically.

Column Container Stack

In the row container stack, content flows from Left to Right, meaning that all content inside will be stacked horizontally from left to right.

Shared Settings

Both the Row / Column container stacks share the following options:

  • Fill Mode (100% / Fit to content)
  • Content Alignment (Vertical & Horizontal)
  • Stretch on Mobile
  • Size (Min Height / Max Width)
  • Corner Radius
  • Margin
  • Padding
  • Border
  • Box Shadow
  • Background

With these options alone you can create almost any layout. Simply decide whether you want your content to be stacked from top-to-bottom or left-to-right, and choose the type of container that works for you.

Containers can be nested inside of each other, and combined to layout content however you want.



RSSA - Text Stack

The RSSA Text stack is probably one of the most useful build tools included with RSS architect. RSS Feed data can come in many formats such as text, html, dates, and more. The RSSA Text stack allows you to display each of these formats in your template. : )

Content Type

The first option of the RSSA Text stack is the content type. You can choose from:

  • Text (Mixed text & feed attributes)
  • Markdown (Mixed markdown & attributes)
  • HTML (Displays pure HTML code from feed attributes)
  • Date (Allows you to format a feed attribute with a date)

Basic Text & Attributes

When the RSSA Text stack is set to text, you can mix text content with feed attributes like so:

You notice that we wrap feed item attributes with double curly braces {{item.attribute}}, with the attribute name followed by the word item.

This works the same with the Markdown option.

Date formatting

The RSSA Text stack also has a Date option, which can be used to specify a custom format for a feed item attribute that contains a date, like so:

HTML Content

Some RSS Feed attributes contain pure HTML code. You can display this pure HTML in your feed template by using this option. Simply select the HTML option, and enter the attribute name in the settings panel like so:

Other Text Options

The others options included with the RSSA Text stack include:

  • Color
  • Size
  • Style
  • Line-height
  • Alignment
  • Margin

Everything you need for text content. : )



RSSA Image Stack

Another useful tool provided with RSS Architect is the RSSA Image stack. This stack allows you to grab images from feed item attributes, and it even has an option for extracting images from feed item attributes that contain HTML. : )

To use the Image stack, drag it onto your page, and go the settings panel of the stack.

You will see 3 different ways to display images.

  1. From a feed item attribute

This option is for feeds that specifically provide an image url in the feed. Simply type in the name of the attribute that contains the image url, like so:

  1. From an image file

This option is simply for providing your own image from RapidWeaver.

  1. Extracting images from feed items with HTML content

Some feeds do not specifically provide an image URL, but instead provide pure HTML content that contains mixed text and images. For these situations, we have provided a handy feature that will search the contents of a feed item attribute that contains HTML and automatically grab the image url. Simply type in the name of the feed item attribute with the HTML content, like so:



RSSA Button Stack

The RSSA Button stack is a useful tool for displaying dynamic buttons using feed content. You can set button text to feed item attributes, and set the button link to a url from your feed item.

It looks something like this:

In the settings panel, you will find an option for setting the link with an attribute or a basic URL.

If you want to set the button link to a feed item attribute, such as the feed item link, simply type item.attribute or item.link in the settings input.

The other options for the RSSA Button stack include:

  • Fill
  • Alignment
  • Max Width
  • Radius
  • Margin
  • Padding
  • Text Size
  • Box Shadow
  • Style (Normal / Bold)
  • Text Color (Initial & Hover)
  • Background Color (Initial & Hover)
  • Icon (with position, alignment, spacing options)

All the basic options you need for a nice looking button : ).



RSSA Icon Stack

The icon stack is simply a convenience stack provided for you to add icons inside of your feed template. Simply drag the stack into your template, select the icon font, and choose the icon code that you would like to use. You can find icon codes for each icon font here:

Material Icons

https://material.io/tools/icons/?style=baseline

Ionic Icons V2

https://ionicons.com/v2/

Font Awesome

https://fontawesome.com/v4.7.0/icons/

Linear Icons

https://linearicons.com/free

You can also add an icon via an image if you so choose.



RSSA Repeat Stack

The RSSA Repeat stack is specifically used for feed attributes that are marked as Repeatable in the Data Snapshot Menu. A Repeatable feed attribute means that it is a list of child items, rather than a specific value such as text or a url. Because of this, you need to loop through each item in the list to display it. This is exactly what the RSSA Repeat stack does.

To use the repeat stack. First you need to have a feed attribute that is marked as Repeatable, like this list of categories for example:

Notice that the item.category attribute is marked as Repeatable, meaning that it contains a list of child items that can be looped through using the repeat stack.

To loop through this list of categories we will drag an RSSA Repeat stack into our feed template, and set the Repeat Attribute option to the item.category value, like so:

Now, inside of our repeat stack, we can access the values of each child item using the list_item keyword. As you can see in the screenshot above, each of our list items has a text attribute, and a domain attribute. so we can access them inside of our repeat stack like so:

Giving us the following result



That is all folks!

Surprisingly, that is all you need to know in order to become an RSS Master !!!

We have put a lot of work into making RSS Architect a simple, yet powerful stack for RapidWeaver users. The web is full of RSS feeds, and now we can display them in style!

RSS Architect Changelog

Version 1.0.2

  • Added an option for setting the Z index of the main stack

Version 1.0.1

  • Fixed bug causing old version of ionicon font to be incompatible with newer versions of the font

Version 1.0.0

  • Initial Release