Introducing the updated WebYep CMS stacks

WebYep is an opensource CMS (content management system) favoured by thousands of users for its ease of setup, reliability, great multilingual support and its simplistic approach towards online editing. A perfect solution for making frequently-changed parts of a website remotely editable outside of RapidWeaver or for letting clients safely edit parts of a website themselves.

The eagerly awaited WebYep v2 has recently been released, and we have simultaneously released a brand new pack of powerful WebYep stacks. The WebYep stacks work with both the free version of WebYep and the forthcoming commercial version. The commercial version of WebYep is unbranded, with support for a REDACTOR rich text editor and file manager.

You can use WebYep in RapidWeaver without the stacks. But our stacks make the setup of editable content regions in your pages much easier. This is a friendly and flexible CMS solution for RapidWeaver, which anyone can use. WebYep is a tried and proven CMS we actively use daily in websites for our own clients.

The current pack of WebYep stacks (as of version 2.1, March 2018) includes the following:

  • Assistant - the main WebYep stack you add to every page
  • Attachment - creates file download links with customisable icons
  • Boolean - instantly toggle the display of page areas on and off
  • Calendar - populates calendar tables with events
  • Conditional - hides or displays content if authors are logged in
  • Grid - a responsive grid authors can add or remove items from
  • Image Gallery - responsive thumbnail grid with popup lightbox
  • Image - static images that can be changed by an author
  • Login Button - place a login button anywhere on the page
  • Long Text - a long extract of plain text an author can edit
  • Loop - page areas which can be repeated and reordered
  • Markup - a plain text / HTML editor for content authors
  • Menu - links which open dynamically generated pages
  • MP3 Player - embeds a single audio file
  • MP4 Player - embeds a single video file
  • Organiser - Trello-style project manager or schedule with cards
  • Rich Text - an editable area with link and formatting buttons
  • Short Text - a short extract of plain text an author can edit
  • Tabs - lets content authors setup panels of tabbed content
  • Time Control - displays page areas, based on date / time
  • Toggle - lets content authors setup accordion panels of content

Use as many or as few WebYep stacks as you want. The modular nature of this setup offers great flexibility. The loop and menu stacks are immensely powerful. Some of our other stacks like CutOut also incorporate WebYep compatibility.

Minimum system requirements

  • RapidWeaver 7
  • Stacks 3.5
  • PHP 5.6 (7.x or greater is better, as 5.6 is approaching end-of-life)
  • SSL certificate (this stops web browsers nagging you about insecure login forms)
  • WebYep 2 free or commercial

This video [CC] provides a quick introduction to the WebYep stacks. As always, you can download a free demo version of the stacks to play with. WebYep itself is available to download from the Github project page and is extensively documented. Any technical questions you have about the WebYep stacks can be emailed direct to us. Any general questions about WebYep can be posted to the forums.

Take a look at a couple of our other WebYep stack short teaser video’s here, here, here and here.

Learn more…

11 Likes

Looks very interesting. So, as an example with that Loop stack - would you be able to set it up with a gallery and text inside, and then have the WebYep user duplicate that on the live site, and introduce new images? Am I understanding it’s function correctly?

Yes, that’s completely correct. Anything placed inside the ‘loop’ can be duplicated by the author. So taking the example of events added to a WebYep calendar, the author would be presented with the following controls alongside each ‘unit’ in the loop:

The buttons, in order from left to right:

  1. Add a new unit to the loop
  2. Delete the current unit
  3. Move the unit up
  4. Move the unit down
  5. Disable (hide) the unit

The stacks we include like Calendars, Tabs, Toggles and Organiser all make use of loops. A prime example of loops would be a list of products for sale, whereby each unit in the loop would require a title, picture, description and purchase button. Then an author could easily login to add new products, delete old products or change the order of products shown.

5 Likes

WebYep Stacks Version 2.2
The main change in this update is the addition of a new responsive slideshow stack. Once added to a webpage, content authors can login to add new images, remove older images or change the order images are presented in. The slideshow can be placed in the normal page flow or embedded directly into a theme FreeStyle / ExtraContent region. Image captions are derived from the image ALT attributes. Images can have individual links applied to them, so this slider is both pretty to look at and functional! Numerous options exist to adjust the style of the captions, navigation and pagination bullets - so you can really make this slider look and function much like integral part of your website. And it supports Ken Burns transitions too! This new WebYep Slideshow stack works with both the free and commercial versions of WebYep.

Teaser video showing the new slideshow stack (click to enlarge):

WebYep Ready
Starting in April, we can be hired to convert existing RapidWeaver 7 websites into WebYep-ready editable websites. This includes installation of WebYep (free or commercial versions) onto your web server, configuration of one or more login accounts, creation of editable areas within simple pages, migration of existing content into the WebYep system, testing, publishing and a final video tutorial to show you how it all works. Should custom WebYep stacks be required for more sophisticated layouts or page elements, these can be built too. If this is a service you are interested in, please get in contact for a quote and to discuss your requirements.

6 Likes

I think WebYep looks really interesting Will but I’m struggling to find easy-to-understand instructions for finding, downloading and installing the WebYep bit. I’m not familiar with Github so it’s all a bit like voodoo to me.

Is there a guide for humans? :sunglasses:

Rob

1 Like

You don’t mention having done so already, but did you read the first post of this announcement thread, click the links and watch the tutorial video in full? The free version of WebYep is very easy to get downloaded and setup, irregardless of whether you have ever downloaded something from GitHub before today or not. Simply click the green clone or download button on the project page:

Setup is unchanged from version 1. There is no database to setup and nothing that has to be pre-compiled. Everything you need (including the system files and the documentation) is bundled in the free download.

And as per the post above, paid help is available with the complete installation and testing of your WebYep CMS installation, if you require it.

2 Likes

Thanks for the clarification. The link implies that it’s just going to cover the Webyep stacks rather than Webyep itself, so I didn’t look at it. Now I know where to go.

Thanks

Rob.

Hi Will
I’m using WebYep Image Gallery with the latest version 2.1 (free) with a ThemeFlood and I do not know why it only allows me to see only 2 images, I put 4 …

Regards

Hi @willwood

When I tried the demo on your website the editor didn’t seem to be responsive? I could only seem to edit anything in iPad landscape is that supposed to be the way it works?

Nigel

Good feedback. What I can tell you is that currently the editing modal (using jQuery Simple Modal) is a fixed size. Some modals are smaller than others. However responsive resizing has already been ticketed for WebYep - and is on the roadmap. I have something working well, but it isn’t official just yet.

Of course, you can very easily change the dimensions of the editing modals yourself in the stack settings. So if you don’t mind Redactor rich text buttons displaying over 2 lines, it is certainly feasible to customise the UI yourself to make things a bit narrower.

Worth noting though that iOS does not currently have a proper file manager. Meaning options to edit and upload new files (like images) from iPhones and iPads is somewhat limited. Plus trying to write large amounts of text on iPhone is painful to say the least! Like all CMS solutions, a physical keyboard definitely makes the process substantially faster and easier.

One of my clients has a $20 Raspberry Pi computer plugged into the back of their TV, with a wireless keyboard. They do WebYep content edits through the Epiphany web browser. So there are some quite ingenious ways to edit with WebYep!

Granted, the WebYep UI is not as trendy as other systems. However an advantage it brings is compatibility with a broader array of web browsers. In particular, quite a lot of older web browsers which clients or organisations may still be using. I think we still have support all the way back to at least IE7, the last time I checked.

Thanks Will. I’m going to grab the demo and have a play about with it.

Nigel

I did a quick test of this. If the modal window width (for the rich text editor) is set to 760px, it displays fine on iPad portrait and your rich text editor controls are still displayed along a single line at the top:

I would imagine the controls for the other rich text editors (CKEdit and TinyMCE) take-up less space than the Redactor ones. So you may be able to afford reducing the modal width even more. But I think 760px is a nice width to leave it at, because it gives you more space to edit the content within. I may consider making 760px the new default.

1 Like

Nice. I did try the demo again and the you select file you can now browse the files app. I need to test if I can use that to add photos that have been edited ready for web. Need to play about with how that would work as part of a CMS workflow but my needs would mainly be for adding and making text adjustments.

IMG_0042|666x500

I downloaded the stacks and installed webyep, but where do I get the rich text editor? I see the rich text stack but no editor. I understand that this is part of the redactor module. How do I get it and install it?

Does your paid version include this? Does the paid version remove the branding?

Hi @Frederick_P , my answers inline below:-

This is already documented in the user guide (see the ‘Rich Text’ page). It is a function of WebYep, not the stacks. You configure the system to tell it what type of rich text editor you want, by modifying the name of the editor. Probably best to ask for help on the WebYep forums if you need support with configuring your rich text editor. This isn’t something that can be changed from within the stacks - it is a function of the WebYep core.

For now, by contacting me (I can forward your email to Max) or you can bypass me and contact Max directly yourself via the WebYep forums. I am on spring break currently so it is likely quicker to contact Max yourself (I am not at my desk again until Monday 23rd April). Last time we spoke, Max is putting together a new webpage where you can compare and buy the commercial version online.

No version of the stacks (developed by myself or Joost) has ever included WebYep. You have the choice to use the free or commercial versions of WebYep, based on your personal requirements and budget. Not everyone needs the commercial version. A majority of the stacks work perfectly with the free version of WebYep - including things like image galleries, simple blocks of content, toggles / accordions and embedded media.

The commercial version of WebYep can be made ‘white label’. Logos and other branding can be hidden or replaced with your own. See the page ‘White Labeled Version’ in your documentation.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.