• Home
• Students
• Parents and carers
• International students
• Schools and educators
• School holidays
• Directories
• Jobs
• About us

• Site Design and Maintenance
• Planning Your Site
• Commercial Activity and Logos
• Copyright
• Policies
• Backup and Version Control
• Search Engine Optimisation
• Risk Management
• Website Creation Options
• Joomla - CMS
  • Joomla! templates
  • Install and learn Joomla!
  • Install request
  • Basic Joomla concepts
    • Template info
    • Module positions
    • Modules
    • Module positions - Edit
  • Edit page content
    • Members editing
    • Toolbar use
    • Publish roles
    • Publish newsletters
    • Direct linking
    • Dynamic content
    • Media Manager
    • Annual report
    • Inserting images
    • Uncategorised pages
  • Dynamic content
    • Dynamic content
    • Blog - page type
    • Blog - page create
    • Blog - add article
  • Manage components
    • Calendar - add event
    • Calendar management
    • WebLinks create
    • PhocaGallery create
    • PhocaGallery manage
    • Remository containers
    • Remository files
    • Remository files
    • Edit swFreeMenu
  • Manage menu-links
    • WebLinks create
    • WebLinks submit
    • Direct linking
    • PhocaGallery link
    • Remository link
  • User administration
    • New administrator
    • User publish roles
    • Restrict access - Joomla
    • Restrict access - MIS
    • Reset FTP access
    • Manager role
    • Folder access control
  • Common issues
    • Padlocked files
    • 404 missing page
    • Default Toolbar
    • Inserting images
    • Publish Joomla
    • Annual report
    • Image slide-show
    • Wrap image page - create link to "wrapped" page
    • Wrap image page - create HTML page to "wrap"
    • Google maps

Wrap image page - create HTML to "wrap" (step1)

Objectives:

Create image (or other multi-media) pages to "wrap" in Joomla!

• Organise and display images in HTML index file
• Upload image folders and test display
• Lastly: Use page "wrap" feature in Joomla to display images

Organise and display images in HTML index file:

1. Create folders named according to pictures theme 
   •  examples: /swimcarnival or /schoolpics etc...
2. Move related images into respective folders
   • images should be around 30% compressed jpg's
   • should be sized to no bigger than 500px width
3. Use dreamweaver (or another product) to create HTML page to dispaly images
   • limit page to 500px wide (no more than 550px)
   • called page index.html (1 index.html for each folder)
4. In this page organise thumbnails of images down the page
   • (your choice of method - prefer div's not tables)
5. Preview page looks good at 550px wide
6. Test thumbnails display and open when clicked on

Upload image folders and test display:

1. FTP into site and upload pre-organised image folders
   • Test page loads and displays properly...
   • navigate to school website image folder
2. example: http://schoolname.eq.edu.au/swimcarnival/
3. Copy path to use in Joomla when creating "wrap" link

Reset your FTP access account to gain FTP access tutorial

Lastly:

• Use page "wrap" feature in Joomla to display images

^ Top of page

This page was last reviewed on 08 Nov 2010

Copyright | Disclaimer | Privacy | Access keys | Other languages

© The State of Queensland (Department of Education, Training and Employment) 2010.

Queensland Government