Design help

Here’s a link to a picture of our home page design:

Home page design

There are several differences here from our main design:

  • The banner up top is different. No big deal there, in fact it’s not even shown in the picture.

  • In the content area, there’s an image… or more precisely, an image that changes continuously like a slideshow. Is there a way to implement that using an Image AutoList widget or some other widget? Keep in mind that each image is also a link somewhere.

  • Below the main content, we have two event lists, side by side. Can I have two Event widgets placed inline like that? I don’t even know where to start on styling those.

  • Right next to the event lists, there’s a series of graphics which I’m guessing would be an Image Autolist widget, but I don’t see any way to put them in a grid layout like that. Also, I’ll need some help styling those.

  • There’s a little blue bar with icons on it.

Any words of wisdom or useful tips to get started on this part would be helpful. I could use all the help I can get.

Yes, you can create an image gallery. See 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.

Widgets cannot stack horizontally in a region. You will need to subdivide the containing region into side-by-side regions.

In terms of styling the event lists, you can put a CSS root class on both the region and the widget. These root classes give you a lot of flexibility to style each widget and region differently. Once you define the root classes, you can define CSS selectors on the classes to style each widget.

Again, I don’t see a configuration in the Image Auto List widget that displays the results in a grid. For the moment, using mulitple Image Auto List widgets might be a workaround. As for styling, we provide several styling classes on this widget; see, specifically the section on “Widget Style Properties”.

You could implement this feature in a few different ways. Here’s how I would do it:
First, upload the logo images.
Second, create the region container and define it’s sizing properties.
Next, use the HTML widget to create an unordered list of linked images. Add a root class to the widget so you can select its contents for styling.
Finally, in the CSS, style the list to display horizontally, similar to a navigation bar, and add the rest of the CSS styling.

Hope this is helpful


[QUOTE=rljohnson;17583]Yes, you can create an image gallery. See 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.
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

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 id="middle-row">
rich text widget: bulleted list of images as above

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.

Ok, I’ve read the last few posts and gotten a few good ideas and figured some stuff out, but for the most part it’s a complete information overload. Let’s talk about these things one at a time.

Here’s the section I call the “newsblock”:

…and here’s what I’ve got so far:

several pieces in play here:

news-outer - wraps the whole thing and has a background image with the box, drop shadows, and title bars in place

news-right - sits in the right side of “news-outer” – that’s where “Upcoming Events” and “Announcements” sit.

latest - sits at the top of “news-right” and covers from the top of the box to the top edge of the announcements header bar

announce - sits under “latest” and covers from the top of the announcements header bar to the bottom of the box

news-left - sits in the left side of “news-outer” and covers the “Latest News” area.

The header text, rss icons, and list of announcements are actually rich text widgets appropriately placed in the proper region.

However, the problem I’m having is with the actual events that go in the box:

Is there some sort of “Events List” widget that I can’t find, or do I have to fake it with rich text?

How do I get the dates to go to the side of the event description?

I have a graphic for the bar that separates the events from the description, but is there a nice way of putting that sucker in there using CSS?

How do I generate an RSS feed for these events?

I have a feeling I’m going to get some information overload just on this one little part.

Good, one step at a time.

I’m guessing you want the list of events (or news) to be links - one entry in the list links to the corresponding Event Page (or News Page). In that case, both of these are really just “Lists of Links to Pages” period.

If that is true, do the following:

  1. Create Event Pages in a folder or Section somewhere, use added Folders to categorize these pages if need be (folders will not show up in the navigation but are nice for grouping pages and/or controlling access to pages in the folder). For example, you might have a section called “About GSW” then a sub Section in there called “Events” and then possibly under that Events section a set of sub folders like “Webinars”, “Parents Only” etc.
    1a. You can also use the Template to help define what kind of page any page is. For example, Events are those pages created with the Event Page Template, whereas News articles are pages created from the News Page Template.

  2. In the left side of that box on the Home Page, use a Page Auto List widget. This widget generates a list of links to all pages in a given Section or Folder you select, and can filter that list using other properties such as Template, date, title. In your case select “About GSW/Events” to pick all pages in the Events subsection. If there pages in that section you do not want to include, you can further filter this List by selecting a template (e.g. only pages using the Event Page Template will be included). Finally, if you want, you can go to Layout tab of the home page (or on the home page template) and click the Widget configuration (the Wrench icon) for the Page Auto List widget and configure the list to truncate e.g. show only the first 5 show at any given time). You can also add CSS classes here or in the Style tab for this widget to help with display.

  3. For each Event Page shown in the Page Auto List, the content shown is one or both of the following

  • the Link Text for the page
  • the Summary Text for the page. Summary Text is a small optional rich text field present on every page (go to Meta-data to edit the Summary Text for a page)

Based on your example, I would use the Summary Text to generate the content for each event shown. It could be as simple as having the user enter two paragraphs for each Event into the Summary Text field:

Nov 23
Alumnus named top high school principle

And then the CSS class for that Page Auto List displays them side by side using the larger font for the first p and smaller font for the second p. Or you could make the first “Nov 23” an h2 and second “Alumnus …” an h3, etc. You could even just use the inline styles to do span the “Nov 23” with one class and the “Alumnus …” with another class. The CSS is going to look for p:first-child or h2 or .classname and then size and space the first part “Nov 23” one way and the second part “Alumnus…” the other way.

Mostly this is about how to make it easiest for the end user to enter the Summary Text for a page. My experience would suggest using a header like h2 or h3 for the date and regular paragraph for the rest.

  1. Finally, in the Summary Text editor, the user can then select all or whatever text they want and make it into a link to the current Event Page.

Basically, so far, the Events list is just a “Page Link List” going to Events pages. The Event Widget is really something you probably use only on the actual Event Page, if at all (so far).

You’ll do the News List pretty much exactly the same way. News Pages in a folder or section, a Page Auto List set to that same section or folder, and the Summary Text to generate the entry for each News “row” in the resulting link list.

If you’re wondering, the Event Widget itself is more for a single list page of events where all the events are stacked on one page. For example, you might have a single “Events” page. Each time you want to add a new event, the user would go to the Layout tab, drag a new Event Widget into a region (stacked with all the other Event Widgets) and then save and go back to Content and start adding in the new event info. This means you click into Layout on the page and use drag and drop to sort the Event Widgets, delete an old Widget, add news ones, etc.

For the home page situation you are in, I’m guessing you do not want it work like that. The approach I showed above means that each new Event Page added to a folder automatically appears on the Home Page in the event list box - no need to drag a new event widget into the region each time. The approach I put in above does require the user to know about the Summary Text field when they create a new Event Page, but no one has to touch the Home Page each time a new event is created.

Just realized in step 3, the words “Alumnus named …” might already be your link text value for that event, in which that doesn’t need to be re-entered into the Summary Text.

The Summary Text is used to add more text to describe a page - more than what is already in the Link Text. Either way, you still use CSS to set the fonts, size and position.

First step here is to use the Auto List Widget and get it to dump out that page link list. Then we can style and/or add more Summary Text to each “row” of the list.

Yay! I got it (kinda):

…now how do I generate RSS feeds for the “Upcoming Events” and “Latest News”?

EDIT: I’ll explain how I did it:

Mostly how Vern described it… I have pages in About-GSW/Events and About-GSW/News that are using a “GSW Events” template (for now it’s blank, but I’ll work on that later), and used a page-auto-list for each event list. The name of each page is the text that appears on the right, and the date is an h2 sitting in the page’s summary.

My CSS makes both ‘a’ (since there’s no paragraph inside the list item) and ‘h2’ inside the list float to the right (so the date is to the left of the summary), and displays them as “inline-block”. The little separator image is actually a background image on the anchor block that doesn’t repeat. After a few hours of fighting with padding and margins, I get what you see here.

Looking good!

On RSS you have two main options:

  1. Use a third party RSS generator
  2. Wait a month or so for the CM1 built-in RSS generator feature.

What is your time frame?

Here is ours:
v1.5 is already done just about now - goes into QA in a few days.
v1.6 is just starting, and it so far adds a Web Forms Widget - but that takes us up to mid November.
Blog, RSS, and some “on demand” publishing features are slated to roll in right after that, going to the end of year (1.7 and 1.8).

We might be able to bump RSS into 1.6 (mid Nov.) but there might be a dependency on some of the publishing features so that could mean mid Dec.

If you can’t wait, we can start down the path of how to do it 3rd party for your site for now.