Tsooj Media

Stacks, Websites and Office Automation...






stacks_image_A03B579B-1F0C-461E-B600-A161379021D6
Price


  € 9,99

WebYep stacks


Always wanted to create a RapidWeaver Website using the WebYep CMS but lack PHP coding experience? With the WebYep stacks from Tsooj Media you can easily create a website using this CMS in no time.

WebYep stacks info


New to WebYep?
Never heard of the WebYep CMS before? A very brief overview as taken from the WebYep website:

"WebYep is a compact, easy to use and low priced Web Content Management System - perfect for small to medium websites.
WebYep quickly turns your website into editable pages. You are then able to update the content of these pages directly from
within your web browser: Just click on the content icon on the page to modify texts, upload images and so on..."

About the WebYep stacks

Always wanted to create a RapidWeaver Website using the WebYep CMS but lack PHP coding experience?
With the WebYep stacks you can easily create a website using this CMS in no time.

The stacks provide a simple solution for building a WebYep enabled website and the best part is that it will not override any user defined content. So you can easily republish and redesign the Website from within RapidWeaver. So all the complexity is handled for you, all you have to do is drag & drop like you would normally do with a stack.

If you want to create a personal website or a website for your clients so that they are able to change their own content
using a CMS ... this might be the product you are looking for. All that using your favorite RapidWeaver!

Have a look at our tutorial on how to easily create a WebYep CMS enabled website and play around with the official WebYep demo.

The following WebYep content elements are available as a stack:

  • Logon Button
  • Short Text
  • Long Text
  • Rich Text
  • Image
  • Image Gallery
  • Attachment
  • Loop
  • Menu

As a bonus we've also created some customs stacks to extend the basic WebYep capabilities:

  • Edit Mode, simple switch between Edit and Preview modes without showing the Login Button to visiters;
  • Conditional stack, make content visible only in edit or normal mode;
  • Video stack, simply embed video's from your video sharing service like e.g. Vimeo and YouTube;
  • Newsticker stack, simply add a Newsticker Styled using a Long Text or Rich Text element;
  • Added an extra redirect after Logon options into the Logon Button stack.
More information about the individual WebYep stacks is available on the Manual part of this product page.

Requirements

The requirements for the WebYep stacks besides the WebYep System Requirements are:

Of course we keep the stacks updated with the original WebYep development.





Note that
"WebYep stacks" is a product of Tsooj Media and WebYep is a product of
Objective Development.

WebYep stacks manual



As described below each stack has it's own specific HUD options although some of these options are the same:

WebYep common options










The stack name

In this example the WebYep Short Text element

Question button?
Clicking this button takes you to the WebYep online documentation

Info button
Use this button to visit this product page

Show stack name
Show the name of the stack in edit mode, so you are able to identify the stack when needed.
In the following example the first text line: WebYep Short Text (WebYep stacks by Tsooj Media)


WebYep stack example









Class and Style

Both are custom options added by Tsooj Media and not initially available with a PHP WebYep element definition.
Why? The WebYep element is placed within a < DIV > so that you are able to style its content using a CSS class or Style.
Some of the stacks have a default value of "display: inline;" so that the content of the WebYep element can be shown
inline with other fixed text on your website.

Before and After text fields
These are custom fields to be used for fixed text values that should not be edited by the WebYep CMS.
This is a normal richt text field as available in other stacks so you are able to format it with colors and so on.
If you don't want to use this field, simply click and remove the text or otherwise enter your own text.

ToolTips
Hover your mouse over one of the options and (as from Stacks 1.3) a ToolTip appears to help you with a basic options guide.
When a (yellow) ToolTip starts with the text "Custom option", this means that it is a custom created or modified setting for this
element and it is not an "entirely default WebYep element setting". Some of these are added or modified by Tsooj Media
for an even better WebYep or Stacks experience.

More details
Below you find a more detailed explanation on how to use the specific WebYep element stacks with their own options.
Click on an item to show/hide it's documentation content.

WebYep Logon Button
Show Logon Button (online)
Show or hide the WebYep Logon Button
Note that this only works online and not within RapidWeaver.

Redirect after Logon
Custom option, enable the user to be redirected to a given URL on successful Logon. This might come in handy to redirect from an administrator Logon page to the most edited page.

Note that the normal Logon routine is bypassed when using this option.
If you experience problems with WebYep Logon, start by setting the redirection to off so that the normal Logon routine is used again.

Redirect URL
Custom option, the Redirect URL that should be used on succesful Logon. In case you Logon onto the WebYep system of the Tsooj Media website and you want to be redirected to this product page you use the following Redirect URL: /products/webyepstacks/index.php.

Style
By default the CSS style is set to display inline so that the Logon Button shows up nice inline with the before/after content.
WebYep Short Text
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this short text element have the same content on all pages or not. When set to false the Short Text element content is unique for a page, even if another element on a different page has the same name.
If set to true the content will be the same on all pages for the Short Text elements that use the same Fieldname.

Style
By default the CSS style is set to display inline so that the Short Text content shows up nice inline with the before/after content.
WebYep Long Text
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this short text element have the same content on all pages or not. When set to false the Short Text element content is unique for a page, even if another element on a different page has the same name.
If set to true the content will be the same on all pages for the Long Text elements that use the same Fieldname.

Encode Email
Should Email adressed be encoded or not. When you enter an Email address into the Long Text Element, WebYep will display it as a mailto link.

If you enable this option, WebYep will encode these links to keep spam spiders from collecting the email addresses. It uses a JavaScript based encoding. If the visitors of your website have deactivated JavaScript, they will only see these email addresses in the form of: name(_AT_)domain.com
WebYep Richt Text
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this short text element have the same content on all pages or not. When set to false the Short Text element content is unique for a page, even if another element on a different page has the same name.
If set to true the content will be the same on all pages for the Rich Text elements that use the same Fieldname.

Encode Email
Should Email adressed be encoded or not, have a look at the Long Text element for more information about Encoding Email addresses.

URL to Stylesheet
URL (between quotation marks) to the main Stylesheet of your website, this URL can be relative to the current page.

Tip for advanced users: Create a % pathto(styles.css) % PHP variable in your RW Theme file and fill in the variable name here (without the quotation marks): $strStylesheet = "% pathto(styles.css) %;

Note

The text content of this element can be formatted by either entering raw HTML code or by using one of the supported WYSIWYG editors. Have a look at our tutorial on how to install the CKEditor.
WebYep Image
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this short text element have the same content on all pages or not. When set to false the Short Text element content is unique for a page, even if another element on a different page has the same name.
If set to true the content will be the same on all pages for the Rich Text elements that use the same Fieldname.

URL Linkto
The URL of a page this image should link to. If passed as an empty string (""), the image is not a link initially. But still can be made one when adding the Image online.

URL Window
Should the URL Link be opened in the same or in a new browser window. Double quotes ("") if you do not want to open the linked page in a new window or "_blank" if you want the link to open in a new window

This element is known as the "Open link in new window" in previous versions of this stack.

Width and Height
The width or height of the image or it's thumbnail or zero if it should not be considered. Set one value and leave the other at 0 to resize it with the corresponding value.

Display as thumbnail
Should the image be displayed as a thumbnail using the given width and height. Clicking the thumbnail will display a popup window with the original image.

Note
The image element supports the JavaScript effect library "Lightbox". When installed WebYep will automatically use it. Instead of opening a popup window when clicking a thumbnail image, it will then show the zoomed image using the Lightbox effect.

PHP Resizing can only be done, if the "GD" extension for PHP is installed on the server.
WebYep Image Gallery
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this short text element have the same content on all pages or not. When set to false the Short Text element content is unique for a page, even if another element on a different page has the same name.
If set to true the content will be the same on all pages for the Rich Text elements that use the same Fieldname.

Thumb Width and Height
The maximum width or height of the thumbnail. The thumbnail will be generated so that they are resized according to the image's proportions. The resulting thumbnail will have exactly either the specified width or height.

Columns and Column width
The number of columns and the width for listing the gallery image thumbnails. Have a look at the WebYep online documentation on how to style the gallery using CSS.

Image Width and Height
The maximum width or height of the image or zero if it should not be limited. If specified, the uploaded image will be proportionally resized so that it is not wider/higher than the specified value.

Note
Like the Image Element, the WebYep Image Gallery supports the JavaScript effect library "Lightbox". The tiny installation tutorial
explains how to install the Lightbox script.

PHP Resizing can only be done, if the "GD" extension for PHP is installed on the server.
WebYep Attachment
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this short text element have the same content on all pages or not. When set to false the Short Text element content is unique for a page, even if another element on a different page has the same name.
If set to true the content will be the same on all pages for the Rich Text elements that use the same Fieldname.


Note
With this WebYep Element you can attach documents to a web page, offering them for download. No other setting required than a possible upload limit on the server side.
WebYep Loop
Fieldname
Required unique name, each used WebYep element should have an unique name.

Show Loop buttons (Online)
Show or hide the loop control buttons.


Tsooj Media favorite
To repeat a block of HTML content and/or WebYep Elements in a page you can use the Loop Element. Simply define the number and order of the blocks, which can contain any HTML, JavaScript or PHP content like static text, images or any WebYep stack. The content of the repeated WebYep Elements will be different for every repetition.
WebYep Menu
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this short text element have the same content on all pages or not. When set to false the Short Text element content is unique for a page, even if another element on a different page has the same name.

Page URL
The URL of this or another page that the menu items should link to. Usually this will be the same page the menu element is on (thus "reloading" the same page, only with different content)

Page Window
Should the Page URL be opened in the same or in a new browser window. Use double quotes ("") if you do not want to open the linked page in a new window or "_blank" if you want the link to open in a new window


Note
The WebYep Menu Element is designed for the creation of sub-navigation menu pages but some people also use it for main navigation menu. The WebYep online documentation explains how to customize the look of the menu.
WebYep Loop
Edit Mode, complete custom stack
The WebYep Edit mode stack is a rewrite of the Logon Button but with the difference that it detects if an WebYep editor/administrator is logged on.

Hereby it is possible to hide the normally "visible" Logon Button from website visitors. So it is only shown to the Logged On content editors of the corresponding website.

Using this stack makes it possible to easily switch between preview and edit mode. Use it in combination with an administrative logon page where you place the Logon Button stack.

Not entirely clear how to use this stack? Have a look at our tutorial on how to use this stack.
WebYep Conditional
Show in edit mode
Check to show the content only during WebYep Edit Mode, uncheck if the content should only appear in Normal View mode.

You simply drag in the required content (stacks) and use the HUD to select if the content should be visible in WebYep's Edit or Normal View mode.


Usage
This stack comes in very handy if you are creating WebYep enabled websites for clients and you would like some guidelines to be visible when your client is logged into the CMS.
WebYep Long Text
Fieldname
Required unique name, each used WebYep element should have an unique name.

Same content on all pages
Should this Video element have the same content on all pages or not. When set to false the element content is unique for a page, even if another element on a different page has the same name. If set to true the content will be the same on all pages for the Video elements that use the same Fieldname.

Embed before ID, Embed after ID
The embed code as created by your video sharing service as it appears before/after the Video ID.

When used on your Website all you have to do is add the unique Video ID as shown by your Video sharing service.

The stack comes with Vimeo and YouTube examples.


Usage
The Video stack is great in combination with the Loop stack. This combination enables you to easily create your own video blog alike
page using your Video's hosted on for example Vimeo or YouTube.
WebYep Newsticker
Use Rich Text element
By default the Newsticker element has a WebYep Long Text element for the input of the Newsticker items, if you would like to use a Rich Text element for the input you should enable this option. Note that this also requires the installation of a Rich Text editor like e.g. CkEditor on your webserver.

Same content on all pages
Should the Newsticker element have the same content on all pages or not. When set to false the Newsticker element content is unique for a page. Note that you can use only one Newsticker stack on a single page.

Example text in edit mode
Should the Newsticker show an example text before the actual Newsticker text. When the Newsticker is used in small Extra Content Area's then it is probably wise to disable this example text.

Example text
* The Newsticker Requires an unordered list
* With the * character you can easily create list items
* That is in combination with the Long Text element
* <LINK:otherpage.php This turns the text into a link>
* With the Rich Text editor you use the UL button to create items
* Note that you should create the list items only for the first level

Other settings
All other settings of the WebYep Newsticker are described in detail on the Newsticker Styled product page.

WebYep stacks Tutorial


In most situations you see a small example on how to use a single stack. But since this is a full stacks pack and it
might be all new to you (WebYep as well), we've created “just a shiny tiny tutorial” to get you started.

The tutorial covers the following:

  • Installing WebYep using the online installer (thats wright you can do it all online)
  • Installing optional software like CKEditor and Lightbox
  • Installing and using the WebYep stacks
  • Advanced section in progress

Go ahead and have a look at the tutorial...


You don't need a tutorial? In that case, take the following steps:

  • Install WebYep using the online installer
  • Add the WebYep Init Code to your page prefix using the installed snippet (View | Show snippets)
  • Drag and drop the stacks (Logon Button stack always required)
  • Set page extension to php using the page inspector general tab
  • Upload the WebYep CMS enabled site to your webserver



Just a shiny tiny tutorial? Yep it's named after the WebYep slogan: “The Shiny Tiny WebCMS”

WebYep stacks FAQ

Although we always try to support our client and the rapidWeaver community you should note that some very specific support
questions about the used products should be addressed @ the respective owners / support team or therefore available forum:

  • WebYep specific question not related to these stacks, Support and Forum;
  • The Stacks plugin itself, Support and Wiki;
  • CKEditor Support;
  • The RapidWeaver Forum (where we answer questions or use our contact form).
Adding the WebYep Init Code (that makes the CMS active on your page) is really simple since together with the stacks
there is a snipped installed with the name "WebYep Init Code":

  • Open Page Inspector | Header | Prefix
  • View | Show snippets and type WebYep Init Code in the snippet search field
  • Drag and drop the snippet onto the Page Prefix field in the Page Inspector
When using the RapidWeaver Preview mode I get the following error message:

"WebYep: This page can not be displayed
Problem: The webyep-system folder was not found!"

WebYep is an online CMS and so the final result is viewable on your website only.
This is also the location where the WebYep CMS is installed and it stores all your content.
You can temporary change the Page extension from php to html so you are able to preview the layout of the page.
Changing the WebYep Login credentials is currently only possible by editing the "config-inc.php"
file on your webserver by using an ftp client like e.g. Cyberduck:

The config file is normally located in "your public html folder"/webyep-system.
Open the file and change the Name and Password as required:

// Username and password for edit mode.
// You can freely choose these and they must be entered by users after clicking
// the lock icon to logon before being allowed to start editing.

$webyep_sAdminName = "admin";
$webyep_sAdminPassword = "test";

More information about editing the configuration file and adding multiple logins is available in the Online WebYep Documentation.