If you plan to offer material on your website exclusively to designated users, then creating a member login section is a necessity. Luckily, HiFi makes it simple enough to set up a login area in a matter of minutes.

To start creating your login page, create a blank page in your site tree and title it something like “Member Login.”

The default HiFi template comes with a pre-built login form that appears anytime a user who is not logged in or registered attempts to access content only visible to site users. You can find the login.html file in the hifi > user folder of your template, or simply create a new one.

In the login.html file you’ll see the following form:

<form id="login" action="/hifi/login" method="post">
	<fieldset>
		<label for="email">Email</label>
		<input type="text" class="text" id="email" name="email" value="{{email}}"/>
		<label for="password">Password</label>             
	 	<input type="password" class="text" id="password" name="password" value=""/>
		<input type="hidden" name="redirect" value="{{redirect}}" />
		<fieldset class="checkbox">
			<label><input type="checkbox" name="staySignedIn" value="false"/> Remember me</label>
		</fieldset>        
	</fieldset>         
	<fieldset class="submit">
		<input type="submit" value="Login"/>
 	</fieldset>
</form>

Feel free to change the fieldsets to those that apply to your users. For instance, maybe you’d like to replace the email input with a username field. Once your form is set, copy this code.

Next, you’ll need to create a custom template file for your “Member Login” page. Paste the form you just copied into the correct content area and change the value of the redirect input field.

For example, if you wanted to redirect users to the homepage after they have logged in, your code would look like so:

<input type="hidden" name="redirect" value="/"/>

That’s it! If you’d like to test the functionality of your login page make sure you are completely logged out of the site or open it in a new browser window.

Overview

Easily add static or animated captions to your images.

Requirements

Javascript and a jQuery library are required to use one of an image’s attributes to build the markup for a caption.

Components

CSS:

.caption{
	font-size:12px;
	font-weight:bold;
	padding:0 0 20px 0;
}

Javascript:

$('img').jcaption({
	copyStyle: true
});

Installation

Insert an image (maybe in a page or post) and fill in the image description, or alt attribute, with the text you would like to appear as the caption. Then upload the jcaption.js file to your theme and include it in your desired template. Add the styles included above to the stylesheet and the javascript directly to the template so you can add or edit the options that are provided below. 

If you are floating your images, giving them padding or adding any other style, be sure to keep copyStyle set to “true” so the caption class does not override your image styles. 

Options

$('img').jcaption({
 
	// Element to wrap the image and caption in
	wrapperElement: 'div',

	// Class for wrapper element
	wrapperClass: 'caption',

	// Caption Element
	captionElement: 'p',

	// Attribute of image to use as caption source
	imageAttr: 'alt',

	// If true, it checks to make sure there is caption copy before running on each image
	requireText: true,

	// Should inline style be copied from img element to wrapper
	copyStyle: false,

	// Strip inline style from image
	removeStyle: true,

	// Strip align attribute from image
	removeAlign: true,

	// Assign the value of the image's align attribute as a class to the wrapper
	copyAlignmentToClass: false,

	// Assign the value of the image's float value as a class to the wrapper
	copyFloatToClass: true,

	// Assign a width to the wrapper that matches the image
	autoWidth: true,

	// Animate on hover over the image
	animate: false,

	// Show Animation
	show: {opacity: 'show'},
	showDuration: 200,

	// Hide Animation
	hide: {opacity: 'hide'},
	hideDuration: 200
});