Setting up EDAS D8 - Tracking page

This is the plan for moving ealingdean.co.uk from D7 to D8.

Basic configuration

  • D8 Basic installation => DONE
  • Twitter - basic integration & proof of some autotweet => DONE
  • Admin efficiencies/improvements => DONE/IN PROGRESS
  • CLI-based snapshot tools - backup with date point => DONE
  • CLI-based snapshot tools - restore => DONE
  • Minimal taxonomy setup to support site development => DONE

Initial setup

  • Import some basic content - history pages with images
  • Import some basic content - blog
  • Import some basic content - other?
  • Basic event content type => DONE
  • Basic calendar p.o.c. => DONE
  • Private area (committee or other flexibly defined group?) => DONE (facility there)
  • Different section, different theme? (radbourne, halloween etc) [project/switch_page_theme?]
  • Create initial user permission groups => DONE
  • Configure content type: blog => DONE
  • Configure content type: basic page => DONE
  • Configure content type: article => DONE
  • Configure content type: press release => DONE

Wysiwyg & user workflow

  • CKEditor setup => DONE
  • CKEditor extensions/modules => IN PROGRESS
  • Image upload and management (drag&drop? resize? IMCE?) => DONE
  • Colorbox (or alternative)
  • Comments against content type?
  • Media embedding - image and video => DONE
  • Set up IMCE paths

Look and feel

  • Theme installs - Creative responsive => IN PROGRESS
  • Theme selection => DONE
  • Initial theme tweaking => DONE
  • Home page layout => IN PROGRESS (need to solve content/block ordering)

Full setup

  • Calendar & events - full content type, nicer display output
  • Calendar - listing format => DONE
  • Infinity scroll
  • Auto-tweet using site account
  • Render latest tweets in block ("Twitter block"?)
  • Set-up home page content
  • Picture gallery?
  • User pictures/avatar
  • User profile setups (fields of)
  • How to migrate existing content paths from D7 to D8?
  • Site backup (backup_migrate ... backup_migrate to google drive, s3 or dropbox?)
  • Creation of user permission groups
  • Read count statistics for comments
  • GA / other stats support
  • Final taxonomy definition
  • Styling for event calendar (move the view into a block and have another block on the page display a specific event?)
  • Display layout for individual Press Release => DONE
  • Display layout for Press Release listings => DONE
  • Display layout for Blog posts
  • Display layout for Blog Teasers
  • Display layout for /Blogs listing
  • Update carousel to be easier to manage slider content (content type, views etc)
  • Display layout for News Page
  • Headline block for News for front page
  • Configure contact form
  • Privacy policy page ( /privacy-policy )
  • Styling of content edit pages for non-admin users
  • Create Press Article content type => DONE
  • Create Press Article view (block) & add to Press office page => DONE
  • Update Press Release view mode for the Teaser to resemble the usual format (as the Press Office summary page now uses a view based on fields not based on the DS-Teaser) => DONE
  • Set consistent Teaster format for /news page.
  • Install to TSOHOST Staging for testing  

Final stages

  • Full content import
    • Press articles
    • Press releases
    • Articles
    • Blogs
  • Refresh content for new site
  • Content sync/update
  • Module updates to latest
  • User account creation
  • Unpublish/clear-down site development content
  • Create event content

Post launch

  • Can users subscribe to nodes? (get notified of updates?)
  • Sub-sites (194, radbourne, events etc....)
  • Can we use social login for user accounts on D8? (ie. if user is member of N.Allot group?)
  • Investigate possible google drive integration (meeting minutes)
  • Allotment sign-up form integration (webform ->google: webform_google_exporter)
  • Upload gallery pics via drupal to a google or drop box account?
  • Facebook integration
  • Displaying minutes docs from word etc? (gdoc_field)
  • Deploy CDN (cloud flare or f.o.c alternative?)
  • jquery calendar display (nicer refresh clicking through months) => DONE
  • Call Colorbox to IMCE/Image dialog???
  • Tokenise default values for Press Release

 

English

Comments

  • https://www.drupal.org/project/calendar
  • https://evolvingweb.ca/blog/creating-events-calendar-drupal-8
  • https://www.ostraining.com/blog/drupal/d8-calendar/
  • https://drupal.stackexchange.com/questions/230599/drupal-8-calendar-and-events
  • https://drupal.stackexchange.com/questions/230599/drupal-8-calendar-and-events/230674
  • http://drupal8.support/en/modules/calendar
  • https://www.linkedin.com/pulse/how-create-event-calendar-drupal-8-kumar-rahul-sankrit/

Common theme seems to be create an Event content type, that includes a date field.  Use Calendar module for rendering.  Good reference https://evolvingweb.ca/blog/creating-events-calendar-drupal-8


Example calendar layouts:

https://discovernewfields.org/calendar/portraits-of-our-city  - per event display

https://www.flickr.com/photos/mgifford/tags/eventcalendar/

 

This is an example of a paragraph of text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

1/ Need to look at behaviour of top banner when viewwindow is between 756 and 992 - Site Name and social icons don't sit well together within this range.  This is due to the theme have @media breakpoint at 756 and bootstrap having breakpoint at 992.  I've not covered how to display between these ranges.

@media 756->992 (look at .col-md-3 & .col-md-9 in bootstrap.css defaults and theme custom-media.css)

2/ Breadcrumbs look broken - like a list instead of a line.. => Breadcrumbs removed (I think I had to fix this in D7 theme else)

3/ Copy the call-to-action images from existing website to new website (some sort of package?)

4/ Get vertical call-to-action images made slightly smaller & upload to new website (package?)

5/ Find a way to make header shrink in depth when page is scrolled up

6/ Install Pages module(s) for front page - No need: Being addressed using blocks & content albeit currently an issue with block ordering on the homepage

7/ Adjust header colour to match existing

8/ Font awesome download fails - Fixed - Path in theme seemed to be incorrect; Fixed with symlink in theme (should probably be fixed at point in the theme code where the URL is generated)

9/ Adjust banner font, size & remove hover underline => DONE (font size/weight should still be looked at)

10/ Author in a block: https://drupal.stackexchange.com/questions/207238/show-authors-info-in-a-block

Ace Editor
Blazy *- library??
Breakpoint *-
CKEditor Anchor Link *- DONE
CKEditor Media Embed plugin *- DONE
Crop API *- image cropping
Diff *- changes between content revisions
Display Suite *- DS - DONE
DropzoneJS entity browser widget *- drag and drop image upload
dropzonejs *- 
Embed - framework for embedding things !
Entity *- entity to be in core one day
Entity Browser *- 
Entity Embed *-
Entityqueue *- 
External Links *- 
Focal Point *- image editing
Field Group *- grouping fields on form and display
Media entity *-
Media entity image *-
Media entity document *-
Ultimate Cron
Video Embed Field *- DONE
Video Embed Media *- DONE
Video Embed WYSIWYG *- DONE
Views Infinite Scroll *- 
Views Reference Field *-
 

Slider shows on homepage but not on newspage... need to work out why...

... it doesn't seem to obey the "Pages" visibility settings in the Block Settings pages.

  • Reduce depth of header
  • Change colour of header background (edas green?)
  • Reduce size of logo
  • Update facebook link to external facebook page
  • Disable google+ link
  • Tweak title font weight (reduce?)
  • Remove the zymphonies footer; Update the (c) footer
  • Disable the contact page link at the bottom of the pages

Frontpage seems insistent on displaying "Main page content" *last* - ie after Mailing list signup form in this case.

Is this a theme specific issue?

Screenshot of block layout screen

Image upload dialog in comments (for full html only) seems badly laid out.  This is not as it's seen in content (article, basic page) edit dialog...

Image upload dialog

Does the linkit dialog have the "Add Link" and "Edit Link" dialog titles the wrong way around?

 

?? Why ??  (this was on a blog post)

Is it 

- filter ordering

- availability of editor more for the blog post?

- some html tags that are allowed in "full" but not in "comprehensive"?

Source suggests it's removed entirely!

 

And Autoplay doesn't seem to work.

Issue is in the HTML tag limits in the comprehensive profile didn't allow anything - not even iframe.

HTML that works:

<iframe allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/9o3r5wCm6AA?rel=0&amp;showinfo=0" tabindex="-1">

Currently now (after adjusting the comprehensive profile):

<iframe allowfullscreen scrolling src style tabindex>

Here's the working code from Full HTML profile:

<iframe allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/9o3r5wCm6AA?rel=0&amp;showinfo=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" tabindex="-1">

with the update Comprehensive profile, the filtering results in...

<iframe allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/9o3r5wCm6AA?rel=0&amp;showinfo=0" tabindex="-1"> ie. the style is still missing - which help text says will always be stripped... So Q is now, how to avoid the style attribute being stripped?

- swap around the filter ordering? (wasn't there a reason it's as it is?) - change style to class? (how to get this auto-added by the Video embedder?) - other switches / toggles in the config (either video embed or ckeditor) - other classes?

 

https://www.drupalaid.com/blog/enhancing-ckeditor-in-drupal-8

CKEditor wordcount

CKEditor Anchor link (already there?

Compacting the sign-up form... Move postcode to alongside email address and move Firstname/Lastname together

Screen%20Shot%202018-02-18%20at%2022.43.03.png

Key is to change display: block to display: inline-block for all 4 <input> tags.

Also added "placeholder="<text" " to each on (especially first & last).

If needing specific widths for inputs, try 135 for each..

 

aa

So.. the situation with colorbox:

- The colorbox-inline does seem to render image in colorbox if they have the correct <a href></a> tag around the <img>

- The trick/issue is getting the <a href></a> tags inserts around images that are but into the body by the image2 or imce ckeditor plugins

- From looking at image2, there patch to add imagestyles to image2 might provide hints.  So far, it seems a crucial part is where a the new image code seems to be "fire"d into the ckeditor content/iframe.  But it's not (yet) clear how or where this img content is built or how (then) to add a <a href>.

- In drupal 7, the insert module must create the "correct" <a href></a> tag and "fire" it into the body - some once the "where in code" is found (above), some of "what is done" from D7 insert module may be pertinent.

- Meantime, colorbox is blocking site development, so to avoid this, I'll "park" colorbox and continue without it.  At a later time, content may have to be re-edited to add the colorbox tags, or the tags can be added manually.

- Research points to how solve: ckeditor plugins, drupal extensions to ckeditor, imce d8 code

 

Category