<img src="images/stories/demo/general/ext/rokgallery.png" class="floatleft" alt="RokGallery" width="80" height="80"/>
<p><strong>RokGallery</strong> is a ground-up revolutionary gallery extension, developed to be hugely flexible, customizable and thus extendable far into the future.</p>

<h3>Description</h3>

<p>The system itself is built on a custom tag-based architecture with the ability to have multiple tag-based galleries. RokGallery uses design and concepts that have been traditionally reserved for platform-native applications and are for the first time making their way into a web environment. For example, you will not have to resize images, or make thumbs before using them in RokGallery, just upload the raw image and use the RokGallery slice editor to resize and crop the images. This non-destructive editing method allows you to create and edit your image size, cropped view, etc, at any point without having to reupload or recreate your image in external photo editing software.</p>

<p>Other features include an all-new multi-file image upload mechanism that incorporates the latest HTML5 drag-and-drop upload functionality, but can also fall back to Flash if your browser doesn’t yet support this feature. Compound filtering can be used to isolate specific images you are looking for and a sophisticated Jobs Manager handles processes like image resizing in the background so you can get on with your work without having to wait for time-consuming image computations to complete.</p>

<p>Access the RokGallery Component at <strong>Admin &rarr; Components &rarr; RokGallery</strong></p>

<p><a href="images/stories/demo/rokgallery/rokgallery1_large.jpg" rel="rokbox[900 262]" title="RokGallery :: Introduction to the Controls"><img src="images/stories/demo/rokgallery/rokgallery1.jpg" alt="RokGallery" width="580" height="170" class="rt-image" /></a></p>

<p class="notice">This section is an introduction to the general interface of RokGallery, specific instructions on the functions, such as filtering, will be explained below.</p>

<div class="rt-demo-grid-3 nomarginleft">
<p><em class="bold">#1 Image Controls</em></p>
<ul class="list-icon rightarrow">
	<li>Publish</li>
	<li>Unpublish</li>
	<li>Tag</li>
	<li>Delete</li>
</ul></div>

<div class="rt-demo-grid-5">
<p><em class="bold">#2 Gallery Controls</em></p>
<ul class="list-icon rightarrow">
	<li><strong>Jobs:</strong> A log of all previous and current operations, such as imports.</li>
	<li><strong>Galleries:</strong> Create, Delete and Manage all tag galleries.</li>
	<li><strong>Settings:</strong> Configuration the general aspects of RokGallery.</li>
	<li><strong>Upload:</strong> A HTML5/Flash drag and drop image uploader.</li>
</ul></div>

<div class="clear"></div>

<p><em class="bold">#3/4 Filters</em></p>

<p>The filters have a range of variables such as gallery, file type, published etc... to allow you to sort your images for management in an efficient and simple manner. Statistics for the filters appear at #4.</p>

<h3>Photo Upload</h3>

<p>RokGallery uses a HTMl5 file uploader, or Flash for unsupported browsers.</p>

<ul class="list-icon rightarrow">
	<li>Go to <strong>Admin &rarr; Components  &rarr; RokGallery</strong></li>
	<li>Click the <strong>Upload</strong> button</li>
	<li>Either <strong>Drag and Drop</strong> the files, or click <strong>Browse</strong> and find</li>
	<li>Click <strong>Upload</strong></li>
	<li>Monitor progress</li>
	<li>Click <strong>Close</strong> once completed</li>
</ul>

<p>
	<a rel="rokbox(rokgalleryupload)[900 587]" title="RokGallery — Photo Upload :: Activating the Upload Popup Manager" href="images/stories/demo/rokgallery/rokgallery2_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery2.jpg" alt="RokGallery" width="285" height="177" class="rt-image floatleft" /></a>
	<a rel="rokbox(rokgalleryupload)[900 587]" title="RokGallery — Photo Upload :: The Upload Popup Manager" href="images/stories/demo/rokgallery/rokgallery3_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery3.jpg" alt="RokGallery" width="285" height="177" class="rt-image" /></a>
</p>
<p>
	<a rel="rokbox(rokgalleryupload)[900 587]" title="RokGallery — Photo Upload :: Drag and Drop files into the Uploader" href="images/stories/demo/rokgallery/rokgallery4_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery4.jpg" alt="RokGallery" width="285" height="177" class="rt-image floatleft" /></a>
	<a rel="rokbox(rokgalleryupload)[900 587]" title="RokGallery — Photo Upload :: Preview all Drag and Dropped Files" href="images/stories/demo/rokgallery/rokgallery5_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery5.jpg" alt="RokGallery" width="285" height="177" class="rt-image" /></a>
</p>
<p>
	<a rel="rokbox(rokgalleryupload)[900 587]" title="RokGallery — Photo Upload :: View Photo Upload Progress" href="images/stories/demo/rokgallery/rokgallery6_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery6.jpg" alt="RokGallery" width="285" height="177" class="rt-image floatleft" /></a>
	<a rel="rokbox(rokgalleryupload)[900 587]" title="RokGallery — Photo Upload :: Completed Photo Upload" href="images/stories/demo/rokgallery/rokgallery7_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery7.jpg" alt="RokGallery" width="285" height="177" class="rt-image" /></a>
</p>

<div class="clear"></div>

<h3>Gallery View and Jobs</h3>

<p>All photos will appear at <strong>Admin &rarr; Components &rarr; RokGallery</strong>. RokGallery has support for multiple image selection, either by <strong>drag and highlight</strong> with the cursor, or via individual selection with the <strong>Shift Key</strong> and click.</p>

<p>
	<a rel="rokbox(rokgallerygallery)[500 527]" title="RokGallery — Gallery View :: Uploaded Files appearing in the Administrator" href="images/stories/demo/rokgallery/rokgallery8_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery8.jpg" alt="RokGallery" width="285" height="301" class="rt-image floatleft" /></a>
		<a rel="rokbox(rokgallerygallery)[500 527]" title="RokGallery — Gallery View :: Demonstrating multi-selection in Gallery View" href="images/stories/demo/rokgallery/rokgallery9_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery9.jpg" alt="RokGallery" width="285" height="301" class="rt-image" /></a>
</p>

<div class="clear"></div>

<img src="images/stories/demo/rokgallery/rokgallery10.jpg" alt="RokGallery" width="285" height="245" class="rt-image floatright" />
<p><em class="bold">Jobs Manager</em></p>
<p>The Jobs Manager provides you a log of operations undergoing or undergone in RokGallery. You can view:</p> 
<ul class="list-icon rightarrow">
	<li>Import status, with time stamps</li>
	<li>Slice status, with time stamps</li>
	<li>Clear all Jobs</li>
	<li>Delete individual Jobs via the trash icon</li>
	<li>Refresh individuals Jobs via the reload icon</li>
</ul>

<h3>Galleries Manager</h3>

<p>RokGallery is a tagged based gallery component, therefore, Galleries are controlled by tags and not specific photos in <em>albums</em>. Subsequently, you can easily have one master photo in multiple albums with ease.</p>

<p><img src="images/stories/demo/rokgallery/rokgallery11.jpg" alt="RokGallery" width="580" height="150" class="rt-image" /></p>

<p class="notice">A single image can appear in numerous galleries based on its tag, and also can be different sizes based on the gallery settings, without <em>editing</em> the original image.</p>

<ul class="list-icon rightarrow">
	<li><strong>Dropdown:</strong> To create a new Gallery, select <strong>Create New</strong>, or the name of another Gallery to edit it</li>
	<li><strong>Name:</strong> Set the name of the Gallery</li>
	<li><strong>Tags:</strong> Set the tags that are associated with the gallery (separate via a comma)</li>
	<li><strong>Images:</strong> Set the maximum height and width of the full image</li>
	<li><strong>Thumbnails Size:</strong> Set the height and width of the thumbnails</li>
	<li><strong>Background Color:</strong> Set the background color for the thumbnail surround</li>
	<li><strong>Aspect Ratio:</strong> Check if you wish to keep the dimensions of the image intact, or cropped.</li>
</ul>

<p class="attention">Remember to Publish a Gallery after clicking Save. If you make any changes to a Gallery, whether in the Galleries Manager, or in the Image Slice Editor, you will need to re-Save in the Galleries Manager for the changes to take place on the site.</p>

<p>
	<a rel="rokbox(rokgallerygalleries)[424 565]" title="RokGallery — Galleries Manager :: Creating a New Gallery" href="images/stories/demo/rokgallery/rokgallery12_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery12.jpg" alt="RokGallery" width="185" height="246" class="rt-image floatleft" /></a>
	<a rel="rokbox(rokgallerygalleries)[424 565]" title="RokGallery — Galleries Manager :: Inserting New Gallery Data" href="images/stories/demo/rokgallery/rokgallery13_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery13.jpg" alt="RokGallery" width="185" height="246" class="rt-image floatleft" /></a>
	<a rel="rokbox(rokgallerygalleries)[424 565]" title="RokGallery — Galleies Manager :: Gallery Settings View" href="images/stories/demo/rokgallery/rokgallery14_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery14.jpg" alt="RokGallery" width="185" height="246" class="rt-image" /></a>
</p>

<div class="clear"></div>

<h3>Image Editor</h3>

<p>RokGallery has a very advanced image editor, akin to a native application. The various parts will be discussed below.</p>

<p>After selecting the edit button, you will be able to edit the META data of the image, the image itself, plus delete or publish the image.</p>

<ul class="list-icon rightarrow">
	<li><strong>Title:</strong> The name of the image file to be displayed on the frontend gallery</li>
	<li><strong>Slug:</strong> The individual identifier for an image (we recommend not to change)</li>
	<li><strong>Description:</strong> The description of the image file shown on the frontend gallery</li>
	<li><strong>Tags:</strong> Add the tags that you wish to associate with the image</li>
	<li><strong>Slicing:</strong> Edit the image</li>
	<li><img src="images/stories/demo/rokgallery/rokgallery27.jpg" class="rt-image" alt="RokGallery" width="35" height="20" style="position: absolute; left: 95px"/><strong>Publish:</strong><span style="margin-left: 49px;">Show or Hide an image for specific tags/galleries.</span></li>
</ul>

<p><img src="images/stories/demo/rokgallery/rokgallery15.jpg" alt="RokGallery" width="580" height="362" class="rt-image" /></p>

<p>In the <strong>Slice Editor</strong>, you can edit the META data and the actual image. You can crop the image, similar to that of an native application, with a set or variable marquee, in addition to Zoom controls. Edits in the Slice Editor are on a per gallery/tag basis.</p>

<p class="attention">The original image that was uploaded is maintained, as a new image is created after applying the crop. This can be reverted at any time from the Slice Editor.</p>

<p><a rel="rokbox(rokgalleryimage)[900 715]" title="RokGallery — Image Editor :: Image Slice Editor" href="images/stories/demo/rokgallery/rokgallery16_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery16.jpg" alt="RokGallery" width="580" height="466" class="rt-image" /></a></p>

<p>Additionally, you can also <strong>Share</strong> the slice via the Share button, or <strong>Delete</strong> the image via the Delete button, from the Image Editor:</p>

<p>
	<a rel="rokbox(rokgalleryimage)[425 237]" title="RokGallery — Image Editor :: Sharing an Image" href="images/stories/demo/rokgallery/rokgallery17_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery17.jpg" alt="RokGallery" width="285" height="266" class="rt-image floatleft" /></a>
	<a rel="rokbox(rokgalleryimage)[750 458]" title="RokGallery — Image Editor :: Deleting an image" href="images/stories/demo/rokgallery/rokgallery18_large.jpg"><img src="images/stories/demo/rokgallery/rokgallery18.jpg" alt="RokGallery" width="285" height="266" class="rt-image" /></a>
</p>

<div class="clear"></div>

<h3>Multi-Tagging</h3>

<p>Tagging is at the core of RokGallery, and with its multi-selection ability, you can easily manage tags across multiple images with great ease. Simply highlight several images and click Tags. Here, you can add, remove, or change any common tags applied to your selection.</p>

<p class="notice">If you wanted to quickly move several images to another gallery, simply change their tag.</p>

<p><img src="images/stories/demo/rokgallery/rokgallery19.jpg" alt="RokGallery" width="580" height="353" class="rt-image" /></p>

<h3>Filtering</h3>

<p><img src="images/stories/demo/rokgallery/rokgallery24.jpg" alt="RokGallery" width="580" height="99" class="rt-image" /></p>

<p>A system based on tagging needs an advanced <em>search</em> facility, so RokGallery employs a simple but powerful filtering mechanism:</p>

<div class="rt-demo-grid-3">
<p><em class="bold">Filter Type</em></p>
<ul class="list-icon rightarrow">
	<li>Tags</li>
	<li>Gallery</li>
	<li>Published</li>
	<li>File Size</li>
	<li>Width</li>
	<li>Height</li>
</ul></div>

<div class="rt-demo-grid-3">
<p><em class="bold">Filter Operation</em></p>
<ul class="list-icon rightarrow">
	<li>Is</li>
	<li>Is Not</li>
	<li>Contains</li>
	<li>Does not Contain</li>
	<li>Greater than</li>
	<li>Lesser than</li>
</ul></div>

<div class="rt-demo-grid-4">
<p><em class="bold">Order by Type (Asc/Des)</em></p>
<ul class="list-icon rightarrow">
	<li>Title</li>
	<li>Created At</li>
	<li>Updated At</li>
	<li>File Size</li>
	<li>Width</li>
	<li>Height</li>
</ul></div>

<div class="clear"></div>

<p>
	<img src="images/stories/demo/rokgallery/rokgallery22.jpg" alt="RokGallery" width="285" height="255" class="rt-image floatleft" />
	<img src="images/stories/demo/rokgallery/rokgallery23.jpg" alt="RokGallery" width="285" height="255" class="rt-image" />	
</p>

<p>
	<img src="images/stories/demo/rokgallery/rokgallery20.jpg" alt="RokGallery" width="285" height="224" class="rt-image floatleft" />
	<img src="images/stories/demo/rokgallery/rokgallery21.jpg" alt="RokGallery" width="285" height="224" class="rt-image" />	
</p>

<div class="clear"></div>

<p class="attention">Filters are not singular and can be applied cumulatively:</p>

<p>
	<img src="images/stories/demo/rokgallery/rokgallery25.jpg" alt="RokGallery" width="285" height="255" class="rt-image floatleft" />
	<img src="images/stories/demo/rokgallery/rokgallery26.jpg" alt="RokGallery" width="285" height="255" class="rt-image" />	
</p>

<div class="clear"></div>