Working With “Dynamic” Content

Sometimes I’m asked to create custom slideshows or other HTML features that would be difficult to edit without knowing at least some basic HTML (typically because they are animated in some way).  In cases such as these, I can give users the ability to nonetheless create content on their own, using the standard HTML editor, after which, their individual, static entries will be concatenated to create the final dynamic piece of content.  For an example of this, please see http://wgac.colostate.edu/slideshow.

What’s going on here is that the static content from the individual HTML modules is being joined together to create the slideshow at the top of the page.  If a content editor wishes to add a new “slide” to the slideshow, they would take the following steps (again, using the above url as my example):

  1. After Signing In As An Administrator, Click Edit This Page
  2. Enter whatever title you want for the content – it will be ignored by my little slideshow builder.  In this example, I will type, “Main” and click “Create New Content”
  3. Enter another title, such as “Thumb” and click “Create New Content”
  4. We now have 2 HTMLContent module instances into which we can add our slide info.
  5. Click “Edit” next to the “Main” module title
  6. Click the Content Template icon in the lower left hand corner of the editor bar.  The icon looks like this: Content Template
  7. Scroll to the bottom and select the custom template that was created for you (eg, “Slideshow – Main”).  If nothing appears, please consult with your resident web developer.
  8. Now simply edit your image/text to reflect the content for your new slide, then hit Update to save your changes.  The only gotcha is that you would need to make sure that you are inserting images that are identically sized (both main images and thumbnails); otherwise the slideshow would look funky.  And, in the off-chance you are uploading images larger than 550px wide, be sure to uncheck the box for “Reduce Image Size For Web”.  Anyways, most any image editor can resize/crop photos easily, or it can be done for free online at http://www.shrinkpictures.com/.
  9. Repeat steps 5-8 for your thumbnail area (selecting “Slideshow – Thumbnail” as the template), and you’re done!

 

Working Directly With Slideshow – Basics of HTML

Editing moving parts on a website usually requires knowledge of HTML.  Let’s take the most common example I see: slideshows.  When you are editing a slideshow using the HTML editor that’s built into your site, you may only be seeing one slide at a time.  To edit the other slideshow slides, you will have to follow the directions below.  Note that I’ll be using the slideshow as shown at http://sass.colostate.edu/ for this demonstration.  Before we begin, I highly recommend that you take a look at some HTML samples at http://www.w3schools.com/html/html_examples.asp and that you understand what <li>, <a> and <img> elements mean in HTML.

  1. To be safe, first back up the content in question to your sandbox page, as per backing-up-content.
  2. Now that you have a duplicate of your content in a test area (so that the general public won’t be seeing your edits/possible mistakes smiley), let’s begin editing HTML.
  3. Once editing the slideshow on the sandbox page, click “Source”.  You should see something along these lines:Source Code
  4. You’ll notice that in the above code, I have added comments to indicate where a slide begins and another ends.  When you want to add another slide, all you have to do is copy what’s between the comments (the list or <li> elements) for a slide.  Then, you simply paste that code at the end of the last slide (in this case, after <!– End Main Slide #4 –>.  Note that most all HTML elements have opening/closing tags.  So, our image “list” is comprised of a bunch of <li> elements which are closed with corresponding </li> elements.
  5. We’re not quite done –  there are two parts to the slideshow, the main image and the thumbnail.  Now that we’ve already copied the main slide, we also have to copy the thumb slide, which is this snippet of code: “<li><a href=”#”><img alt=”Ram Good Time Auction” src=”/Data/Sites/8/ram-good-time1.jpg” style=”width: 106px; height: 63px;” /></a></li>” (not shown in the above screen capture – in your own slideshow the code may be different, but it should begin/end with an <li></li> element).  Once again, copy the snippet to the end of the last thumbnail in the code.
  6. Individuals who are comfortable working in HTML can continue editing in Source view to update text/repoint links to a new image, etc.
  7. For those who aren’t, click “Source” again to switch back to the main editor.  You should hopefully be seeing your new slide, which you can edit as you desire (eg, switch out the image, or replace text).  Please be sure your image is the same size as the other images in your slideshow.
  8. If you wish to move slides around, simply switch back to Source view and cut/paste the appropriate <li></li> sections in whatever order you wish. Just be sure that, if you move a main slide, that you also move the corresponding thumbnail!
  9. If your slideshow appears correctly with your edits, you can follow step #10 at backing-up-content to paste the code back onto the “live” page.