plugin – computeraxe

WordPress Roles and Capabilities Trump User Levels

When someone signs up on a WordPress blog, the default role is as a subscriber. Once a subscriber logs in they can view and edit their profile, which includes things like username, password and contact info, but that’s all they can do. A subscriber can’t write a post, edit a page or upload any files. A site member would need higher privileges to do any of those things.

To handle various levels of user privilege, a system was developed in WordPress that was originally called the User Level System. In this system many capabilities were identified and these capabilities were classified according to the level of authority required or the privileges needed to perform certain tasks.

For example, a higher level of privilege was deemed necessary to edit another writer’s post. Accordingly, a user level that is now called Editor was given a variety of capabilities ranging from edit_others_posts to delete_published_posts. A lower user level, now called Author, was awarded a slimmer set of capabilities and it doesn’t include modifying others’ work.

Make Sure Site Visitors Can Register

To make sure your visitors can sign up to your blog, see the General Settings page under “New User Default Role” for a spin box that has the options of subscriber, administrator, editor, author and contributor. Default role is subscriber.

If you want people to be able to register on your blog, tick the Membership box next to “Anyone can register”, then click on the Save Changes button at the bottom of the page to make it so.

User Levels Supplanted by Roles

WordPress introduced user levels in version 1.5, but quickly replaced them in version 2.0 with Roles and Capabilities. User levels are deprecated since WP 3.0, but we may see them used in older plugins or themes, so it’s worth knowing about them. Basically, higher user levels have more privileges and can write, edit, post, publish and manage more than their lower-level counterparts.

The lowest user level equates with the subscriber role. Subscribers can sign in, see and modify their own profile, and besides that they can read posts and pages and comment.

The highest user level is reserved for the site administrator or blog owner and that would include level_0 up through level_10, the highest user level.

Prior versions of WordPress had 11 levels from level_0 to level_10, with level_0 being the lowest level and least capable, while level_10 users were able to do anything and everything with the WordPress blog.

WordPress defines users as the blog visitors who register and login to the web site. The Administrator is created during installation of the WordPress software. The Admin level has absolute power over all other users being able to add or delete users, edit their writings and promote or demote anyone to a different role.

Roles correspond to the old user level system like so:

Subscriber = level_0
Contributor = level_0, level_1
Author = level_0 to level_2
Editor = level_0 to level_7
Admin = level_0 to level_10

Many blog owners don’t need any special roles as they are the Admin and they control everything with their personal online spaces. Beyond the Admin there is a new level called Super Admin that comes into play when a network of sites needs to be administered. Multisite WordPress installations came into use as user levels were being deprecated, so there is no equivalent user level number for the Super Admin.

Capabilities for Standard Roles

The standard roles in WordPress are Administrator, Editor, Author, Contributor and Subscriber, in order of decreasing privilege.

The Admin user is created when WordPress is installed. Administrators have all capabilities, including the privileges to install, activate, edit and delete plugins, install, delete, edit or switch themes, edit or delete any post or page whether published or private, edit the dashboard, manage users, categories, links, options, comments and files, and import or export parts or all of the WordPress blog.

Editors have fewer privileges than admins, but they have the powers to manage their own and other’s posts. They can edit and delete pages or posts whether they’re published or private. Editors have the capabilities to manage categories, links and comments, and they can upload files. Editors can post code in pages, posts and comments, so make sure you trust your editors because they can post HTML markup or even JavaScript to your blog.

Authors have fewer privileges than editors and they all center around writing posts. Authors can publish, edit and delete the posts they create, even published ones. However, they cannot edit or delete other’s posts. Authors cannot create or alter Pages. They can upload files to add new media, and of course, read and comment on posts.

Contributors have even fewer privileges than authors. Contributors can edit, delete and read their own posts. Posts created by Contributors will be held in moderation for an Editor to approve and publish.

Finally, Subscribers have but two capabilities. They can read posts and they can view and update their own profile.

Modifying and Managing Roles

Several WordPress plugins exist for managing roles and capabilities. The plugins listed here get very high marks at the WordPress Plugin Directory.

Members Plugin

Members plugin is described as an “extensive role and capability management system” that allows you to create, edit and delete roles and capabilities for those roles. Using shortcodes, this plugin lets you control access to your content, including the ability to make the entire site and its RSS feed private.

Role Scoper Plugin

Role Scoper plugin is a complete solution for assigning permissions and roles to specific pages, posts or categories. Independent of WP roles, users of any level can be elevated to read or edit any content. Alternatively, content can be restricted from any user regardless of their WP roles or capabilities.

User Access Manager Plugin

User Access Manager plugin lets you “manage the access to your posts, pages and files”. Reading and editing permissions for pages and posts are assigned via user groups. Registered users are placed into user groups for which appropriate access rights have been created. User groups can supplement or take the place of WP roles for providing or preventing access to pages and posts.

Advanced Access Manager Plugin

Advanced Access Manager plugin is a “powerful and flexible Access Control tool” that supports single and multisite WordPress installations. Roles can be created and capabilities assigned per role. The Dashboard and Admin menu can be filtered to show only the important bits for each role.

User Role Editor Plugin

User Role Editor plugin allows you to create new roles and customize their capabilities. Options include setting the default role for new users, removing capabilities from users, deleting roles no longer needed, and changing capabilities on a per user basis.

Gary’s ultimate guide for assigning user levels to roles and capabilities is most useful for those wanting to modify or create plugins and themes. Many code snippets are shared in this post for assigning capabilities, testing whether a user has a certain capability, and adding new roles and capabilities.

Slideshow Loading Problems Solved in jQuery Cycle

When it comes to JavaScript components that act on elements of the page, it is highly important to have those elements in place before the script tries to manipulate them, else things won’t work as intended. So, that begs the question, “What’s the best way to have JavaScript run on my page?” In this example we’ll focus on handling javascript while making slideshows with the jQuery Cycle plugin.

At any rate we want our pages to be seen by the visitor right away. We know if it takes more than a couple of seconds for anything to appear on the screen, the visitor is likely to click away to another site. Remember, text appears quickly when it’s not part of a table. The whole table has to be ready before you’ll see the table, so don’t use tables for design purposes, especially nested tables. Save your tables for presenting data.

A problem with big pages having slideshows is that if the page is not ready when a script tries to manipulate things, the effects may be all wrong. For example, when a script calculates the center position for an image it may get the positioning wrong, especially if all the images in the slideshow are not of the same size.

So, how do we improve our slideshow for the masses? We need to tell the javascript when to do its magic. In this example we’ll use this approach:

Perform initial actions with the .ready() method. Actions in this case are to hide images with the .hide() method until they are called for by the script.
Run the slideshow after the content has loaded with the .load() method.
Use a function to calculate the center for each image.
Apply the function with the before option in jQuery Cycle.

A previous post on centering slideshows with jQuery Cycle put all the javascript inside a .ready() statement. For many scripts this would be just fine, but for the slideshow it resulted in the action starting up before all the images were available.

For this example the slideshow is marked up as a group of images inside a <div> that has been assigned an id for JS targeting, #big_show, and a class for CSS targeting, .photos.

HTML Markup:

[plain]

[/plain]

Hide Images While Page Loads

Because it may take a while to load up all the photos for the slideshow, and everything else on the page, hide the photos except for the first one to start. Use a .ready() statement to hide the photos because we want to do that right away. Put everything in the .ready() method that you want to run first, even before the rest of the page or content has loaded. The .ready() function is a jQuery construct that allows you to bring functionality to the page before all the content has loaded. That way a page with lot of images can be useful even before all the images are visible.

For hiding images use the .ready() function so that this task will occur as soon as possible.

[crayon]
$(document).ready(function() {
$(‘#s1 img:gt(0)’).hide(); // hides all images with index greater than 0, so it shows the first image only – in one JS/jQuery call

$(‘#s2 img’).hide(); // hides all images
$(‘#s2 img:first’).show(); // shows the first image

$(‘#s3 img’).hide(); // hides all images
$(‘#s3 img:eq(0)’).show(); // shows the image with index equal to 0
});
[/crayon]

Many selectors could be used to target the first element in a series and the example above shows three ways of doing so for three different slideshows, #s1, #s2 and #s3. The outcome of each is the same in that only the first image is shown until the rest of the slideshow is loaded.

Control Slideshow Action After Window Loads

It makes sense to run a slideshow only when all the components for the show are present. To do that run Cycle with a .load() statement so that the slideshow waits to start until all of the images are loaded.

[crayon]
$(window).load(function() {
$(‘#big_show’).cycle({
fx: ‘fadeZoom’,
timeout: 2000,
before: onBefore
});
});
[/crayon]

If you have a big slide show with lots of images, you might want to present an animated loading image until the slideshow starts.

Calculate Image Size for Centering in Slideshow

Take a look at the solution provided by “malsup” for users of his Cycle plugin:

[crayon]
function onBefore(curr,next,opts) {
var $slide = $(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (400 – h) / 2,
marginLeft: (300 – w) / 2
});
};
[/crayon]

Basically, what his code is doing is creating a function that will run before any slides are manipulated by Cycle. The purpose of the onBefore function is to calculate the correct margins for images and set the CSS parameters margin-top and margin-left for centering the images.

The onBefore function creates a variable called $slide to hold an array of the parameters of the $(next) element in the slideshow. The variables w and h are set to the width and height of said element via the $slide.outerWidth() and $slide.outerHeight() methods, respectively.

Finally, the margins are calculated from knowing the width and height of the slide container as set in the CSS (in this example 400 px and 300 px) and subtracting the slide’s width (w) and height (h) values, respectively. The margins only need to have half of the total margin value to accommodate both sides of the box, so the difference is divided by 2.

Use Cycle’s Before Option to Apply Centering Function

Using the onBefore function with Cycle’s before option works beautifully with images of different sizes, see line 5 of the .load() method above. Margins are set using the .css() method after they are calculated by the onBefore function.

CSS:

[plain]
#big_show {
height: 400px;
width: 300px;
text-align: center;
background-color: #f3c;
}
.photos img {
margin: 0;
padding: 4px;
border: 1px solid #ccc;
background-color: #eee;
max-width: 290px;
max-height: 390px;
}
[/plain]

You have to specify some CSS to get this thing to work right, namely set the width and height on the slide container and slides themselves.

Setting the max-width and max-height for the images helps to keep them inside of the container. Note that adding up the padding and border for both sides of the box is 10 px of the slideshow box that can’t be used to show an image. Therefore, the maximum image dimensions are the overall width or height minus 10 px. By accounting for the padding and border sizes a large image won’t overflow its container.

Any comments on this improved slideshow using Cycle plugin with jQuery?

Slideshow Image Captions with jQuery Cycle

If a picture is worth a thousand words, a photo slideshow would be worth a whole book. Images can be interpreted in many ways and without some accompanying text or captions for the images in a slide show, you force the visitor to draw their own conclusions about what they are viewing. In the art world this may be ok and perhaps what you’re striving for, but most of the time we want to provide additional information with images so the visitor really knows what the imagery is all about.

Some images are fairly meaningless without captions. Were those pictures taken before or after the event? And is that really Aunt Tillie as a hip youngster?! You get the idea…captions help us to tell our stories. They can be as short and sweet as you like or more explanatory in nature. It just depends on your purpose as to what kinds of captions your visitors would benefit from.

Presented here are three examples for producing image captions in slideshows with jQuery Cycle.

To make an image caption for jQuery Cycle slideshows, the examples that follow depend on passing selectors, like this.alt, to the .html() method to pick up the alt text from each <img>. Also, we’re going to use Cycle’s after and before options to specify our image captions.

Example 1: Use Cycle’s after option to specify a caption using the image’s alt text. Caption will appear after the slide is in place.

[crayon]
$(‘#slide_after’).cycle({
fx: ‘shuffle’,
timeout: 2000,
slideExpr: ‘img’,
after: function() {
$(‘#caption’).html(this.alt);
}
});
[/crayon]

Here, the after option takes the result of an anonymous function as its value. The function() inserts the alt text from this, the current image, into #caption. In the HTML markup below notice that #caption identifies a paragraph below the images.

Example 1 HTML Markup:

[plain]

[/plain]

Example 1 Slideshow:

Example 2: Use Cycle’s before option to specify a caption using the image’s alt text. Caption will appear before the next slide.

[crayon]
$(‘#slide_before’).cycle({
fx: ‘shuffle’,
timeout: 2000,
slideExpr: ‘img’,
before: function() {
$(‘#caption2’).html(this.alt);
}
});
[/crayon]

The only things changed from Example 1 are that we’re using Cycle’s before option instead of the after option and the captions are placed at the top of the images instead of below them.

Example 2 HTML Markup:

[plain]

[/plain]

Example 2 Slideshow:

Example 3: Show slide number and total count of slides in addition to the image’s alt text for a caption.

To get the slide numbers we can take advantage of a couple of variables that keep track of the current slide and the number of total slides. We’ll pass three Cycle variables (curr,next,opts) to a new function.

[crayon]
$(‘#slideboth’).cycle({
fx: ‘fadeZoom’,
timeout: 2000,
slideExpr: ‘img’,
after: slideAfter,
before: function() {
$(‘#caption3’).html(this.alt);
}
});

function slideAfter(curr,next,opts) {
var caption_count = ‘Image ‘ + (opts.currSlide + 1) + ‘ of ‘ + opts.slideCount;
$(‘#caption4’).html(caption_count);
}
[/crayon]

There’s something new going on here. A named function, slideAfter, is the value for the after option. Using a function we can make calculations and assignments to create some interesting captions. Cycle’s before option also may take a function as its value.

The function slideAfter calculates and specifies the number of the current image and the total number of slides in the slideshow. The calculated values are assigned to a variable, caption_count, which is then used as the image caption.

Example 3 HTML Markup:

[plain]

()

[/plain]

In this example #caption5 is used for CSS positioning, while #caption3 and #caption4 are targeted by the JavaScript in creating the caption.

Example 3 Slideshow:

()

Examples borrowed from jQuery Cycle image count caption demo.

These examples showed how to create captions for images presented in slideshows with the jQuery Cycle plugin.

Specify Children for jQuery Cycle Slideshows

The jQuery Cycle plugin is a versatile JavaScript plugin for making slideshows.

The default behavior is to fade in a new slide, let the viewer see the slide for four seconds, then fade out that slide as the next one fades in. Slides are faded in and out continuously and in a sequential manner. Unless specified in the options, a slideshow starts with the first slide and cycles through all slides, then loops back to the first slide, running continuously.

Options are available to change every aspect of the slideshow behavior, so the kind and timing of the transitions can be easily changed, as well as the starting and ending slides of the show.

It’s beyond the scope of this post to review all the Cycle options, but one option that may come in handy is the slideExpr option. The default value is ‘NULL‘ and it’s described as the “expression for selecting slides (if something other than all children is required)”.

So far, there are two instances where slideExpr has saved my day. Basically, it lets you specify the children of the slideshow and that’s important if you’re using WordPress or if you’re wrapping slides in links.

WordPress or Other CMS

Using JavaScript inside WordPress posts can be tricky. One has to properly register and queue up the scripts with the methods wp_register_script() and wp_enqueue_script() instead of inserting <script> tags in the page headers.

Still, things may not look right when a post is previewed because of the way that WordPress assembles the pages we see on the World Wide Web. WordPress or another content management system (CMS) may insert line breaks that interrupt the flow of a slideshow.

Remember, with the Cycle plugin every child element inside the slideshow container will become a slide. That means every CMS inserted <br /> will be treated as a slide. This produces a slideshow with long, blank pauses in between the actual slides, like the slideshow on the left below, #show_a.

Use slideExpr to specify the children elements for slideshows in WordPress. This avoids extraneous elements from the content management system from being interpreted as slides. See the slideshow on the right below, #show_b.

HTML Markup:

[plain]

[/plain]

The left slideshow, #show_a, shows a few different transitions without using slideExpr, which gives a background-colored pause or blank pause in between each slide. This slideshow assumes the first-level children are the elements to be manipulated in the slideshow.

The right slideshow, #show_b, shows the same transitions with slideExpr set to ‘img’. This gives the expected behavior where only the images, <img>, are treated as slides, not any other element that may be inserted by WordPress or by the developer.

JavaScript:

[crayon]
$(‘#show_a’).cycle({
fx: ‘fade,toss,fadeZoom’,
speed: 700,
timeout: 2000
});

$(‘#show_b’).cycle({
fx: ‘fade,toss,fadeZoom’,
speed: 700,
timeout: 2000,
slideExpr: ‘img’
});
[/crayon]

Wrapping slides

If you’re not using WordPress or another CMS, there may still be unexpected behavior with the Cycle plugin with respect to children of the slide show.

Any children in a container element can be used as a slide with the jQuery Cycle plugin. Designers can get as fancy or as funky as they want to with their slideshows because they ultimately have complete control. If you want to wrap each image in an anchor which is wrapped in a styling div, that’s ok.

Just remember to use slideExpr: ‘img’ if it is the images that you want to transition from slide to slide. HTML Markup is very similar to that above with different container ids for JavaScript and CSS targeting.

In this example the slideshow on the left, #show_1, uses the ‘fadeZoom’ transition effect without slideExpr. Slideshow #show_2 on the right uses the ‘fadeZoom’ transition effect with slideExpr: ‘img’. Note how the actual transition effect is different depending on which element is serving as the slide.

JavaScript:

[crayon]
$(‘#show_1’).cycle({
fx: ‘fadeZoom’,
speedIn: 700,
speedOut: 1200,
timeout: 2000
});

$(‘#show_2’).cycle({
fx: ‘fadeZoom’,
speedIn: 700,
speedOut: 1200,
timeout: 2000,
slideExpr: ‘img’
});
[/crayon]

Note the empty paragraph in the HTML markup for each slideshow. Without specifying the slideExpr option, as in #show_1, the empty paragraph is treated as a slide and a blank space is shown for it. Slideshow #show_2 specifies that the images are to be the sliding elements, so no blank space is seen.

Certain transition effects problems may appear when wrapping slides with links in jQuery Cycle. Using the slideExpr option is an easy solution.