plainblack.com
Username Password
search
Bookmark and Share

Image Previewer with WebGUI Collaboration Systems

WebGUI Collaboration Systems (CS) are extremely versatile and useful tools. This chapter explores a simple, but very useful, custom CS template that will display small thumbnail previews and then display a larger version of that image without reloading the page.

 

It would be helpful if you have some knowledge of Javascript before reading this chapter, but the chapter will go slowly so it won't be absolutely necessary.

 

The Example

 

 

This is a nice variation on the photo gallery template that comes with WebGUI. Using it, you can click on the thumbnails on the left and display a larger picture on the right. It requires some javascript to make it happen, but it's all straightforward.

 

Start by analyzing the actual template used to create the layout, look at the CSS that's used to customize its look, then examine the Javascript that controls it all.

 

The Template



Template, Lines 1 - 5

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

 

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

<h2 class="featureTitle"><tmpl_var title></h2>

 

...

 

 

The first three blocks of code are used to set up the basics of the template. It's not necessary to have all these variables, but it's always a good idea to have them.

 

  • Line 1 : The first line draws an HTML anchor which could let a user link directly to this asset on a page. It's not essential to use, but it's a good idea to keep it in place as you never know when you might need the ability.

 

  • Line 3 - 4 : If admin mode is on, this area will draw the “Edit, Cut, Copy” links. Otherwise, these controls are hidden.

 

  • Line 5 : Displays the title of the thread

 

After those first three blocks, the magic starts to happen. The code is a bit more complicated, and it requires you to understand the concept of loops, which was covered in Chapter 3. Additionally, basic HTML tags won't be covered, so you'll want to be sure to read Chapter 1.

 

Template, Lines 6 – 8

 

 

...

 

<table border=”0” cellpadding=”10” cellspacing=”10”>

<tr>

<td style=”width:99%” valign=”top”>

 

...

 

 

  • Line 6 : The entire thread is going to be held within a table, so what you're doing here is setting that up. You're giving an ample amount of padding and spacing within the table to pad things out nicely for the many possible thumbnails that can appear.

 

  • Line 7 – 8 : Here, you're starting a new row and setting up the first column in that row, which will end up holding all of the thumbnails.

 

Template, Lines 9 – 10 : The Post Loop

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

 

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

<h2 class="featureTitle"><tmpl_var title></h2>

 

<table border=”0” cellpadding=”10” cellspacing=”10”>

<tr>

<td style=”width:99%” valign=”top”>

<tmpl_loop post_loop>

<div class=”postMessage”>

 

...

 

 

  • Line 9 – 10 : Line 9 initializes the post loop, which cycles through every post in a thread. Line 10 is the containing <div> which holds all of the content of a post. It also is being assigned the class, “postMessage.”

 

 

Template, Lines 11 – 13 : Text Content

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

 

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

<h2 class="featureTitle"><tmpl_var title></h2>

 

<table border="0" cellpadding="10" cellspacing="10">

<tr>

<td style="width:99%;" valign="top">

<tmpl_loop post_loop>

<div class="postMessage">

<div class="featureContent">

<tmpl_var content>

</div>

...

 

 

  • Line 11 & 13 : The two lines will serve as the wrapping div for the text content. This <div> will not contain any of the thumbnails, only whatever is typed into this post. It also has been given the class of “featureContent.”

 

  • Line 12 : This is a template variable, called “content.” As its name implies, it is used to draw the content of a post onto the page. It does not, however, draw images that have been attached the post.

Template, Lines 14 – 26 : Attachments

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

 

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

<h2 class="featureTitle"><tmpl_var title></h2>

 

<table border="0" cellpadding="10" cellspacing="10">

<tr>

<td style="width:99%;" valign="top">

<tmpl_loop post_loop>

<div class="postMessage">

<div class="featureContent">

<tmpl_var content>

</div>

<tmpl_loop attachment_loop>

<div style="float: left; padding: 5px;">

<a href="#" removed="bigImage('<tmpl_var url>')">

 

<tmpl_if isImage>

<img src="<tmpl_var thumbnail>"

style="border:solid orange 1px;

padding:5px;

-moz-border-radius:10px;"

</tmpl_if> </a>

</div>

</tmpl_loop>

<div style="clear: both;"></div>

...

 

 

  • Line 14 & 25 : This is the loop that cycles through the attachments, which in this case are the thumbnails. Without this, thumbnails would not be displayed.

 

  • Line 15 & 24 : This is the wrapping <div> that will hold each individual thumbnail. They are set to float to the left and have been given a little bit of extra padding (5 pixels).

 

  • Line 16 & 23 : This is the link for the thumbnail. It currently is pointing to nothing at the moment, just “#”. This will change as the link will be dynamically updated with Javascript (more on that later). What actually happens when someone clicks on this link is it fires off the Javascript named “bigImage,” which currently is being given the URL to the larger image.

 

  • Line 17 & 22 : This IF statement is testing to see if the attachment is actually an image. If it is an image, then it will perform whatever actions are within it.

 

  • Line 18 – 21 : These lines are all of the attributes given to the <img> tag. Note that there are extra line breaks in the example just to fit it onto the page. The template variable, “thumbnail” is being used as the “src”, which points to a thumbnail version of the larger image. Otherwise, there are just a few inline styles declared, an orange border and some padding.

 

  • Line 26 : This last line is ending the floating images in this table cell. It's important to have this here so that the rest of your page's format doesn't get interrupted by the thumbnails.

 

Template, Lines 27 – 38 : Edit/Delete Controls

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

 

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

<h2 class="featureTitle"><tmpl_var title></h2>

 

<table border="0" cellpadding="10" cellspacing="10">

<tr>

<td style="width:99%;" valign="top">

<tmpl_loop post_loop>

<div class="postMessage">

<div class="featureContent">

<tmpl_var content>

</div>

<tmpl_loop attachment_loop>

<div style="float: left; padding: 5px;">

<a href="#" removed="bigImage('<tmpl_var url>')">

 

<tmpl_if isImage>

<img src="<tmpl_var thumbnail>"

style="border:solid orange 1px;

padding:5px;

-moz-border-radius:10px;"

</tmpl_if> </a>

</div>

</tmpl_loop>

<div style="clear: both;"></div>

</div>

 

<tmpl_unless isLocked>

<div class="postControls">

<tmpl_if user.canEdit>

 

<a href="<tmpl_var edit.url>" class="controlLink">

<tmpl_var edit.label>

</a> &bull;

 

<a href="<tmpl_var delete.url>" class="controlLink">

<tmpl_var delete.label>

</a>

</tmpl_if>

</div>

</tmpl_unless>

...

 

 

 

  • Line 27 & 38 : This is an UNLESS statement. It checks to see if the post is locked or not. If it isn't locked, then whatever is held between these tags will be drawn on the page.

 

  • Line 28 & 37 : The <div> tag that holds the edit/delete controls. It has been given the classname of “postControls.”

 

  • Line 29 & 36 : This is an IF statement that tests to see if the person who is currently viewing the thread has rights to edit it. If they do, then whatever is held in between these tags will be drawn onto the page.

 

  • Line 30 – 32 : This is the link to edit the post. Notice that template variables are used to dynamically create the URL for the link, and even to create the word “Edit.” It has also been given the class name of “controlLink.”

 

  • Line 33 – 35 : This is the link to delete the post. Notice that template variables are used to dynamically create the URL for the link, and even to create the word “Delete.” It has also been given the class name of “controlLink.”

 

Template, Lines 36 – 37 : Ending the Loop, Closing the Cell

 

 

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>

 

<tmpl_if session.var.adminOn>

<p><tmpl_var controls></p>

</tmpl_if>

 

<h2 class="featureTitle"><tmpl_var title></h2>

 

<table border="0" cellpadding="10" cellspacing="10">

<tr>

<td style="width:99%;" valign="top">

<tmpl_loop post_loop>

<div class="postMessage">

<div class="featureContent">

<tmpl_var content>

</div>

<tmpl_loop attachment_loop>

<div style="float: left; padding: 5px;">

<a href="#" removed="bigImage('<tmpl_var url>')">

 

<tmpl_if isImage>

<img src="<tmpl_var thumbnail>"

style="border:solid orange 1px;

padding:5px;

-moz-border-radius:10px;"

</tmpl_if> </a>

</div>

</tmpl_loop>

<div style="clear: both;"></div>

</div>

 

<tmpl_unless isLocked>

<div class="postControls">

<tmpl_if user.canEdit>

 

<a href="<tmpl_var edit.url>" class="controlLink">

<tmpl_var edit.label>

</a> &bull;

 

<a href="<tmpl_var delete.url>" class="controlLink">

<tmpl_var delete.label>

</a>

</tmpl_if>

</div>

</tmpl_unless>

 

</tmpl_loop>

</td>

...

 

 

  • Line 37 – 38 : These two lines end the loop that cycles through the posts, and closes the table cell that contains them.

 

Template, Lines 38 – 46 : Ending the Loop, Closing the Cell

 

 

<PREVIOUS CODE>

 

<td style="width:1%; border:solid #E2E2E2 1px;-moz-border-radius:10px;"

valign="top">

 

Select an image from the left<br /><br />

 

<a href="#" id="linkPic" target="_blank">

<img src="^FileUrl(images/blankbox.gif);" border="1"

alt=""

name="displayWindow" />

</a>

</td>

 

 

...

 

 

  • Line 38-39 & 47 : This is a new table cell that will sit to the right of the cell that contains all of the thumbnails. Inside of it will be the larger image.

 

  • Line 40 : Here is a simple line instructing the user to pick one of the images on the left.

 

  • Line 41 & 46 : This is another link. This time it is wrapping around the <img> so that when a user clicks on it, it launches a full-sized version. It has been assigned the ID “linkPic” and the “target” attribute has been set to “_blank” so that when the picture is clicked it launches a new window.

     

  • Line 42 – 45 : Here is the preview image. Its URL is currently pointing to a blank image, a default image. This is necessary because the user hasn't selected one of the images at the left yet. It has been given a slight border, a blank “alt” tag, and finally a name, “displayWindow.”

 

Template, Lines 47 – 51 : Ending the Row & Table, Running the Javascript

 

 

<PREVIOUS CODE>

 

<td style="width:1%; border:solid #E2E2E2 1px;-moz-border-radius:10px;"

valign="top">

 

Select an image from the left<br /><br />

 

<a href="#" id="linkPic" target="_blank">

<img src="^FileUrl(images/blankbox.gif);" border="1"

alt=""

name="displayWindow" />

</a>

</td>

 

</tr>

</table>

 

<script type="text/javascript">

bigImage('<tmpl_var image.url>');

</script>

 

 

...

 

 

  • Line 47 – 48 : These two lines end the single row for the table, and end the table.

 

  • Line 49 – 51 : These three lines come immediately after the layout. When the Browser hits this code, it will recognize it as Javascript and will run whatever is between the <script> tags. In this case, there is a function call, “bigImage.” This is a custom Javascript that will be created later in the chapter. It is being passed to the variable, “image.url” just so that it is initialized (ready, set, go!).

 

The Template, Explanation

 

First, concentrate on the important pieces of this code. You'll see that the major loop that cycles through the posts in this particular thread is being started. This template works best if you have it set so that no replies are allowed. This isn't the type of thread that you want people to reply to. It's just a photo gallery. Nevertheless, the way WebGUI works requires a loop, even if there's only one thing to loop through.

 

The next template variable is <tmpl_var content>. This variable is what draws the text for the post. All formatting done in the rich text editor will carry across into the post just by calling this variable.

 

There is a second loop within the first one, <tmpl_var attachment_loop>. This loop cycles through all of the images that have been attached to this particular post. The following lines are very important, so take a closer look.

 

The Attachment Loop

 

 

<tmpl_loop attachment_loop>

<div style="float: left; padding: 5px;">

<a href="#" removed="bigImage('<tmpl_var url>')">

<tmpl_if isImage>

<img src="<tmpl_var thumbnail>"

style="border:solid orange 1px;

padding:5px;

-moz-border-radius:10px;"

</tmpl_if> </a>

</div>

</tmpl_loop>

 

<div style=”clear:both”></div>

 

 

 

 

The lines beginning in div are wrapping elements, a <div> that the image is held within. It is set to float:left so that the small thumbnail images will sit nicely next to each other.

 

The lines beginning with <a are the link that wraps around the image. The important part here is the removed action. It calls a javascript that makes the larger image appear on the right side. The javascript is given the URL of the actual image that will be displayed there, hence putting in the template variable <tmpl_var url>.

 

Finally, the innermost portion covers the actual image itself.

 

There is an IF statement to test whether or not an image is attached. This is just in case someone accidentally uploads a file instead of an image(s). The file will not show up in the thread because there is no ELSE statement here to draw an attachment if it isn't an image.

 

The img tag itself has several properties assigned to it. In this example, it will draw a simple thin line around the image.

 

The template variable, <tmpl_var thumbnail>, is the actual URL to a thumbnail version of the image that is attached to the post.

 

The last line is a small bit of HTML and inline CSS that stops the floating images. You may or may not actually need this, but it's almost always a good idea to tell your HTML when you want floated elements to stop floating on the page, and that's what this little piece does.

 

WebGUI Admin Console Settings

 

 

It is important to note that in the “Admin Console > Settings” screen you can actually change the default size of thumbnails that are uploaded to WebGUI. Simply select Settings from the Admin Console and click on the Content tab. You'll see the above screen.

 

The orange arrow is pointing to the field that allows you to change the default width of all thumbnails on the site (not just for this example). Be careful when modifying this value as all thumbnails generated by WebGUI will be this size from now on. That said, changing this value after you've already uploaded images will not update old thumbnails, only new ones.

 

In addition, you can also modify the size of thumbnails just for a specific Collaboration System. Just edit the CS, go to the Display tab and take a look at the area the orange arrow is pointing to in the example.

 

Note: If you modify the thumbnail size in the Collaboration System settings, this will take precedence over what you set for the thumbnail size in WebGUI's global settings.

Also note that modifying the thumbnail size in the CS will not alter the size of already existing thumbnails.

 

Collaboration System – Thumbnail Settings

 

 

 

Post Controls

 

 

<tmpl_unless isLocked>

<div class="postControls">

<tmpl_if user.canEdit>

<a href="<tmpl_var edit.url>" class="controlLink">

<tmpl_var edit.label>

</a>

&bull;

<a href="<tmpl_var delete.url>" class="controlLink">

<tmpl_var delete.label>

</a>

</tmpl_if>

</div>

</tmpl_unless>

 

 

Without the above code, there would be no way for the administrator to easily edit or delete your post. All it does is draw “Edit” or “Delete”, so it's a good idea to include it.

 

The outer piece of code, </templ_unless>, tests to see if the thread is locked. If it is, none of the controls will show up. The <div> wraps the controls. It also has a class assigned to it that would let you modify its look with CSS. The <templ_if> code is another test that looks to see if the person viewing the page has rights to edit the thread. If they do, then the purple code within will be displayed, and will allow the user to either edit or delete the thread.

 

The Last Important Pieces

 

 

</tmpl_loop>

</td>

 

<td style="width:1%;border: solid #E2E2E2 1px;-moz-border-radius:10px;"

valign="top">

 

Select an image from the left<br /><br />

 

<a href="#" id="linkPic" target="_blank">

<img src="^FileUrl(pb-redesign-2006/images/blankbox.gif);" border="1"

alt=""

name="displayWindow" />

</a>

</td>

</tr>

</table>

 

<script type="text/javascript">

bigImage('<tmpl_var image.url>');

</script>

 

 

To end the the thread loop, there is a closing template tag, </tmpl_loop>. Everything that comes after that tag is no longer part of the post itself, but strictly the template. That leads to the last piece of important HTML, which draws the empty box at the right side.

 

This piece is simple, but essential, because without it the javascript will not have a place to put the larger version of the thumbnail image. You'll notice that the link is not set to initially go anywhere. This will change with the javascript. Then at the very end, the Javascript is finally called, which will be covered now.

 

The Javascript – bigImage

 

 

function bigImage(imgUrl) {
	document.displayWindow.src = imgUrl;
      document.displayWindow.width = 500;
                
      tmpVar = document.getElementById("linkPic");            
      tmpVar.href = imgUrl;           
}

 

 

This book isn't about teaching you javascript, but it will explain what each line is for, and the parts that you could/should modify.

 

First and foremost, you need to create the function that the template will be calling.

 

bigImage Function

 

 

function bigImage(imgUrl) {
	...
}

 

 

If you've read the chapter on Bulleted Lists, you probably are familiar with the general syntax of a Javascript function. However, this function is a little different than the one covered in that chapter. “bigImage” accepts a parameter, just like a WebGUI macro does. The variable has been given the name of “imgUrl.” This is the URL of the image that is to be displayed in the larger preview area on the right side of the screen.

 

Using imgUrl

 

 

function bigImage(imgUrl) {
	document.displayWindow.src = imgUrl;
	...
}

 

 

Here is where “imgUrl” is actually seen, and where there is a link that calls the above javascript and gives it a value. In this case, the value is the path to the full size image.

 

That value is held in the javascript variable, imgUrl. You'll also notice displayWindow is used here, which is the name given to the large blank graphic that will display that full size image.

 

Resizing the Image

 

 

function bigImage(imgUrl) {
	document.displayWindow.src = imgUrl;
	document.displayWindow.width = 500;
	...
}

 

 

This makes it so that no matter what image appears, it will be 500 pixels wide. The height of the image will remain proportionate, so you don't need to worry about specifying that. This is a good way to keep control of the image size if the design you're using has limited space, but you may want to remove it so that there won't be any distortion. As it is right now, your image may be proportionately correct, but it is smaller than 500 pixels. This part of the script will enlarge it. Be careful whenever forcing an image size with Javascript, as you may not like the end results.

 

 

tmpVar

 

function bigImage(imgUrl) {
	document.displayWindow.src = imgUrl;
	document.displayWindow.width = 500;
	tmpVar = document.getElementById("linkPic");
	...
}

 

 

This line grabs the link that wraps around the image. This is necessary because you need to have control over that link so that you can change it depending on what thumbnail is clicked. As it is, it doesn't actually change the URL, it's just setting things up so that you are able to do that in the next step.

 

Changing the URL

 

 

function bigImage(imgUrl) {
	document.displayWindow.src = imgUrl;
	document.displayWindow.width = 500;
	tmpVar = document.getElementById("linkPic");
	tmpVar.href = imgUrl; 
	...
}

 

 

This line is what actually changes the URL of the link that wraps around the preview image. The variable, imgUrl, is passed to this javascript function when someone clicks on any of the small thumbnails. What actually gets sent to this function is the URL of the image that the thumbnail is representing. That means that when someone clicks on a somewhat larger preview image it will open it to the full size version of the image. It's a fairly simple javascript. It's just all the pieces coming together with the template that makes it dynamic. In the next section, a graphic look of how this would function is provided.

Watching it Come Together

 

The template and the Javascript have been covered in great detail. See how all of this actually works now that the pieces are assembled. Be sure to create a Collaboration System and a new Thread Template to put the custom template code and javascript into.

 

Making the Template

 

 

The Thread with a Few Images

 

 

You can see that the first image that's showing up in the larger preview box is the first thumbnail on the left side. That's the default. Remember that small bit of code earlier at the very bottom of the template?

<script type="text/javascript">
bigImage('templ_var image.url>');
</script>

 

That piece is what puts the very first image into the large preview area.

 

Clicking on a Thumbnail

 

 

In the above example, the second thumbnail is about to be clicked, and by doing so, a new image is loaded in its place without the page having to reload!

 

 

Clicking on the Large Preview

 

 

Clicking on the larger preview opens the full size image in a new window.

 

 

Conclusion

 

Collaboration Systems can be used for many things in WebGUI, and this is just one example of that. Obviously if you can make all of this happen in just a thread, imagine what you can do with the rest of the system. WebGUI being able to dynamically provide ID's can really free you up with Javascript. Although what is here is dynamic, there is so much more that is available. Take this example and run with it!

 

Keywords: collaboration system CSS HTML image Javascript post Templates thread thumbnail

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved