University of Akron WebTeam

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

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.

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/

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