Best Way To Create Pages with Multiple Possible Sub-layouts

• Will

• January 7, 2014 at 7:12 am

Hi,

Looking for thoughts/experiences/advice/gut check if you have a moment.

Requirements presented to me: Editorial wants content authors to be able to put to together long scrolling “rich media” pieces with varied sub-layouts throughout the page (see bottom of this message for examples). Sub-layouts might include: Full width, full screen and centered (e.g. within main layout column) images and/or videos and/or galleries, wysiwyg text, full width pull quotes, left/right pull quotes… to name a few. Oh, and: “Presume content authors can not write HTML at all”. 🙂 ACF to the rescue! Or is it?

The plan up until today was to use the amazing Flexible Content module to create a UI for authors to select a sub-layout module type and then populate content. I started creating some of the field sets and I’m pretty sure I’m going to run into a wall with this method or wind up creating 100 layouts for the smallest of variations, annoying both content authors and myself! And… even if I were to make all of those Flexible Content layout variations, interpreting those fields correctly on the template side is going to be tricky at best and impossible at worst – some of these variations are variations within a layout module, like left/right/fullwidth pull quotes.

I think what I want is for people to be able to, for instance, insert a media object and also select a layout type (eg. inline or full screen). Something like two fields in the Flexible Content layout (for media sub-layouts anyway): One for the media object, one a select box with the possible wrapping class names to change the layout.

Another challenge is the pull quotes that can jump out to the left or the right of the main content – in the midst of what would otherwise be generic wysiwyg text. I think I’m going to have to add classes to the wysiwyg interface and teach authors to select them. Or is there another way you’ve tried?

Anyone have any advice on how to tackle this? Partial advice and random thoughts most welcome!

For what it’s worth, though the requirement for “no html” is understandable, this is an internal project and I work with awfully smart people. That is to say, I’m not handing this off to a client at a different organization and these authors are definitely trainable. I’d much rather make it an HTML free experience for them so that they can concentrate on writing but I am be open to being told that the goal is silly!

Thanks in advance for reading this far and sharing any thoughts.

Cheers,
Will

——————————————————————–

Example Sites:
Seattle Times Article
Oregon Public Broadcasting Article

I’m pretty sure that these examples are hand crafted HTML/CSS – not at all CMS driven. But that’s cheating!

Here’s the current list of sub layouts:
All get:

• Optional bottom divider Line (thinking global checkbox on all layouts)
• Optional alternate background (thinking select box with options, mapped to .classes in the template)
• All Images/Videos/Maps will require:
  • Description
  • Attribution
• Videos can be vimeo, youtube or local

Sub Layouts

1. Page Header
   • Headline
   • Fullscreen top image
   • Intro Text
2. Full Screen (* each)
   • Image
   • Map
   • Video
   • Gallery
3. Full Width – vertical scale as needed (* each)
   • Image
   • Map
   • Video
   • Gallery
4. Inline – within main layout column (* each)
   1. Image
   2. Map
   3. Video
   4. Gallery
5. Centered Text (default)
   1. Simple RTE
   2. Pull quote styles?

• Elliot

• January 7, 2014 at 1:42 pm

Hi @willthemoor

The flexible content field will be your best bet for creating the editing interface for this level of customized content.

I agree that you should use a select field in each layout to allow for layout specific alteration such as column width and alignment.

You can also use some conditional logic to hide sub fields within the layout if you fear that there may be too many fields at once.

As for the pull quote issue, perhaps think about using shortcodes in your WYSIWYG field to allow for the alignment instead of classes.

Good luck

Thanks
E

• Will

• January 7, 2014 at 1:53 pm

Thanks a lot for the reply @elliot. As you can probably tell from the length of the post, my eyes started bleeding thinking through it. Going to start building it again in earnest tomorrow.

Shortcodes for inner content differences is (suddenly!) obvious and brilliant. Thank you!