Widgets, Tags and Dynamic Content

In this episode, we’re going to have a quick Q&A explaining how MOBLE can be used effortlessly to manage large volumes of content in moments.

A MOBLE website is not just a beautiful visual editor and a flexible site builder, it’s a seriously powerful tool for effortless management of dynamic content. Here’s an interview with co-founder Paul Davenport.


What is Dynamic Content?

In terms of widgets on MOBLE, dynamic content is content generated to the widget based on a combination of tags.

You can apply a tag to large volumes of content, e.g. pages and images, then apply that same tag to a widget. That widget will generate all of the content with those tags into a feed.

So what's the benefit of that?

It means you can swap and change the content on any page quickly, often without even having to visit the page. Let's imagine you have a news website, like SBS, and you wanted to show the latest information on a home page grid widget.

You might assign that home page widget to pull content tagged with 'news', 'sport' and 'culture'. Then, you might decide to only display pages and videos, but not images, documents or audio.

To drill down further, imagine if you were a particular journalist on that site. You might wish to have your own feed on your own page, displaying only content tagged with your name. The possibilities are endless.

At MOBLE we no longer send PDF proposals. Our proposals are actually a website, sent as a URL. Our sale staff simply remove the tags of what products they want to provide, and the feed of products is instantly created. Hey, if anybody’s is looking for a website quote, shout out and we'll send you a website with this in action!

Ok let's break this down, describe what's a Widget in the simplest way?

On certain websites, you might be familiar with content feeds. Content feeds dynamically pull relevant content into a module, or a zone on your page. You might be familiar with the latest news feeds, or the feed in your Facebook timeline, or even a photo gallery. There are all types of widgets.

Well, your MOBLE website comes with many different types of content feeds that we call widgets.

What types of Widgets are included on MOBLE, out of the box?

The types of Widgets on MOBLE are:

  • Grid: which is a block formation in 1-6 colums and as many rows as you like. It has text on top of the image.
  • Portfolio: which is like a grid, just with text under the image.
  • Masonry: which is like Grid & Portfolio, though each block can have a different height, it's a contemporary effect.
  • Mix: mix is for filtering the aforementioned Widgets, it filters by tags and have a cool effect to filter down.
  • Blog: we all know what blog is, though you can choose to display your blog in a list, or in any of the aforementioned Widgets, we allow you to determine the number of columns.
  • Event: events is the same as the above, though displayed by date and can include date and price, and buy online as a one-time payment or as a subscription payment.
  • Product: again very similar though shows price.
  • Gallery: a gallery does not display pages, it's just for images, videos and audio.
  • Slider: a slider transitions either pages or images.
  • Multi-Slider: this is another carousel type effect, that slides 4 pages or images at once.
  • Testimonials: this shows a series of testimonials as sections, which are hidden pages without an indexed URL.
  • List: you can create lists for anything and link to either content on your own website or an external site.

As you use MOBLE, you will become familiar with each of these Widgets, and we cover each widget in the 'How to use Tags & Widgets' series. Think of this Episode as the initial introduction, do feel free to get started and jump ahead to the Tags & Widgets Series at any time.

What types of content can be displayed in Widgets?

Widgets can display all types of content on your website. The main Content Types can be split into Pages and Files. 

  • The are Pages:
    • Pages,
    • Landing Pages,
    • Blogs,
    • Events,
    • Products,
    • and Sections.
  • And Files made up of:
    • Images,
    • Documents,
    • Audio
    • and Video

For any widget on MOBLE, you can specify the type of content you wish to display, so you might decide to display a Media Gallery and elect to display only Videos and Images. Or, you might wish to display a feed from a recent event and you elect to display Pages, Blogs, Events, Images, and Videos in your Widget.

Ok, so how do widgets work, what are Tags?

Great, yes this is the next logical question; how does the Widget know which specific Pages or Files to display? Let's say you were creating an event page for Vivid Festival 2018, you'd first drop a widget on to your page, and then you might realise that you didn't want to display old content for Vivid 2017. I.e. people want to display very specific content in their Widgets. Well, this is easily achieved with tags.

I'll explain, so every piece of content on MOBLE can be tagged, meaning that any content can be pulled into any widget in moments. Consider Widgets like a master control panel where in a few clicks you can completely change the content that is being served.

E.g. you might tag an image in this way:

  • VIVID | 2018 | OPERA HOUSE |

If you wanted your Image Gallery to display images of the Opera House at Vivid 2018, you could tell the widget to only display 'Images' that were tagged with 'Vivid', '2018' and 'Opera House'.

Let's jump into the future, imagine that your colleague arrived at the office with a gorgeous, freshly produced bunch of images of her shoot of the Opera House, during the 2018 Vivid Festival. Everybody loved the images and you wanted to add them to your website Image Gallery. On MOBLE you could simply upload her image file in bulk. You would tag the images at the time of upload, in exactly the same way, 'VIVID', '2018', 'OPERA HOUSE'.

As soon as the images are uploaded, they dynamically serve to the photo gallery. This saves huge amounts of time and is effortlessly simple. Furthermore, MOBLE sizes the images to fit in the widget automatically, so you only every upload one image regardless of the aspect ratio of the widget. We also have a compression engine that does its best to reduce the file size. Though, the SEO nuts out there will probably have a go at optimising these images first in a program like Adobe Lightroom.

In the widget, you can even sort the images in chronological, alphanumerical, or a custom sort order etc. You can add extra tags in bulk at any time, e.g. a tag for your names or a broader category type like 'Festival' might be great for a category page showing all festivals.

By having the ability to quickly add tags to any piece of content, and by being able to tell a widget to serve any tag, in a few clicks, you can dynamically change the content on any page of your website. 

That's what we set out to achieve.

Can I flip between different Widget Types?

Absolutely, and this is the fun part. Having previously used dynamic widgets in Enterprise Content Management Systems, when we started MOBLE, we wanted to embrace this philosophy of tags and apply it to every aspect of MOBLE.

In other CMS, annoyingly only particular modules worked this way and weren’t compatible with each other. But on MOBLE all widgets are in fact one and the same thing. Think of like a widget master control panel that can be swapped into whatever you want: news, events, gallery, masonry etc. Just swap and change your widgets and styles and your content in the feed remains the same. You can quickly swap and change tags too, at any time. It's totally dynamic.

An example?

Let’s look at an example. Suppose you have a photo gallery on a page and find the engagement is quite low. You might decide to bring more attention to it and make it more animated. In the widget, you could simply flip the widget type to a multi-slider and you would have a carousel effect in seconds. All the content would remain the same, but the look would be completely different.

Can I have more than on Widget per page?

Let’s look at an example. Suppose you have a photo gallery on a page and find the engagement is quite low. You might decide to bring more attention to it and make it more animated. In the widget, you could simply flip the widget type to a multi-slider and you would have a carousel effect in seconds. All the content would remain the same, but the look would be completely different.

Can I configure each Widget differently?

Sure, there’s no limit.

You can even add images to very specific areas of a page. So you could show an image gallery on the left-hand side, or show an image slider in the banner, or have a grid of related pages at the bottom. It’s totally flexible to build out these dynamic page elements, in any way that’s right for that page and its visitors.

Can I configure each widget differently?

Yes, you certainly can. You can configure the appearance of each widget to give it a look that suits the content.

For example, you might change the number of columns in a grid, the shape of the image in a grid, or you can even change the hover animation.

How do you see Widgets being used on MOBLE Websites?

I'd encourage MOBLE users to think about the way they tag content. If you get this right from the outset, you can have a lot of power, and fun at the same time.

My top tip would be to make tags granular, as in just finite word. So you wouldn't tag something | VIVID 2018 |, you would Tag it | VIVID | and | 2018 |.

Explained in the early questions, this enables you to show content for separate years, or just show all images for all years, whatever you need. The combinations become vast, so you can build out parent-child relationships extremely easily and have a lot of power.

Previously these things might have been hard coded and required a developer to make changes, or be controlled by a dedicated module, app or plugin. An example might be a separate events module, or a separate news plugin, or photo gallery app.

That approach approach really sucks and can be super limiting, often creating conflict between content and different modules, or worse, having to duplicate content. We've tried to remove these constraints and make everything compatible in a super powerful tool that anyone can use.

What is your favourite Widget Type?

I like them all, though on MOBLE out of the box we only have a certain number of widget types: 11 at the moment.

This is because they’re all highly configurable and the number of combinations is insane. Think of the potential number of combinations with six different guttering options, six different column widths, and six different hover animations, across 11 different widget types and 10 content types.That's a lot of choice! They can look very different and yet still keep a consistent theme of the client's design and brand identity.

Are widgets going to be featured in MOBLE's app store?

We plan to invite front-end developers from Australia first, then branch out to the rest of the world.

Developers will be invited to contribute different types of widgets to be approved by MOBLE, much like the way an app gets submitted to iOS. The developer will receive commissions from MOBLE, getting paid on a monthly basis.

Or I suppose we might launch the Widget Store as a crowdfunding campaign and go in with a bang. This way developers could get paid instantly for their work. We'll be listening to our customers to discover the right approach. We'd love to get this part spot on, to exactly what our early adopters want. Who knows, maybe it's a hybrid of both approaches, though being an Australian company, we do look forward to trying the widget submissions with the Australian developer community first, then taking it global, once we've ironed everything out and designed a community approach that works.

So MOBLE is an open CMS then? Any developers can use it?

That's what we love about MOBLE. We control the quality of the widgets, so we can still provide the maintenance and keep our client websites bug free. It's like the best bits of open source and the best bits of proprietary: You’re not locked into a developer; you can invite anyone to design and code in your website at any time. And you still get the maintenance support for the core applications. That’s peace of mind in both directions.

Finally, what is your favourite Widget on a MOBLE client website?

Come on! I can't say that, I seriously love them all and they are all suitable for certain things. We currently in development creating some of the more requested widgets that are in immediate demand, though I can't wait to see what the community of developers creates. That's what it's really all about.