Presentation from Edmedia 2011 on an add-on to the Moodle Virtual Learning Environment that I wrote to show carousels of images on (the typically dull and static) module pages. The code was released back to the community for anyone to use.
Integrating Flickr Images into Moodle to Increase Visual Appeal
1. Integrating Flickr-based Images into Moodle
to Increase Visual Appeal and Dynamism
of Teaching Spaces
Dr. Ian Glover
City University London
ian.glover.1@city.ac.uk
Ed-Media 2011: Lisbon, Portugal – 29th
June 2011
3. Relevant Theory
• Visual information easily integrated into existing knowledge (Lord, 1980)
• otherwise how could we survive the real world?
• Possible separate Visual/Verbal information processing mechanisms (Paivio,
1969)
• Images and words can reinforce each other’s meaning – “multimedia effect”
(Clark & Mayer, 2003).
• Left brain/Right brain split (Gazzaniga,1970)
• Left = sequential, logical (i.e. textual)
• Right = holistic, synthesising (i.e. image-oriented)
• Increased dynamism of web content leads to higher ‘revisitation’ (Adar, Teevan
& Dumais, 2009)
4. ‘A picture is worth a thousand words’
A couple of illustrations…
In Summary:
5. Westworld (1973) [Polish Film Poster]
Plot Summary (from IMDB)
An amusement park for rich
vacationers. The park provides its
customers a way to live out their
fantasies through the use of robots that
provide anything they want. Two of the
vacationers choose a wild west
adventure. However, after a computer
breakdown, they find that they are now
being stalked by a rogue robot gun-
slinger.
6. Trading Places (1983) [Polish Film Poster]
Plot Summary (from IMDB):
Louis Winthorpe III is a successful
Philadelphia commodity broker with
mansion, manservant and girlfriend to
match. Billy Ray Valentine is a hustling
beggar. Winthorpe's employers, the elderly
Duke brothers, make a bet that by switching
the lifestyle of the two Billy Ray will make
good and their man will take to a life of
crime. Suddenly Louis finds himself
uncomprehendingly with no job, no home
and only a new acquaintance, glamorous
hooker Ophelia, prepared to help him. So at
least in one way things could actually be
worse.
7. Moodle Overview
• Default – very plain,
• but can be templated
• Very 'Flat' structure
• Little Dynamism
• Mostly textual.
• Low Visual Appeal
• Problems with adding it.
9. Flickr Basics
Image sharing / cataloguing
site
Some social networking
aspects
Creative Commons aware
Free, limited accounts available
Upload by Email possible
10. Embeddable Slideshow – Flickr’s Own Technique
• Requires some technical knowledge to add to page.
• Moodle strips it from the module homepage – for embedding in resources only.
• Require additional software to view – Adobe Flash.
11. Moodle Tool Overview (1)
Images from a single Flickr
account
Any public account
Starts at random position in
image collection
(depending on configuration)
• Allows scrolling through image
collection
12. Moodle Tool Overview (2)
• Static image when no
JavaScript
• Caption = link to
original on Flickr
• Doesn't save images
on Moodle server
• Stores image details
for up to 7 days
13. Adding/Configuring the Block
1) Add ‘Flickr Image Carousel’
block.
2) Enter account details
• 3 possible options
1) Refine selection using tags
and albums (optional)
2) Save and wait for image data
to be cached
3) Enjoy!
14. An Alternative Method
• Same techniques can display random
inline image:
• e.g. page with 1 photo tagged with
‘statue’, 1 ‘small’ image, 1 from a
music festival – link
• Useful when ‘colour’ needed for a
page
• But not when need a specific image
• Install on server with PHP, use URL
in emails, on web pages, in VLE, etc.
17. Contact details
• Dr. Ian Glover (Ian.Glover.1@city.ac.uk)
• Or try the QR Code
• Code Available – just email!
18. References
• Adar, E., Teevan, J., & Dumais, S. T. (2009). Resonance on the web: web
dynamics and revisitation patterns. In Proceedings of the 27th international
conference on Human factors in computing systems (CHI '09). ACM, New
York, NY, USA, 1381-1390.
• Clark, R. C., & Mayer, R. E. (2003). e-Learning and the Science of Instruction.
San Francisco: John Wiley & Sons, Inc.
• Gazzaniga, M. S. (1970). The Bisected Brain. New York: Appleton-Century-
Crofts.
• Lord, C. (1980). Schemas and images as memory aids: Two modes of
processing social information. Journal of Personality and Social Psychology,
38(2), 257-269.
• Paivio, A. (1969). Mental Imagery in associative learning and memory.
Psychological Review, 76(3), 241-263.