Posts from "2011"

YUI 3.2 and earlier had no browser based detection loading, and worked well with YUI PHP Loader, allowing for Exponent to load YUI dependencies on the server side. Since the introduction of YUI 3.3.0, which loads (and skips loading) JavaScript based on your browser, it's now only YUI 2.x that can take advantage of server-side dependency calculation and loading, since PHP has no sure-fire way to detect the user's browser. The result: Exponent YUI 2 loading up on the server, and YUI 3 loading via YUI3's built-in Loader.

It's always been the goal to migrate fully to YUI 3 once certain aspects of the library offer comparable widgets to YUI 2. Until we can fully drop YUI 2 from the system, we can at least streamline the YUI loading mechanisms by making use of the YUI 2in3 library. YUI 2in3 is written by the YUI team as a compatibility layer that allows the loading and usage of the YUI 2 library within the YUI 3 ecosystem.

Integrating YUI 2in3 offered many advantages compared to sticking with YUI PHP loader. For one, it streamlines using the YUI environment, setting up a general usage pattern for using both versions of YUI. It also drops 2 external library dependencies: YUI PHP Loader, and Lissa (ties YUI PHP Loader together with minify).

With these changes, however, you stand a good chance of breaking existing views making use of YUI 2 code. We've corrected the themes shipping with Exponent that previously made use of this, like cool waters override for YUI Top Nav.

To help alleviate some migration pains, we've added some helper mechanisms to the {script} plugin, looking for the yui2mods or yuimodules parameter, parsing out whichever modules were passed, and plugging them in to yui3 wrapper code for you. This helps keep 90% of code from breaking, but isn't bullet-proof. Any custom views should definitely be adjusted.

Here's a gist of the old vs new pattern:

A good read that helped me integrate YUI2in3:
http://blog.endpoint.com/2011/02/locally-served-yui3.html

Here are some basics of using git and github to initially get or update the code to your site.  I've found this is an easy way to initial install, and the perform updates on my web sites.  There is a little bit of overhead (~105 MBytes), however the reduction in effort is worth it in most cases.

We’ll assume you have shell access to the server, and git is installed (‘git –v’ should work).

To (initially) Install ExponentCMS as your website:

• ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
• To get the latest released code contained in the “master” or default code branch:

git clone git://github.com/exponentcms/exponent-cms.git .

• HOWEVER, the folder MUST be empty for the clone to work.  The work-around is to leave the "." off the end of that last command and then mv it to the root folder

  • git clone git://github.com/exponentcms/exponent-cms.git

  • mv exponent-cms/* .

• Launch the web site installer and complete the installation. (www.mysite.org/install/index.php)

• Install any custom themes or other local mods.

To update the code on your site to the most recent released version:

• ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
• First save any local modifications to prevent any (merge) conflicts:

git stash save

• Next, download and merge the updated code:

git pull

• Next, restore any local modifications, if you choose (optional).  If you are (still) using a standard/shipped theme your theme configuration settings were reset to default unless you restore them):

git stash pop

• Then, log into your site as an admin user.  It's always a good idea to run an 'upgrade' so the database and any other changes are incorporated. (www.mysite.org/install/index.php)  In many cases, you'll see a message recommending the upgrade with a link to start the upgrade process.

To switch the code on your site to a development or pre-release testing version:

• ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
• First save any local modifications in the current (master) branch:

git stash save

• Next, switch to and download the development/testing code:
• To get the bleeding edge code contained in the “develop” branch:

git checkout develop

• (or) To get and help test a version prior to its release contained in the “release/xxx” branch:

git checkout release/xxx

• (of course you’ll need to know the release tag or do a ‘git branch –a’ to list the branches)
• Please bear in mind the release/xxx branch is temporary and will only exist between code freeze and code release.  The “xxx” will be the actual release tag like “v2.0.8”
• If you’re having problems establishing the develop branch when working from an earlier clone:

git fetch
git checkout –-track –b develop origin/develop
git pull

• If you’re having problems establishing the release/xxx branch when working from an earlier clone:

git fetch
git checkout –-track –b release/xxx origin/release/xxx
git pull

• If you are using a custom theme or modifications (in the custom theme folder), your customizations remain intact.  However, if you were modifying system code, it'll have been replaced by the code from the git repo.
• Log into your site as an admin user and run the upgrade process (www.mysite.org/install/index.php)

To switch the code on your site BACK to the release version:

• ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
• First save any local modifications to your development/testing branch:

git stash save

• Next, switch to the release code branch:

git checkout master

• Next, download any updated code:

git pull
git stash pop

 

As a general rule of thumb, any images that will be placed into text modules should be resized using an external image editing program such as Microsoft Picture Manager or Picasa before it is uploaded to the Exponent CMS File Manager.

Resizing your images to the exact pixel dimensions that they will appear on the website helps:

• Reduce the amount of time it takes to upload the image to the File Manager
• Optimize loading time for the page the image(s) is on
• Control the amount of disk space and bandwidth that is being used by the website

Example Image that Needs Resized

The image below is a prime example of an image that should have been resized before it was uploaded to the File Manager and inserted into the text module. The image looks slightly distorted and hangs over the side nearly into the next content module beside it.

By right clicking on the image and selecting “View Image” the image will open up in a new tab and show the actual size of the image.

As you can see in the image above, is the actual size of the image is substantially larger (1085px wide by 695 px tall in reality) than how it appears in the text box that is only 273px wide. This image should have been resized to 273px wide by 185px tall.

Resizing Images

To properly resize the image you must first open it up in your picture editing software. For the purposes of this Blog Tip, I'm using Microsoft Picture Manager.

Once you've opened the image in Picture Manager, select the “Edit Picture” button at the top of the editor.

After you've selected “Edit Pictures,” on the right side you can select to “Resize” the image.

Once you select "Resize" on the right hand column, you have the option to type in the new pixel dimension size that you want for the image, or you can reduce the image size by percentage until you reach the dimensions that fit the space that your image will be placed in.

Once your image has reached the desired size, you can choose to save over the existing image or save a new smaller version of the image.

Once you've re-saved your image to the size it needs to be on the website, you can then upload it to the Exponent CMS File Manager and place it onto the site. Read more on uploading files to the Exponent CMS File Manager.

As you can see below, the new resized image is crisper and no longer hangs outside of the boundaries of the text module. Read more on Inserting Images into Text Modules.

This is the proper way to manage images on your Exponent CMS website!

To insert an image from the Exponent CMS File Manager into a Text module, you must first click the edit icon on the text module to begin editing the module.

Once you've clicked the edit icon, you will be directed to Exponent's text editor:

To insert an image into a text module, you must first place your cursor before the sentence in which you want the photo to flow.

Once you've selected where in the text you want the image to flow, you can then go and select the image you want by clicking on the Insert/Edit Image button in the text editor tool bar.

Once you've clicked the Insert/Edit Image button, you will be prompted with an Insert/Edit Image dialogue box. To select the image you want to insert into the module, you must then click the “Browse Server” button.

After you click the “Browse Server” Button, the Exponent CMS File Manager will open, allowing you to navigate to the image you want to insert (Read more information on how to upload new files to the Exponent CMS File Manager):

To select the image you wish to insert into the text module, you must find the image in the File Manager and then click on the Green arrow next to the image underneath the “Actions” Column of the File Manager:

After you've selected your image, the Exponent CMS File Manager will automatically close and your image will be inserted into the Insert/Edit Image dialogue box where you can select positioning, linking and padding for your image as well as giving your image an Alternative text title:

The Image properties dialogue box also has two tabs called "Links" and "Advanced" where you have other image configuration options. If you want to embed a link into the image, click on the "Link" tab. Here you can define the URL you'd like to link to and also determine whether that link should open up into a new window.

On the Advanced tab, you have the option to type in a pre-determined CSS style class for your image such as "border" if there has been a CSS style sheet created that puts a border around your images. Here you can also add an Advisory title for the search engines to let them know what the image is that's being displayed.

Once you've finished configuring your image, click the “OK” button. You will now see the image pop into your text editor in the position you've defined:

After you've clicked save, you're all done! Your image has successfully been inserted into the module and will appear on the page:

Exponent CMS offers a robust permissions system giving Site Administrators the power to easily grant Viewing and Editing rights on a granular level. It is very easy to create these Password Protected pages using any combination of usernames, passwords, and group rights.

The permission system for Exponent CMS allows Site Administrators to create both User and Group accounts with varying levels of administrative and viewing privileges.

For example, Site Admins have the ability to create a “Members Only” group and grant that group permission to view a certain set of Password Protected pages on your website. It is also possible to grant that same group of people or an individual user on the website the right to administrate a particular page or piece of content on the website.

The process Site Administrators must follow in order to achieve this powerful feature in Exponent CMS is:

1. Create the Individual User Accounts necessary
2. Create the Group Account that will receive the special Viewing or Editing permissions
3. Assign the Individual Users to the Group Account
4. Configure the Page or Set of Pages that you want protected to allow these permissions

Creating Individual User Accounts

The first step in creating Password Protected pages on your website is creating Individual User Accounts for users to login with.

Site Administrators can access Exponent's User Account Manager by clicking on the Exponent CMS logo on the Administrative Tool Bar at the top of the website. After clicking on the Exponent CMS logo, one of the drop down menu options is “User Management”. When hovering your cursor over “User Management” there are additional flyout menut options, one called “User Accounts”. To create an Individual User Account, select this menu item.

Once Site Administrators have clicked “User Accounts” they will be redirected to the “Manage Users” page. Here, the Site Administrator can not only create new user accounts but can also:

1. Reset passwords
2. Edit Usernames and Email Addresses
3. Delete User Accounts

For the purposes of Creating Password Protected Sections on your Exponent CMS Website, this tutorial will highlight how to Add a new User Account. To do this Site Administrators must first click the “Add” link above the User Accounts table.
Once the Site Administrator selects the “Add” link, they will be directed to the “Create New User Account” form. Here, the Site Administrator will configure the new account with:

1. A Username
2. A Password
3. An Email Address
4. A First and Last Name
5. Whether or not the new Account has Full Administrator Privileges.

The Site Administrator will need to create an Individual User Account for all users who will need to be assigned to the Group Account to view the Password Protected Section on the website.

Creating User Group Accounts

After creating each of the Individual User Accounts, the next step in creating Password Protected pages on your website is creating a User Group Account for the Individual Users to be assigned to.

Site Administrators can access Exponent's User Group Account Manager by clicking on the Exponent CMS logo on the Administrative Tool Bar at the top of the website. After clicking on the Exponent CMS logo, one of the drop down menu options is “User Management”. When hovering your cursor over “User Management” there are additional flyout menut options, one called “Group Accounts”. To create a User Group Account, select this menu item.

Once Site Administrators have clicked “Group Accounts” they will be redirected to the “Manage User Groups” page.

Here, the Site Administrator can not only create new User Group Accounts but can also:

1. Manage Group Membership
2. Edit Group Names, Descriptions and Settings
3. Delete User Groups

For the purposes of Creating Password Protected Sections on your Exponent CMS Website, this tutorial will highlight how to Add a new User Group Account. To do this Site Administrators must first click the “Create a New User Group” link above the User Group Accounts table.

Once the Site Administrator selects the “Create a New User Group” link, they will be directed to the “Create User Group” form. Here, the Site Administrator will configure the new Group with:

1. A Group Name
2. A Description of the Group
3. Whether or not new Individual User Accounts should automatically become members of the group with their new account is created.

Once the Site Administrator has created the new User Group, they must next Manage Group Membership.

To manage Group Members, Site Administrators must click on the Member Management icon next to the particular Group they want to Manage:

Once the Site Administrator has selected to manage the membership of a particular group, they will be directed to the Group Management Page.

Here, the Site Administrator can select Individual User Accounts to be members of that group, or grant certain Individual Users permission to Manage Users for that Group.

Now that Individual Users have been assigned to the Group Account, the Group account can now be assigned permission to View a section of Password Protected pages.

Assigning Group Permissions to a Page

The first step when assigning Groups with permissions to view or edit a page or set of pages on a website is for Site Administrators to go to Exponent's Page Manager.

To access the Page Manager, click on “Pages” on the Administrative Tool Bar at the top of the Website. Once “Pages” has been selected, click on “Manage All Pages.”

This will direct Site Administrators to the Page Manager. Once the Site Administrator has arrived at the Page Manager, they must first make sure that the page(s) they wish to Password Protect is marked as “Non Public” and is not able to be viewed by just any site visitors.

To configure a page as “Non Public”, the Site Administrator must Edit the page configuration for that page by right clicking on the page and selecting “Edit this Page.”

After the Site Administrator has selected “Edit this Page” they will be redirected to the page configuration form where they can uncheck the Public box and resave the page so it is no longer available to the general public.

Next, the Site Administrator must then go back to the Page Manager and again right click on the page they want to assign the permissions to. This time after right clicking on the page, the Site Administrator will select “Manage Group Permissions.”

Once “Manage Group Permissions” has been selected, the Site Administrator will be directed to the Group Permission Management form where they can select which group has Viewing or Management rights on that particular page.

The Site Administrator also has the ability to assign Individual User Accounts the ability to View or Edit a particular section on the site by Assigning User Permissions to that page.

To do so, the Site Administrator must go to the Page Manager and right click on the page they want to assign the permissions to. After right clicking, the Site Administrator will select “Manage User Permissions.”

Once “Manage User Permissions” has been selected, the Site Administrator will be directed to the User Permission Management form where they can select which Users have Viewing or Management rights on that particular page.

Once the appropriate permissions have been assigned to their pages, the Users will be able to login to the Website with the Individual User Accounts created by the Site Administrators and will be able to View or Edit those select pages.

The first in our series of my How To tutorials for Site Administrators starts with the process of how to upload files to the file manager on an Exponent CMS website.

To get started, the Exponent CMS administrative tool bar at the top of the page has a tab called “Files”

If you click on “Files” you have two options. If you want to immediately upload files to the file server, you can select “Upload Files”. The other option is to select the “File Manager” button which allows you to view all the files on the file server in the File Manager.

If you've selected to view all of the files and clicked the “File Manager” option, you can see a paginated listing of all the files on your site's file server.

The Exponent file manager gives you the option of being able to search for a particular file based on keywords. For example, if you are looking for a particular file on the server and you know that it has the word “presentation” in it then you can type in “presentation” into the search box and the file manager will filter all files that have the word “presentation” in the file name or in the Meta Title or Alt Text Title of the file.

If you want to upload new files to the file server, there is a button in the upper right hand corner of the File Manager that says “Upload Files” ... You can also access the “Upload Files” page by selecting “Upload Files from the administration tool bar as well.

Once you've selected “Upload Files” you must select the files from your computer that you wish to upload to the file server. To do this click on the “Select Files” button in the upper right corner of the “Upload Files” page.

Once you've clicked on the “Select Files” button you will be given a dialogue box to navigate to the files you want to upload on your computer's Desktop. From there, you can select as many files as you want to upload. In the Exponent CMS 2.0 codeline, you're no longer limited to uploading just one file at a time! Click “Open” once you're done selecting your files.

Once you've selected your files, you will now see them listed in the files queue to be uploaded. To finish uploading the files, now click on “Upload Files” in the upper right hand corner.

Once your files are done uploading, all of the bars underneath “Upload progress” will be red.

And now you know how to upload new images, PDFs and word documents to your Exponent CMS website!