Skip to content

Paragraph types for basic layout of most content bodies

Jump to bottom
Joshua Mitchell edited this page Jul 2, 2018 · 5 revisions

Text

  • options:
    • background (?)
  • editor options:
    • Paragraph format (Paragraph, Heading 2 through 6 — Heading 1 is the page title)
    • Bold
    • Italics
    • Unordered list
    • Ordered list
    • Link
    • Unlink
    • Horizontal rule
    • Strikethru
    • Superscript
    • Subscript
    • Remove formating link (handy for dealing with MS Word cruft on copy and paste)

Image

  • options:
    • Default width (width of content area)
    • Full width (breaks out of content area to full width of page container)
    • Align center (width of container or image with nothing on either side)
    • Align left (aligns to the left with wrap of text container directly below it)
    • Align right (aligns to the right with wrap of text container directly below it)
      • For both align left and align right, the image style should limit the size of the image to 2/3 of the main content area or less.
  • fields:
    • media library or add
    • caption
    • alt text (required!)
    • headline/title (?)
    • link (?)

Video

  • options:
    • Default width (width of content area)
    • Full width (breaks out of content area to full width of page container)
    • Align center (width of container or image with nothing on either side)
    • Align left (aligns to the left with wrap of text container directly below it)
    • Align right (aligns to the right with wrap of text container directly below it)
      • For both align left and align right, the image style should limit the size of the image to 2/3 of the main content area or less.
  • fields:
    • media library or add — YouTube and Vimeo(?) to start
    • caption
    • headline/title (?)
    • link (?)
    • transcript (large text field that can have formatted textual description of the full contents of the media)

Audio

  • fields:
    • media library or add — Need to determine player
    • caption
    • headline/title (?)
    • link (?)
    • transcript (large text field that can have formatted textual description of the full contents of the media)

Document

This will reference a document that has been uploaded as a Drupal entity. In general, we want people to add documents to the group and rely mostly on the group list of documents to manage those files within their group. So they won't be able to add a document via this widget just yet. (Unfortunately, the group context does not pass to the node edit page, so we can't dynamically add more group content from within just yet. An issue is open that I'm following.)

  • fields:
    • Title
    • Summary (optional)
    • media browser to select a document (has filters to be able to get just documents from the group and is limited by the users permissions)
  • display notes:
    • show document type as an icon

Quote

  • options:
    • background (?)
    • border
    • text size (normal, large)
  • fields:
    • Text (with options for bold, italics, and strikethrough)
    • Citation (text field to format the citation differently than the main field)

Columns equal

Equal means equal width and height with a gutter between each column by default.

  • Spacing:
    • card-deck|Space columns
    • card-group|No space columns
  • Width:
    • Default width
    • Full width
  • border:
    • none
    • dark
    • light
    • group
  • background
    • none
    • dark
    • light
    • group
  • Buttons to add the following:
    • Text
    • Quote
    • Image
    • Video
    • Audio
    • Document
    • Content reference (can reference a teaser of any other content type that links to that content)

Possible future types

Tableau

I think a Tableau media type could be really handy. Ideally it would force our editors to enter both a desktop and mobile version of embed code. We could then do some device detection to layout out the content accordingly.

Tabular data

A paragraph that has a specially built table editor that helps content editors create a mobile friendly table. This will take some thought as I have not seen a great example of this in action, but I have some ideas for how it could be done.

Uneven columns

One of the issues with column layouts is that a lot of people want to use combinations like 33/64, 64/33, 25/75, ad 75/25. I hate the idea of having to have so many layout options for stuff that is essentially stacked for 50% plus of our users. :)

Tabs

This seems to be a popular way to squeeze content into a page, but I feel like there are some usability issues that we should resolve with the service content type before we commit to this type of layout on the page.

Clone this wiki locally