Category Archives: images

Simple Image Editors on the Web

Share

Because of a conflict with the progressive design stylesheet we’re using, which adjusts the size of your web page to the visitor’s screen size, the ability to scale a photo within the CommonSpot image dialog box has been turned off.  This means that, while you can add a border or space around an image through CommonSpot image tools, you can no longer resize (scale) from this feature.  Images and graphics need to be sized correctly before being placed on your web page.

For those of you who don’t use PhotoShop, Becky has created a great tutorial introducing two FREE online photo editors that are super easy to use–even for beginners!

iPiccy requires no registration and is easy to use for cropping a picture or resizing.  fotoflexer doesn’t require you to join or register, either, and has many fun special effects. For a great explanation, see this Simple Image Editing

For those Mac or Windows users who decide to try either of these editors, please Yam your experiences using either eidtor on the CommonSpot User Yammer Group.

Resolution Determines the Quality of your Website’s Photos

Share

Understanding the proper resolution for an image greatly improves the quality of the photos in your website and also the load time, both important considerations for web developers.  This is the first in a series of discussions on image resolution, image size and how to edit the photos for your website using both.  Today’s post explains image resolution.

What is image resolution?

Digital images are composed of tiny dots called, pixels.  Each pixel is a different color, so all the pixels put together form the details of the image.

Pixels create image detail

The inset above is magnified to 1600% to show how the colored dots make up the details of the boy’s hair.

Resolution is the density of pixels as measured by “pixels per inch (ppi).”  The more tightly-packed the pixels into each inch of space, the more detail (quality) there is in the image.

For example, the 10 ppi image below left is blurry because there are only 10 pixels per inch in the photo.  The middle image is an improvement at 20 ppi, but is still not a very good quality.  The image on the right gives the greatest detail of the three at 72 ppi.

72ppi is standard

Is there a standard resolution for web images?

While print materials most often use a very high resolution for the most detail, the standard resolution for web images is 72 ppi.  This give the most detail we humans can see on a digital screen while allowing the image to open (load) quickly.  The next post will discuss image size.

Rotating Images with the Cycle Element Tutorial

Share

The newest Custom Element is Cycle Images.  This element uses the Jquery Cycle plugin to create a rotating images effect.  The element has 12 different transition effects.  Several examples of the effects that this element can perform can be seen here: http://www.ecu.edu/cs-training/hallwa/Rotating-Images.cfm.

To use the element, you just need a collection of identically sized images.  The element takes all those images, lets you specify a duration and effect and then creates all the JavaScript and HTML for you.

First, log into your tools page and create a new folder.  For this example, I named my folder rotatingImages.  Then upload as many identically sized images as you want into that folder.  The images can be different types (jpegs, gifs and pngs are all allowed) but for the element to display the images properly, they must all be the same size.  For my examples, I used images 770 pixels wide and 170 high.

Next, add a Cycle Images Custom Element (listed under Custom Elements) to your page.  Then click the “Click here to define the custom element data” link.  A popup window will launch.  Fill in the appropriate fields, like so:

  • Image Directory – the folder name where you uploaded the file.  Required.
  • Time to display – the the length of time in seconds to display each image before the transition effect takes place.  Required.  Must be a number, and  decimals are valid, so you can put 3.5 to display each image for three and a half seconds.
  • Change Duration – The length of time in seconds that the transition should take.  Required.  Must be a number, decimals are valid.  In my opinion, all the effects except the Fade effect look best with short (i.e. less than one second) durations.  The fade effect looks very nice with relatively long (5 seconds or more) durations.
  • Transition Effect – the visual effect that you want as the images change.  The option are:
    • Fade – The current image fades out and the next image fades in at the same time.
    • Cover – The current image remains in place and the next image moves in from the left to cover it.
    • ScrollDown – The current image moves down and at the same time the next image moves down to replace it.
    • ScrollUp – The same as ScrollDown but upward instead of downward.
    • ScrollLeft – The same as ScrollDown but the direction is to the left.
    • ScrollRight – The same as ScrollDown but the direction is to the right.
    • SlideX – The current image appears to fold in to the left and the next image folds out to the right.
    • Turndown – Simulates somewhat the effect of turning a photocube downward.
    • CurtainY – The current image folds in toward the middle and the next folds out from the middle.
    • Wipe – The current image remains in place and the next image is revealed from the top left diagonally to the bottom right.
    • Toss – The current image moves off screen to the right, revealing the next image beneath.
    • Shuffle – The current image moves off to the left and then moves behind the next image.
  • Height – The height of the images in pixels.  Required.
  • Width – The width of the images in pixels.  Required.
  • Margin – The CSS margin desired for the element.  Optional, by default is set to 0.  When using the element as a replacement for the header image, then 0 is what you want.  If you are using the element anywhere else on a page and want to have the image use all the width of the page, you need to set this to -10 (negative 10) to compensate for the inherited properties.

cycledImages

Two final caveats:

  1. If you try to put two of these on a page, only the first will work.  This is because the JavaScript works by identifying the element by its id, and these must be unique.
  2. If you copy a page that this element is on, then if you change anything in this element, it will be changed on both pages, since those pages will be sharing one instance of the element.  You can copy the page and then remove the element and add a new one however to prevent this from happening.

As always, if you have questions, comments or suggestions, please let me know.  And be sure to check out the ITCS Learning Center for lots more information about how to use CommonSpot more effectively.

Lightbox Slide Show Element Tutorial

Share

Today’s tutorial is about the new Slide Show custom element.  This element lets you quickly and easily make a JavaScript lightbox slide show, like the one here: http://www.ecu.edu/cs-training/hallwa/Emirati-Money.cfm (opens in a new window). To make a slideshow like this, just follow these few steps:

  1. Login to your tools page and create a new folder that will contain your slide show images.  This folder must be directly within your tools page (i.e. it cannot be a subfolder of another folder).
  2. Upload your images to the folder.  The images do not have to be the same type or size, so it is fine if you want to have a 1000×500 JPG, 200×400 GIF , and a 250×250 PNG all in the same show.
  3. Add a Slide Show Custom Element (listed under the Custom Elements) to a CommonSpot page.
  4. Use the “Click here to define custom element data” link.
  5. Fill in the appropriate boxes in the form.
    1. Show Name is the display name that will appear on the page. Required.
    2. Image Folder is the name of the folder that contains your slide show images. Required.
    3. Description is free space to put whatever information you want.  This will appear above the thumbnails of your slides.  Optional.
    4. Advance Photos Automatically.  If checked, then the slides will change automatically, though the user will still be allowed to pause the show as well as move forward or back manually.
    5. Duration is the number of second to pause between slides if the “Advance Photos Automatically” option is picked.
  6. Click Finish.

ss_sc_01

The element will automatically create 60 pixel high thumbnails for you and write all the CSS and JavaScript to render the slide show.  The thumbnails are located in a subfolder of your image folder named “tn”, so do not delete this folder or the images within without reason.

At any time you can delete or add photos to your image folder.  If you add photos, be sure to view the page on author to generate thumbnails for the new images.   If you delete photos, you probably also want to delete the associated thumbnails, though this is not strictly necessary.

The order in which the images appear is alphabetical based on the file names, so you can determine the order of the images by renaming the files.

Another option to enhance your slide show is to have each slide have individual text associated with it.  For example, the sample show linked to above has a short paragraph describing each note.

To do this, go to your tools page.  You should have a link named “Slide Show Text Editor”.  Click that.

ss_sc_02

A pull down will appear with a list of all the folder sin your tools page.  Pick the folder that contains your images.  The page will create a web form, load the images and give you a text box next to each.  Enter the text to accompany each image. (If you have already created text for your show, then the boxes should contain that text so that you can edit it).  Simple HTML for formatting is ok (BR, HR, STRONG, EM, etc) but more advanced  tags like links or styles can break the JavaScript that displays your show.

ss_sc_03

When you submit the form, it will create a text file in your image directory named “content.ini” that the show will use to include your text.  Do not delete this file from your tools page unless you want to remove your text from the slide show.

Lastly, the element has applied CSS classes to many of the elements so that you can add some custom styles by including a style sheet if you wish:

  • The entire element is contained in a div with a class named “slideShowDiv”.
  • The show title has a class named “slideShowTitle”.
  • The show description has a class named “slideShowDescription”.
  • The photos are contained in a div with a class named “slideShowPhotosContainer”.

I hope that this element will be useful.  As always, if you have any questions or suggestions, please let me know.