We have recently created a tutorial to help the W&L community find and use free stock photography. Users will find this most useful as they further develop blogs and Facebook pages, but may also find themselves sprucing up their Ingeniux-hosted department pages. The full post can be found in our new Web Help section, or by going directly here.
Please let us know if you have any additional resources you think we should promote – Leave a comment or e-mail us today!
By now most of you know how to upload a pdf, Word, Excel or other documents to your department’s assets folder in Ingeniux. But how carefully do you name those documents? Developing a simple naming convention can save you a lot of time, and others a lot of frustration. Take for example a registration form. Chances are you have to update it from time to time, and when you do you might be tempted to name the latest version with the year so that people know it has changed. But by doing so, you break every link to that form elsewhere on our site. If it’s a form (or handbook, or policy) that lots of people use, that’s bad for usability.
Instead, take three simple steps to ensure that people can find the right document at the right link every time:
How many times have you seen a URL in a W&L publication with those confusing numbers (www.wlu.edu/x12345.xml)? While Ingeniux assigns each page you create an xID, that doesn’t mean it’s the only URL you can use to publicize your website.
If you’re creating a newsletter, a brochure or any other publication that references a website and want to include a unique, memorable website address, use our Web Tracking Form to request a “Go” address. We can quickly and easily create a custom URL for you that begins with “go.wlu.edu” and includes (gasp!) actual words!
Visit http://go.wlu.edu/webtrack to request one today.
Since launching the Web Tracking Form several years ago, we’ve been pleased with our ability to track user requests for web help. However, the tracking form doesn’t allow us to collect adequate detail on requests for new website projects.
Enter a new form! Beginning this fall, we ask that if you are interested in launching new website (or a significant redesign), you fill out our Web Project Intake Form. The form will give us basic information that will help inform our initial meeting as well as schedule your project for timely completion.
Prefer the personal touch? Feel free to give one of us a call to discuss your project in person. (But don’t be offended if we ask you to fill out the form anyway.)
As always, thanks for your cooperation and we look forward to working with you on your next project.
How do you caption images in the Ingeniux HTML editor? Table? Custom coded <div> tag? It’s not easy. And it generally requires you or your users to write code.
Well, we’ve come up with a pretty cool solution to use the standard Ingeniux style selector in the content editor and the alternate text of a specified image to create cleanly captioned images.
~~
Step 1: Create CSS Classes in the Editor:
To enable inline image captioning, you first need to add two styles to the “localstyles.css” file. The file can be found in your main XML directory under Custom > Editor. Add the following CSS references:
.caption_left {}
.caption_right {}
These are just placeholder classes, so there are no CSS attributes.
Step 2: Insert an Image in Ingeniux:
To insert a captioned image in the HTML editor, select the image as you always do using the built-in image selection tool. Make sure you give your image alternate text — this will become the caption. For the purposes of formatting text and images within the editor, go ahead and select an alignment for your image — either left or right — and, to make it easier to view in the editor, put in a border of 1px and vertical and horizontal padding of 5px. Click the insert button to add your image to the HTML editor.
Now if you want to add a fancy caption to this image, click on the image in the HTML editor and make sure the select handles are visible in the four corners of the image. With the image selected, choose from your styles dropdown list in the editor toolbar “caption_left” for images that should be floated left or “caption_right” for those that should be floated right.
IMPORTANT: Nothing will happen in the editor! Your image should look exactly like it did when you first inserted it. The magic doesn’t happen until you view your content in a browser.
Step 3: The Magic
In your default XSL stylesheet, add the following <script> tags:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“img.caption_left”).each(function() {
$(this).wrap(‘<div style=”width:’+($(this).width()+10)+’px”></div>’)
.after(‘<p>’+$(this).attr(“alt”)+’</p>’)
.removeAttr(‘alt’);
});
});
$(document).ready(function() {
$(“img.caption_right”).each(function() {
$(this).wrap(‘<div style=”width:’+($(this).width()+10)+’px”></div>’)
.after(‘<p>’+$(this).attr(“alt”)+’</p>’)
.removeAttr(‘alt’);
});
});
</script>
The first <script> block allows for the use of Google API’s JQuery library. The second block taps into that library to quickly scan the page on load and find any images that have been given the class “caption_left” or “caption_right.” For each such image, we’ll add some code before, after and around the image to build a nice little <div> that looks like this:
<div class=”figureRight” style=”width: 190px;”>
<img src=”images/news/graduate.jpg” style=”float: left; border: 1px solid black; margin: 5px;” width=”180″ height=”250″ />
<p class=”capText”>Cool Image Captioning</p>
</div>
The <div> is given a set width, which comes from the specified width of the image plus 10. The paragraph text (the caption) is pulled from the alternate text attribute of the image.
Step 4: Make the Magic Pretty
Earlier you created empty classes for use within the editor. Now you need to create the real CSS styles for the captioned images. The following CSS references need to go in the cascading stylesheet linked to your default XSL stylesheet:
.figureLeft {
position:relative;
float:left;
margin:0px 10px 10px 0px;
padding:5px;
background-color:#f1ece1;
border:1px solid #e3dac7;
visibility:visible;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.figureRight {
position:relative;
float:right;
margin:0px 0px 10px 10px;
padding:5px;
background-color:#f1ece1;
border:1px solid #e3dac7;
visibility:visible;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.figureLeft img, .figureRight img {
padding:0px;
}
.figureLeft p.capText, .figureRight p.capText {
clear:both;
display:block;
margin:0 auto;
padding:5px 5px 0px 5px;
color:#524833;
font-size:9px;
font-style:italic;
font-weight:normal;
text-align:center;
}
These will float the container <div> left or right, as appropriate, provide the soft background color and padding, and the font styling for the caption text. These styles will also round the corners of your container <div> in most non-IE browsers. These can be changed to better suit your site’s look and feel.
That’s it. You can create as many captioned images on a single page as your good taste will allow. I hope someone else finds this trick useful.
Washington and Lee University uses a number of RSS feeds on its homepage to keep site visitors informed. Feeds include:
Shortly after launching our new site, we met the infamous Twitter fail whale. Load issues with Twitter’s RSS feed ground the loading of our homepage to a halt. That’s when we decided to look into runtime caching. We implemented a rudimentary ASP script to seek out the Twitter RSS feed on a regular interval and save the contents of the feed to a local file. We then instructed our Ingeniux page to retrieve this local file. By doing so, we minimized the risk of hitting the fail whale and, to our delight, found that the entire page loaded more quickly. So, we extended the caching to our other feeds. The system is not without flaws, and there are areas for augmenting the script to catch a few other potential problems, but we’re sailing much more smoothly now.
Pros:
Cons:
~~
On the runtime server, in the “custom” folder, we added a classic ASP file. This is the file that we indicate as the source of the RSS feed in Ingeniux. Let’s call this file “twitter.asp.” Here’s the code:
<!–#include file=”asp_cache.asp”–>
<%
If cacheFileIsExpired(“twitter_feed.xml”, 1, “hours”) Then
Response.Buffer = True
Dim objXMLHTTP, xml
Set xml = Server.CreateObject(“MSXML2.ServerXMLHTTP”)
xml.Open “GET”, “http://twitter.com/statuses/user_timeline/20787409.rss?count=2″, False
xml.Send
strPosts = xml.responseText
Set xml = Nothing
Response.Write(writeCachedFile(“twitter_feed.xml”, strPosts))
Else
Response.Write(getCachedFile(“twitter_feed.xml”))
End If
%>
The script first checks to see if the modified date of the local file has exceeded the specified interval. The name of the local file is “twitter_feed.xml.” If we’re within the time interval, the ASP script simply returns the content of the local file as fully formatted XML. If not, it retrieves the RSS feed from the source and saves the XML to the local file. The time interval is specified in the first line as a numeral and a unit of measurement (i.e, 10 minutes or 1 hour).
The “twitter.asp” file includes an additional file called “asp_cache.asp.” This file declares a few key variables and routines, and, most importantly, specifies where you are saving and retrieving the local file. In our case, that’s a folder at “d:\WebSites\v6\Custom\cache\files\” on our runtime site. Here’s the code:
<%
Function cacheFileIsExpired(strFileName, cacheInterval, cacheIntervalUnit)
If cacheInterval = 0 Then
cacheFileIsExpired = True
Exit Function
End If
On Error Resume Next
Dim cacheFSO : Set cacheFSO = CreateObject(“Scripting.FileSystemObject”)
Dim cacheFile : Set cacheFile = cacheFSO.GetFile(“d:\WebSites\v6\Custom\cache\files\” & strFileName)
Dim strDate : strDate = cacheFile.DateLastModified
Set objFile = NothingSelect Case cacheIntervalUnit
Case “minutes” : strUnit = “n”
Case “hours” : strUnit = “h”
Case “days” : strUnit = “d”
End Select
cacheFileIsExpired = (DateDiff(strUnit,CDate(strDate), Now()) > cacheInterval)
If err.Number <> 0 Then
cacheFileIsExpired = True
End If
Set cacheFile = Nothing
Set cacheFSO = Nothing
End FunctionFunction writeCachedFile(strFileName, strText)
Dim cacheFSO : Set cacheFSO = CreateObject(“Scripting.FileSystemObject”)
Dim cacheFile : Set cacheFile = cacheFSO.CreateTextFile(“d:\WebSites\v6\Custom\cache\files\” & strFileName, True, True)
cacheFile.Write(strText)
cacheFile.Close
Set cacheFile = Nothing
Set cacheFSO = Nothing
writeCachedFile = strText
End FunctionFunction getCachedFile(strFileName)
Dim cacheFSO : Set cacheFSO = CreateObject(“Scripting.FileSystemObject”)
Dim cacheFile : Set cacheFile = cacheFSO.OpenTextFile(“d:\WebSites\v6\Custom\cache\files\” & strFileName,1,False,-1)
getCachedFile = cacheFile.ReadAll
Set cacheFile = Nothing
Set cacheFSO = Nothing
End Function
%>
That’s it. Just remember to specify your “twitter.asp” page as the source of your RSS feed in Ingeniux. I hope this can be helpful to other Ingeniux users. If you have ideas to improve this utility or something else you’d like to share, please do so.
- Eric Owsley
In an effort to provide our Ingeniux users better service and keep close track of the numerous requests for help and training we receive, the Web Communications team has implemented a new online help system. Starting in November, all users are requested to log in to the Web Tracking Form to enter requests for both help and training, including:
We regret that we will no longer be able to accept requests for help via e-mail or phone.
To log a help request, click on the Web Tracking Form banner ad on our Web Communications homepage, or use our Go address: http://go.wlu.edu/webtrack/
That’s it. Your request will be entered into our system and assigned to a member of our team. We’ll fix it, and hopefully you’ll be a satisfied customer.
Thanks for your cooperation, and do let us know if you find problems or can suggest improvements to the form.
As a follow-up to our initial training session, here are a few resources to get started in Ingeniux and the University calendar.
We will begin general training sessions for departments whose Web sites have already been fully migrated into the Ingeniux content management system on Monday, Feb 2. The initial training program will consist of two different classes:
INTRO TO INGENIUX CMS: An introductory session designed for first-time users charged with maintaining department Web sites.
INTRO TO PROFILE PAGES: An introductory session designed for faculty members and department Webmasters who wish to add and edit content on faculty and staff profile pages, which are used to populate department directory listings.
You may attend one or both of these sessions. Neither is a pre-requisite for the other.
We will also hold regular open working sessions for users who have attended one or both of the above classes and wish to work with the Web Communications team in the lab to practice their skills and get their questions answered.
The training sessions will take place as follows in the third floor Leyburn Library Training Lab (Leyburn 301). Training sessions are limited to 10 participants each on a first-come, first-served basis. Please RSVP to me asap to reserve your spot.
If you are unable to attend one of these trainings, please contact Jessica Carter with some alternate times which might work and we’ll schedule additional sessions as necessary.
We have set up a special section in the WebComm Wiki (http://wluwebservices.wetpaint.com/) to help Ingeniux users document and track issues with the V6 rollout. Invitations to this private wiki have been sent to all members of the Ingeniux SuperUsers group. If you’d like to join our wiki, e-mail one of the Web Communications Team for an invitation.
Web Services Events
