Aaron Copland

[Macrura]

New showcase entry, for Aaron Copland, composer.

https://www.aaroncopland.com/

Features

• Filterable/Searchable Works Listing with category, publisher, instrument, tag, keyword, or year range filtering
• Each work has a page showing meta data, as well as related media like audio, images, video, and related events & news.
• Works are cross related at various levels, as Copland would sometimes use sections of one work in other works
• Microdata (json-ld) for site, person, works, images, news and some events
• Ability to display embedded media like Spotify, Youtube/Vimeo, Getty Images, Archive.org etc.
• Fast autocomplete site & works search

Modules used

• Admin Custom Files
• AOS
• Page Field Edit Links
• Auto Smush
• Batch Child Editor
• Custom Inputfield Dependencies
• Admin Comments*
• Secure Files
• Font Awesome Pro
• Import External Images
• Autocomplete for CK Editor
• Inputfield Selectize
• Simple MDE
• Visual Page Selector
• Font Icon Picker
• Page Field Info
• Page Table Extra Actions
• Pages 2 PDF
• Changelog
• Dashboards
• Process Documentation
• Settings Factory
• Restrict Tab View
• Selectize Template & Field Tags
• Prev/Next Tabs
• Text Input Awesomplete
• Get Video Thumbnails
• Ion Rangeslider
• Runtime Markup
• Config Form Inputfield
• Color Inputfield
• Field Descriptions Extended
• Cookie Management Banner
• ProCache
• Lister Pro
• Profields (Table mostly)
• FormBuilder
• Various custom modules

*Admin Comments is a module in development that enables site admins/editors/managers to add comments to pages in the backend and to optionally notify other site admins/editors/managers. Possibly to be released in directory soon.

 

[Jonathan Lahijani]

Very elegant.  Can you tell us about the frontend approach?

[Macrura]

Sure! In terms of the visual/layout stuff, this is the first or 2nd site I did with UiKit, switching from mostly using Bootstrap. I ended up using a lot of the built in UiKit features, it really made the experience of doing the front end a lot easier and provided a lot of the inspiration for how stuff was setup.

In terms of the api/php, there is a theme module which handles basic theme/template related stuff, and a meta module which handles all of the meta elements in the head (page titles, descriptions, open graph, schemas etc.); It amounts to a frontend api, inspired by the pw api. I can go into further detail soon...

In terms of how the site's page content is managed, every content page is using simple PageTable with configurable sections as the page table rows.

the most challenging part of this site was the works database and the way the works relate together at various levels...
It also took the content editors over a year to proof the works listing.

The events were also a lot of work; Those pull in automatically from the publisher's webservice using SOAP...

 

[3fingers]

Congrats @Macrura,
beside the pleasant look and feel of the site I really appreciate the precision and the amount of details within the search pages.

I'd love, as a christmas present, and in-depth tutorial/guide on this subject (since, IMHO, you've made the best search pages throughout the years) ? ?

[Macrura]

@3fingers, sure - thanks for the kind words!

In terms of a guide/tutorial, do you mean the Twitter Typeahead search on the inputs, or the table/filter on the listing, or the site search, or the advanced music search...(lot of searching going on here)..

[3fingers]

@Macrura, you deserve them.

The table filtering on the list (its reactiveness and the immediate changes on the query strings) and the advanced search would be ideal :) 

[Macrura]

sure - i can definitely post a tutorial on how that is put together, will post soon..

[bernhard]

Nice one, thx for sharing ? 

The search is definitely interesting. I wonder what the menu items / colors stand for? I guess they have a meaning? Maybe you could add a description on hover of the icons (title tag)?

Some suggestions:

1) Uikit does a great job regarding accessibility out of the box (these are the little details I like about Uikit ? ), but your design does not reflect them. You could tweak it with very little effort by adding some :focus and :active rules.

2) The search menu is not usable from the keyboard at all I think. When you type a search phrase, TAB completes the phrase and you cannot navigate through the list of results (because you'll only have the first result left and the others disappear).

3) Is it intentional that you have non-serif font for menu and some(!) headlines and a serif font for the rest? I'm no design/UI/UX expert, but for me, that looks a little weird/incomplete/unprofessional(?).

[wbmnfktr]

Love to see a nicely customized UIKIT project. Good job, @Macrura.

But another thing - as you probably use UIKIT way more often than I do - have you ever noticed high CPU load in Chrome/Brave on a UIKIT website while it's just sitting there in your browser tab for a few minutes?

I noticed it on your project, the ProcessWire Blog and showcase and even some other UIKIT-based sites out there. 

[Macrura]

thx @bernhard , i'll take a look. The typeahead search is basically "out of the box" typeahead.js; I'd have to look at the documentation to see what the options are for keyboard usage. I don't think is is possible to navigate to a result with the kb.   https://twitter.github.io/typeahead.js/examples/

@wbmnfktr, i haven't noticed this issue, but i mostly use FF. Maybe there is an issue report on uikit github..

[dragan]

Most fancy out-of-the-box austosuggest widgets have accessibility problems, Typeahead is one of them. It's a known issue, and there seems to be a fork with optimizations. The UK government has built their own version.

[dragan]

3 hours ago, wbmnfktr said:

have you ever noticed high CPU load in Chrome/Brave on a UIKIT website while it's just sitting there in your browser tab for a few minutes?

Nope. Did you inspect it for JS errors? This could be anything really, maybe the browser tries to fetch something that an adblocker blocks, or just plain network or general JS problems (often caused by 3rd-party widgets).

[Macrura]

21 minutes ago, dragan said:

Most fancy out-of-the-box austosuggest widgets have accessibility problems, Typeahead is one of them. It's a known issue, and there seems to be a fork with optimizations. The UK government has built their own version.

cool, thanks for the info. Expecting to do some maintenance on this starting in January, so I will put this on the roadmap.

[wbmnfktr]

3 hours ago, Macrura said:

i haven't noticed this issue, but i mostly use FF. Maybe there is an issue report on uikit github.

I will take a look at their repo next year. Maybe there is/was something.

29 minutes ago, dragan said:

Did you inspect it for JS errors? This could be anything really, maybe the browser tries to fetch something that an adblocker blocks, or just plain network or general JS problems (often caused by 3rd-party widgets).

I did actually. I couldn't find anything related to that issue. It happens on processwire.com, the Aaron Copland site and even with my default UIKIT test sites I run locally. At first I thought about an issue with my Brave installation (from Arch Linux AUR) but it happens on other machines, too - all linux as their is no Windows or OSX/macOS device with me right now.

I have to dig deeper into it as it's something that annoys me a lot and I need/want/have to use UIKIT in an upcoming project. 

[Macrura]

8 hours ago, bernhard said:

I wonder what the menu items / colors stand for? I guess they have a meaning? Maybe you could add a description on hover of the icons (title tag)?

I wanted to do a search like Ryan has for the PW site, and might switch over to something like that anyway if i can figure it out. The results really should be sorted into separate lists with headings, which makes it the most user friendly.

But the ajax/TT search that I implemented was done as a sort of pro-bono sub project, for my own amusement, and as such i could only go so far with it before it taking up too much time... Hoping to work on a replacement for it or improvements during the support months coming up...

yes the colors and icons do mean something, but i don't know if you can have a tooltip on an already hovered item, seems like hover inception-ish...

[gmclelland]

Great looking site Macrura!  Can you show a screenshot of your PageTable setup?  Are you still using the Micro Context thingy that you wrote about in the past, or have you found a better way?

 

[Macrura]

sure, here is the page table;

the fields on any given section are just like title, headline, body, images, page select, section options etc, plus "section type".

Some sections have no configuration. The slider section allows the user to select which slides to show; the slides themselves are stored in a central media library, and the settings for any slide are stored with the media item. Sections with images have a field to select the media item to use for the image, or upload an image.

For a site like this, every image needs to be cleared and licensed, so the media library provides that functionality, with fields for license type, photopgrapher, sources etc.

I'm not using the MicroContexts on this site;

that module is now called "Page Field Contexts", and it enables template contexts based on Page Field values. 
It's a super simple, yet effective module and I'm using it on several sites.

https://github.com/outflux3/PageFieldContexts

[AndZyk]

On 12/26/2019 at 1:45 PM, wbmnfktr said:

I noticed it on your project, the ProcessWire Blog and showcase and even some other UIKIT-based sites out there. 

Sorry for being off-topic, but I have noticed this on the ProcessWire Sites directory too, but not on my UIkit based websites. I don‘t know what causes this, but the Chrome task manager shows a high CPU percentage although nothing happens.

@Macrura Great website. ?

[Macrura]

On 12/25/2019 at 3:20 PM, 3fingers said:

I'd love, as a christmas present, and in-depth tutorial/guide on this subject (since, IMHO, you've made the best search pages throughout the years) ? ?

possibly the easiest way might be for me to get the skyscrapers demo database and then just build the Datatables version of the demo site, skyscrapers list with all of the instant filtering, and the addition of the rangeslider. I'll see if i can get hold of the data, set it up and put on GH.

[gmclelland]

Yes, please.  Maybe this would help?

https://github.com/dadish/pw-skyscrapers-profile

[Macrura]

thanks, will give it a try

[3fingers]

Thanks @Macrura, that would more than enough :) 

[HMCB]

Such a great site @Macrura. I’m most intrigued with the calendar functionality. Specifically the mini calendar, with dates that are highlighted depending on whether there are events happening that day. How did you do that?

[Macrura]

@HMCB, thanks! So the datepicker itself is nothing fancy, it's just a style-matched version of Calendario

https://tympanus.net/Development/Calendario/index2.html

In Calendario, you just setup a JSON array of the events, and init the plugin with JS. The link on each date is to a URLSegment which then is processed via the API to get the events for that date. The URL segment logic was tricky because there are events with series dates (using a ProFields Table) which also need to be accounted for, but the beauty of the PW api is that it only took maybe 20 lines of code for all of the event fetching logic for single date calls.

----

also wanted to say thanks for the mention on the blog, newsletter, and SOTW! ?

----

and the SkyscrapersTurbo™ Profile is well underway, featuring rangesliders for all numeric attributes (Year, Floors, Height) and architect filter. So this version is is possible to narrow down results for very specific combinations.

[Macrura]

In an ongoing effort to provide a sort of case study, and more info about this, I'll post random screens and info about the various features of this site.

(1) Custom Dashboards

The site uses a custom module that supports multiple dashboards. Any given dashboard is configurable and access controlled also. This is the main dashboard:

 

(2) The admin editor pages take advantage of some great modules, namely RuntimeMarkup @kongondo, PageFieldInfo @Robin S, Field Descriptions Extended and more, There is also a new module not released yet called Admin Comments, which for this project got a lot of use.

When dealing with a large and complex data collection as was the case with this project, the editors benefited from the ability to have the data auto-analyzed on each work so the "auto flags" field helped with that. The comments also allowed editors to post information, ideas and comments right into the page editor. The AdminComments module also provides the option for any posted comment to be emailed to the other team members (selectable), and the notification email (which is customizable) allows the recipient to click directly to the editor for that page. This saved incalculable hours of work, and enhanced communication during the project, across this large data set.