[QUOTE=rljohnson;17583]Yes, you can create an image gallery. See http://help.percussion.com/cm1/Converting+an+Image+AutoList+into+an+Image+Gallery. Right now, I don’t see a configuration in the Image Auto List widget that allows you to put links to other pages on the images. We might need an enhancement to the widget to support this functionality, or Vern may have a workaround. One of the other image gallery plugins may provide this capability as well. We link to several on the wiki page I noted above.
[/quote]
My first thought looking at your main slider was to use the Rich Text widget to create composite panels of both image, text and link. You’ll get better link zones and SEO that way too.
Doing it this way you can assign page links to images however you need and use css to set z-levels to overlay text over the image.
In the Rich Text Widget, you create enter a DIV for each panel, and then an inline link and an inline image. You end up with something like this (forgive the missing close tags):
<div id=“panel-1”>
<p> image
<p> link
<div id=“panel-2”>
<p> image
<p> link
etc.
The div’s in the above can be manually entered, but once you’re done, the users can still edit the link and image.
Alternately, if the number of panels is known and fixed, you could one rich text widget per panel and use the “free” div you get with each widget.
Next use the same instructions in the link Bob provided above to render the list of panel DIVs in a slideshow effect. The CSS you need to skin it will depend on which slider you pick.
Doing this with a rich text widget does mean the list of images (panels really) now has to be manually updated each time you add a new panel, but the benefit is the text and image are easy to edit and fine tune to match the all important “home page look” that every designer spends all their time on. Image Auto List is for more “cookie cutter” situations like in Flickr or something.
(Note: We do plan on offering a panel slide show widget but for now, rich text widget plus inline divs, or rich text widget multiple times over does the same thing.)
The next step is enabling a slider to look like the design. I’ve seen many that look like your design, so it shouldn’t be too hard. The CSS for that will be based on the slider you pick.
Widgets cannot stack horizontally in a region. You will need to subdivide the containing region into side-by-side regions.
Note: If you’re good with css you could reposition the widgets horizontally, but they will stack vertically during editing.
I do strongly agree with using regions to do horizontal positioning, because that way you can mix and match the widgets later on without impacting the size of columns and such if you move the widgets.
In terms of styling the event lists…
The Events and News list in your page are both most likely done with Page Auto Lists Widgets - two widgets each in a region of it’s own so they stack nicely side by side. The Event Widget is then actually used on an Event Page template (if at all). This way, each Event (or news) gets it’s own “perma page” and then the Page Auto List would be used to generate a list of links to Event Pages, probably based on a Section or maybe a Folder in the section.
Again, I don’t see a configuration in the Image Auto List widget that displays the results in a grid.
I would do this the way you did the panel slider above, but it’s easier - that is, use a Rich Text Widget and a bulleted list of Inline images with CSS to turn that into a grid. This list of images looks more like a pre-defined element not some dynamic block of images that change day to day. You can still make it very easy to edit - as all the text and images are still assets.
Specifically, you could do a region for each row, and then use a simple Bulleted list of images (in a Rich Text Widget, one per region row) to make it very easy to edit. Something like this should work:
<DIV id="top-row">
rich text widget: bulleted list of images and text in the top row, done with native bullets in rich text editor - one image and text link/caption per bullet.
</DIV>
<DIV id="middle-row">
rich text widget: bulleted list of images as above
</DIV>
...
Then in your CSS you do things like this
#tow-row {
width: 150px; /* set the width and other box sizes of the region row over all */
}
#top-row li {
list-style-type: none; /* make LIs render like boxes, not bullets */
width: 50px; /* set the size of each LI "box" in the row */
}
#top-row li img { /* put in any image border or other stuff for images in this grid */
}
We did something like this in Bright Voyage the same way.
Alternately, if yu need to change rows a columns more than this, you could even skip the regions and do it all with one big Rich Text Widget and use the inline styles for bullets such as “list-1” (etc.) Similar css to the above in either case, but now you’re hooking it to the inline styles rather than to the regions (assuming the whole thing is inside a region named “grid”)
#grid ul.list-1 { /* row width */
}
#grid .list-1 li { /* li box style as before */
}
The blue bar could be an image auto list or done the same as the grid. The big benefit of Auto List is if the SET of images change all the time - like some days its’ ten images and then a day later it’s up to 13 and then the day after that it’s down to 8.
If it’s just about making sure all the images are editable, but the SET of images is fairly static (or is edited all at once if any one image changes) then use Inline images in a Rich Text Widget. Remember, all images are assets, and the text can be assets too - so your users can always go to the asset library to edit the pieces without even directly going to the home page (if you’re concerned about them messing up the grid).
This is just an outline of ideas, I’m around to help with specifics as you continue to work through it.
