Pulling a blog post to a dotCMS page

Sample code to pull events from a UAkron WordPress Blog (blogs.uakron.edu) to a dotCMS page

#pullRSSFeed('http://blogs.uakron.edu/bliss/feed/')
<h1>From the Bliss Institute Blog</h1>
#foreach($content in $list)
#set($rssTotal = 2)
#set($desc = "$!content.description")
#set($regex = '(\[\.\.\.\])')
#set($newstring = $desc.replaceAll($regex, "<a href=\"${content.link}\">&hellip;Read More</a>"))
<h3>
   <a href="$!content.link">$!content.title</a>
</h3>
 <p>$newstring</p>
#end

Photo Gallery Tutorial

This tutorial will cover how to set up a simple Photo Gallery in dotCMS. The photo callery will display as a listing of thumbnails that can then be clicked to display a full-sized image.

For an example of this, and a reference to the page that will be created throughout this tutorial, view this link: http://www.uakron.edu/webteam/tutorials/photo-gallery-example.dot

Step 1) Uploading the images for the photo gallery to a dotCMS folder.

Step 2) Place the appropriate code into the dotCMS web page to create a photo gallery.

Additional Options) More options that can be coded into the page to further add functionality to the Photo Gallery

Final Notes) Bugs and reminders about the Photo Gallery.


Step 1) Uploading the images for the photo gallery to a dotCMS folder.
Start off by navigating to the folder you have created in dotCMS to store images for this photo gallery. The screen should appear similar to this:

As the image suggests, we select +Add New in the top right corner:

Next, select Multiple Files to add files to this folder. The screen should appear similar to this:

Note: There are three items that are circled in red here.

  • First off, the Folder field needs to be written down for Step 2. For this example /webteam/tutorials/images/photo-gallery/ would be written down. Note: Make sure that to include have the final / in the Folder url or the Photo Gallery will not work.
  • Second, the Number of Files to Upload field is important. Set this to the number of images that need to be uploaded. (Be aware that only 19 images may be uploaded at a time. If there are more than that for the Photo Gallery, repeat this process until all photos are uploaded). For the example demonstrated 3 images will be uploaded.
  • Third, the Browse button, when clicked, opens a window that allows one to select the files on a computer to add to the folder.

For demonstration purposes, three images have been selected. The following example shows the third image being selected for upload. In any situation, the screen should appear similar to this:

Once all images have been selected, click Save and Publish to upload the files to the folder in dotCMS.


Step 2) Place the appropriate code into the dotCMS web page to create a photo gallery.

Open the page where the photo gallery will be placed. The screen should appear similar to this:

In the top right corner select +Add and then select New Content.

There are four items that are important here. As with any content, be sure to name the Title appropriately. The Body section is where the code goes. Notice at the bottom that Code is selected instead of WYSIWYG. These two lines of code must be entered in Code view. The fourth item circled is the actual code. Be sure to place this in the page:

#set($showPhotoTitle = false)
#photoGallery('/webteam/tutorials/images/photo-gallery/')

Notice that the Folder field that was written down earlier is placed between the two quotation marks. If the path to the folder was /example1/example2/example3/ the code would look like this:

#set($showPhotoTitle = false)
#photoGallery('/example1/example2/example3/')

Click Save and Publish once the Folder path has been correctly entered to finish the Photo Gallery. Example:

Before an image is clicked:

After an image is clicked:

For an example of this, visit the link: http://www.uakron.edu/webteam/tutorials/photo-gallery-example.dot

Additional Options) More options that can be coded into the page to further add functionality to the Photo Gallery.

The line of code that reads “#set($showPhotoTitle = false)” is what is called an additional option. It allows for further control of the Photo Gallery. The following are all additional options for the Photo Gallery:

showPhotoTitle: Set to false to hide the photo names from the listing. Default: true.

showSubgalleryTitle: Set to false to hide the sub galleries names from the listing. Default: true.

photoWidth: Width used to display the full image. Default: 600.

photoHeight: Height used to display the full image. Default: 450.

thumbnailWidth: Width used to display the thumbnails. Default: 90.

thumbnailHeight: Height used to display the thumbnails. Default: 90.


And this is how the code would look with these options:

#set($showPhotoTitle = false)
#set($showSubgalleryTitle = false)
#set($photoWidth = 600)
#set($photoHeight = 450)
#set($thumbnailWidth = 90)
#set($thumbnailHeight = 90)
#photoGallery('/webteam/tutorials/images/photo-gallery/')

Final Notes:

  1. As mentioned earlier in this tutorial, be sure to add the ending / to the Folder when placing it into code, or the Photo Gallery will not work.
  2. To add images to the Photo Gallery, simple repeat Step 1, uploading more images to the gallery’s folder. To remove images from the Photo Gallery, simply unpublish them from the folder that they are in.

Image Rotator Widget Tutorial

This tutorial will cover how to set up an Image Rotator using the Image Rotator widget in dotCMS. An Image Rotator is a simple slideshow that rotates through all the images in a folder and shows them on page.

Preparation: Make sure that you have saved all images you will be using for the slideshow to your computer. The images should all be of the same width and height or else the Image Rotator will not display correctly.

Step 1) Adding files to a folder that you have created. This folder is specifically used for images you want in your slideshow.

Step 2) Creating a new image rotator widget on your page and filling out the appropriate fields to make things appear properly on screen.

Final Notes) Limitations, bugs, and final thoughts over the widget.

For Reference: Throughout the tutorial I will be referencing the link below:
https://www.uakron.edu/webteam/tutorials/image-rotator-example.dot


Step 1) Create a new folder in dotCMS. This folder is where images will be uploaded to for the slideshow. Example:

Next, double click the folder to enter it. Then at the top select +Add New:

As the image shows, select Multiple Files. Next a screen will appear similar to this one:

Note: Two items have been circled in the above image. The Folder option is something that needs to be written down for Step 2. For the image above, /webteam/tutorials/images/rotator/ needs to be written down.

*Note: You must include the ending / when you write down the Folder option. /webteam/tutorials/images/rotator/ will work as a folder path while /webteam/tutorials/images/rotator will not.

The number of files to upload is self explanatory. This tutorial will be using three images. When 3 is selected a page similar to this appears:

For each file, an option is given to Choose File to upload. When that button is clicked the screen will look similar to this:

From that open window files to upload are individually selected.  Once all files have been selected, click Save and Publish.

The images uploaded now appear in dotCMS:



Step 2) Creating the New Widget

Open the page that the Image Rotator widget will be placed on. At the top right corner of the page select Add:


Next select the Add Widget option. The page will look similar to this:

As the image suggests, select Image Rotator. The screen will look similar to this:

In the top right corner click Create New Image Rotator to be taken to this screen:

All of the options circled above should be set in accordance with the needs of the individual slideshow. A brief explanation of each option:

Widget Title: The widget title is just the name used to identify the widget. The above example is using Example Image Rotator. Name appropriately.

Width and Heigh in Pixels: The width and height options are used to define the size of the widget, not the images. Set these options to the height and width of the images you have uploaded to dotCMS. The above examples uses 800 and 600 for width and height.

Path to Image Folder: This is the Folder option that we wrote down in step one. For the example /webteam/tutorials/images/rotator/ is used.

Randomize Images: Whether images appear randomly or in alphabetical order. Default is set to use alphabetical order.

Delay: The delay in seconds between rotation of images.

Once all options are configured, select Save and Publish to complete the creation of an Image Rotator widget.


If everything went as planned, a completed slideshow will be on page similar to the one found on this page:  https://www.uakron.edu/webteam/tutorials/image-rotator-example.dot


Final Notes:

1) Images should always be of the same size in a slideshow. The widget places them each back-to-back inside the page. For this reason, if an image’s width is smaller than the images around it, more than one image will bleed into the screen at a time, making the slideshow look bad.

2) As stated earlier in the tutorial, make sure to include the final / when writing down the Folder field from Step 1. The reason that ending / is so important is that it identifies the final word as a folder and not a file. /webteam/tutorials/images/rotator <– Notice the lack of an ending / in that folder path. dotCMS will identify rotator as a file and not a folder unless the final / is used. Like this: /webteam/tutorials/images/rotator/

Accordion Menu Tutorial

Today this tutorial will be explaining how to set up an accordion menu in dotCMS. An accordion menu is a menu with individual headings that, when clicked, expand to display additional information that relates to the heading. For reference to what an accordion menu looks and acts like, visit the link below. The link below also uses the exact code used  in this tutorial.

http://www.uakron.edu/webteam/tutorials/accordion-menu-example.dot

There are two steps in this tutorial.

Step 1 is accessing the Page Metadata section of your page and inserting code. This is a behind the scenes step and is something that does not get seen by users. Once step 1 has been completed, you do not have to repeat the step in order to effect the accordion menu in any way.

Step 2 is the actual code that will be creating and working with the Accordion Menu. Step two may need to be repeated in order to add more headings to your Accordion Menu.

Step 1) Accessing the Page Metadata.

Right click the page you wish to create an accordion menu on and select Page Properties. Your screen should look like this:

Click Page Properties

Click Advanced Properties next. The screen that appears will look like this:

Paste the code below into the Page Metadata section of your page:

<script type="text/javascript" src="/global/js/q_a.js"></script><script type="text/javascript" src="/global/js/jquery-ui/jquery-ui-1.8.2.accordion.min.js"></script>
<script type="text/javascript">// <![CDATA[
    $(function() {
        $("#accordion").accordion({ collapsible: true, active: 0, autoHeight: false } );
    });

// ]]></script>

Save your setting and move on to step 2.

Step 2) Page Code
Create a new piece of content on your page. Then, set the view mode to Code instead of WYSIWYG. Paste the code below into your page:

</pre>
<div id="accordion">
<h3><a href="#">Heading To Click and Expand</a></h3>
<div>Any and all content you want displayed after we click the heading</div>
</div>
<pre>

Note: The part that reads “Heading To Click and Expand” is where we will put titles of our headings for the menu. The part that reads “Any and all content you want displayed after we click the heading” is the actual content that will be under the heading when we click it. Example:

Before heading is clicked:

After heading is clicked:

Some Final Notes:
1) If you want to add more headings to your menu, it would look like this.

</pre>
<div id="accordion">
<h3><a href="#">Heading</a></h3>
<div>Content</div>
<h3><a href="#">Heading</a></h3>
<div>Content</div>
<h3><a href="#">Heading</a></h3>
<div>Content</div>
</div>
<pre>

The above example would have 3 heading items in the accordion menu. Each new heading item is specified with the <h3> tag.

2) You must use the <h3> tag to create heading items. No other tags will work, as the <h3> tag is specifically defined for this purpose in the CSS that is loaded onto the page.

3) It’s also important to mention than when you paste the page code into the new piece of content you’re creating, you will not actually see the accordion menu. You must save and publish content pieces before you may view them on the page in menu form.

4) There are more ways to increase functionality of the accordion menu. If you would like to know what these additional functions are/how to access them, send an email to web-team@lists.uakron.edu

dotCMS to upgrade in December 2011

The WebTeam

dotCMS will be upgraded December 12th through the 19th.

The plan is that the website will remain up and serving pages throughout the process. However, from the morning of Monday, December 12th until the morning of Monday, December 19th. There will be no editing allowed. (see Emergencies, below)

Forms will continue to work, gather data, and send email notification as usual. All data collected during the period between December 12 and 19 will be migrated to the new version of the website and will be available for reporting, etc.

Why an Upgrade?

Like all software, things move forward. The current version will no longer be supported in the near future. Also, there are many, under the cover, improvements that we believe will enhance the experience for both content providers and for the everyday visitors to our sites. Capabilities that we did not have previously will also become available in the area of customized development that will translate to modernized and extended capabilities that we can offer visitors to UA’s web sites.

What is changing?

All of the changes are in the back-end, visitors to our web sites will not notice any change.

Editors of websites will see a new interface for editing their pages, not a dramatic change but a better organization of the information and hopefully improved navigation throughout.

Training Available

Beginning January 1st 2012 all dotCMS training offered through Software Training Services will be conducted in the new version.

For current users, Software Training Services will provide a delta guide to help you see what has changed. While we believe that this guide will suffice for most current users, anyone who feels that they need more is welcome to attend the regularly scheduled training sessions available through Software Training Services

Emergencies

Please plan for the timing of this upgrade and have all your changes made PRIOR to Monday December 12th.

In case of a real emergency need, the WebTeam will be able to change content that is on the web. However, any changes made between December 13th and December 19th will NOT be preserved when the new version of the site becomes available on the 19th. Approved changes made during this period will have to be reproduced on the new site. The reproduction of this content will be the responsibility of the requesting college or department.

The Schedule

1. Day One: Monday December 12th

* Stop editing
* Send backups to dotCMS
* Run upgrade scripts

2. Day Two: Tuesday December 13th

* Scripts will run for up to 10 hours (it only took 8 hours in staging)
* Link new database with 1.9 installation
* Test login via LDAP
* Deploy all upgraded plugins (they need to be upgraded before the process starts)
* Start testing

3. Day Three: Wednesday December 14th

* Make changes to containers in all templates
* Check category permissions
* Check Host cms anonymous permissions
* Create CMS tabs for roles in dotCMS
* Manually fix recurrent events end date
* Apply all changes manually to VTL files

4. Day Four and Five: Thursday December 15th and Friday December 16th

* Test frontend
* Test all plugins
* Finish applying permissions

5. Day Six: Monday December 19th

* Go live
* Testing by all users and content providers.

New Site Designs

Websites get old and when they get old they get tangled and gnarly. In the past, the solution to this dilemma often was to put up pretty new pictures and change all of the navigation on the site. This would work for a while until the site visitors began to realize that they still couldn’t get to / find what they needed and the shine quickly wore off.

Today, we want to consider what we are changing and why. Who are we trying to reach with our site? How will the experience of the visitor improve? The answers to these questions are about the site architecture, how the site is organized and the content of the pages and not so much about the look and feel.

Beginning in May of 2007 the University engaged a nationally known, educationally focused consulting firm, Dotmarketing. In the ensuing time span we have worked with Dotmarketing to dissect every piece of the current University site at www.uakron.edu. The site at www.uakron.edu is better known as our homepage and comprises our forward looking face. In other words, the primary audience for this site are visitors who are, generally, from outside the University community; prospective students and their parents, corporate and university researchers, potential employees, the press, etc.

Today, the fruit of that labor is ready to show as we have New Web Page Designs, layered over a much improved architecture available to view and a Design Feedback Survey so you can tell us what you think.