Photo Galleries

Top
  • ProcessWire Made Easy: HollyWorks Help Site logo

    • Website Design & Layout
      • Primary Navigation
      • Footers
      • Social Icons
      • Facebook Sharing Image
      • Button colors, shapes
      • Sidebar Additions
      • Logos
      • Menubar
      • Code (eg. Google Analytics)
      • Page Top Options: Slides, Video
    • How to...
      • Logging In and Out
      • The Document Tree
      • Create a Page
      • Choosing a Template
      • Basic Page Layout
      • Editing a Page
      • Adding Content: Text
      • Styling text: Blockquotes
      • Adding Content: Images
      • Cropping & Resizing Images
      • Adding Content: Links & PDFs
      • Adding Content: Video
      • Viewing a page
      • Page Commands: Move, Hide, Delete
      • Page Top Photos
      • Page Tops: Slides and Video
      • Feeds: Blog, Events, News, Logos
      • META Data
      • Add code to the template (Google Analytics, etc.)
      • Create Sitewide Navigation
    • Content Features
      • Blog
      • Blog Authors
      • Calendar
      • Media
      • News
      • Photo Galleries
      • Priorities
      • Publication Library
      • Legislative Tracker
      • People (Staff, Trustees, Board)
    • Landing Page Displays
      • Basic Landing Page Structure
      • Accordions
      • Big Hero
      • Call to Action
      • Centered Image with Caption
      • Code Block
      • Fat List
      • Mini Gallery
      • Multicolumn with Images
      • Nav Bar
      • Overlay Block
      • Panoramic Image
      • Photo and Copy
      • Quick Text
      • Sliders and Carousels
      • Spacer
      • Two Cards
      • Page Top Alerts
  • Contact
  • Website Design & Layout
    • Primary Navigation
    • Footers
    • Social Icons
    • Facebook Sharing Image
    • Button colors, shapes
    • Sidebar Additions
    • Logos
    • Menubar
    • Code (eg. Google Analytics)
    • Page Top Options: Slides, Video
  • How to...
    • Logging In and Out
    • The Document Tree
    • Create a Page
    • Choosing a Template
    • Basic Page Layout
    • Editing a Page
    • Adding Content: Text
    • Styling text: Blockquotes
    • Adding Content: Images
    • Cropping & Resizing Images
    • Adding Content: Links & PDFs
    • Adding Content: Video
    • Viewing a page
    • Page Commands: Move, Hide, Delete
    • Page Top Photos
    • Page Tops: Slides and Video
    • Feeds: Blog, Events, News, Logos
    • META Data
    • Add code to the template (Google Analytics, etc.)
    • Create Sitewide Navigation
  • Content Features
    • Blog
    • Blog Authors
    • Calendar
    • Media
    • News
    • Photo Galleries
    • Priorities
    • Publication Library
    • Legislative Tracker
    • People (Staff, Trustees, Board)
  • Landing Page Displays
    • Basic Landing Page Structure
    • Accordions
    • Big Hero
    • Call to Action
    • Centered Image with Caption
    • Code Block
    • Fat List
    • Mini Gallery
    • Multicolumn with Images
    • Nav Bar
    • Overlay Block
    • Panoramic Image
    • Photo and Copy
    • Quick Text
    • Sliders and Carousels
    • Spacer
    • Two Cards
    • Page Top Alerts
Contact
ProcessWire Made Easy: HollyWorks Help Site



Creative Consulting • Design for People • Smarter Programming • Global Publishing • Contact: Holly@HollyWorks.com

BoilerPlate Books, LLC |  Holly Valero  |  HollyWorks Web Design

See it live: demo site photo gallery

Creating a photo gallery with the gallery template is a snap. There's an optional page top image, gallery controls for colors and styles, and finally – your photos

Begin by dragging in your pictures...

Adding captions in the form of descriptive alt tags is simple:

Overall gallery controls include a classic or flex gallery. The classic gallery means all photos are the same size. Flex arranges them to fit.

Page width can be full page or panoramic. For flex galleries, you can add a gap between the images, or snap them together. Text color and background color applies to the whole page.

Here's a sample of a panoramic Flex gallery, with 10 pixel gap and light text on a black background:

And here's a sample of a classic gallery with a white background:

Clicking any image will offer a pop up in a light box -- and the alt text caption is visible here.

  • Blog
  • Blog Authors
  • Calendar
  • Media
  • News
  • Photo Galleries
  • Priorities
  • Publication Library
  • Legislative Tracker
  • People (Staff, Trustees, Board)
ProcessWire Made Easy: HollyWorks Help Site



Creative Consulting • Design for People • Smarter Programming • Global Publishing • Contact: Holly@HollyWorks.com

BoilerPlate Books, LLC |  Holly Valero  |  HollyWorks Web Design

linkedin-in