Dynamic parallax in Drupal 8 (draft)

I wanted to get a flexible parallax-style front page to highlight important sections of a|the website.  After reading/watching a number of articles on it, online, I reckoned I had the general idea, so set about replicating it.

The original arrangement used custom blocks, and worked reasonably well. Whilst that was ok for showing the theory I wanted to avoid it having to be an admin user to make changes (or someone else with layout/block edit rights). What I really wanted was for the parallax entries to be definable by a "more ordinary" user - i.e. someone with content editing rights but not site-wide admin.

I had an idea that what I wanted was to define a view that would generate the appropriate content/blocks/sections based on nodes that could be easily edited. The view would be fixed and would provide a page or block that would be permanently in place. This would admin-only to change. But the view would build based on content-editor created content.

A challenge here though was that whilst views generate page content, they generally rely on styling from classes defined in stylesheets which the view doesn't modify. Of course, most styles can be injected into the elements but I wanted to avoid this so much as possible....

The solution became this:

  • build a basic view with as little formatting as possible
  • copy the view module's default template for a view's unformatted html into my theme
  • remove from the template the part where the "row content" is inserted for each row
  • replace with the required divs and other html for a single parallax
  • insert field (by the apprioraite elements of the 'row' variable) as the background-image for the parallax background image
  • insert fields (by the appropriate elements of the 'row' variable) in for the overlay's Title and Content areas (or anything else)
  • add javascript to do the clever updates to the various divs (based heavily on the examples from the tutorials but modified to seach for all parallax entries in the document (hint - I added a specific class to all of them, then can get the list of elements by class & iterate that)
  • For testing - I created 3 simple 'articles' with appropriate image, title and body. I added these nodes as criteria in the view (very specifically just the nodes by ID -- I'm satisfied I can do whatever with the filter once the actually parallax is working).

This generally works well - there's a few glitches but its good enough for me to move on to the next part, which is that I want to create a custom content type for "parallax entries", and then update the view to use all of these that are "published". As well as a title, content (paragraph about each parallax's subject) and an image, I will add either a URL or node ID that will be the destination you'll get if you click the parallax.  This way, the parallax can be used to promote anything that has a URL -- expected to be any content on the site, not just a specific article or page. It also means that rights to edit parallax entries can be separate from rights for normal article editing.

I'll add more details of the setup as this progresses.