San Francisco Contemporary Music Players

[Macrura]

Happy to announce the launch of the completely rebuilt San Francisco Contemporary Music Players website, using ProcessWire.

https://sfcmp.org/

The previous website was a hornet's nest of disorganized content, dozens of 3rd party plugins, duct taped together within WordPress... difficult to use, time consuming and confusing to manage. And didn't look so good either.

Lot of fun to rebuild this, though took several months. YOOtheme Pro and UiKit were a dream for me to work with, just love those. Made it so possible to create all of the custom sections, widgets, sliders, cards, mega menus, and so on. Don't consider myself a front-end focused web dev, so have a deep appreciation for the time, care and effort that Yoo has put into both UiKit and YOOtheme Pro. Almost no additonal CSS was needed to be written for this; the stock UiKit classes and attributes make it possible to just build things in HTML and not have to fiddle with CSS.

Ryan's commercial modules played a major role in the build. ProFields, ListerPro, ProCache, and FormBuilder were all important. FormBuilder+Stripe allowed me to confidently migrate their need for a stripe checkout from some WP plugin to the clean and simple setup now using FB. ( https://sfcmp.org/donate/print-for-sale-dirge-by-hung-liu/ )

Some libraries also were of great use and value, namely PLYR for audio, and tabulator for some table display type of stuff.

As always, the API was a dream to work with, many custom import scripts were created along the way to import legacy Press, Albums, Repertoire works, Program Booklets library, Players etc.. The image API is doing wonders with SRC sets, and webp images. The PW documentation site was a daily companion.

This forum likewise was always a most valuable and enjoyable resource to search and rely on for solving the occasional conundrum. There is such a wealth of info here that i never found it necessary to post a question.

Lastly, to underscore just how unparalleled, flexible and user-friendly the PW backend is, we had the backend training session a couple of weeks after the site was launched, and within 30 minutes, the person who will be managing the content was able to know how to create and manage concerts, blog posts, albums, press articles and more.

[MarkE]

6 hours ago, Macrura said:

Lot of fun to rebuild this, though took several months. YOOtheme Pro

I thought YOOtheme pro was a Wordpress/Joomla thing

[Macrura]

it's like a hotrod type of setup... i have a YT dev subscription, and a sort of process to be able to use the files in my PW front end, and have the wordpress install on local to work with the settings and sometimes do some designs...

[protro]

Really nice work @Macrura. I love the repertoire list table that is searchable. Fabulous. UIKit really coming through once again.

[bernhard]

Just tried this list on mobile. Rows seem to be resizable which conflicts with touch scrolling. I'm quite sure there is a setting to disable that. 

[Macrura]

@bernhard thank you – do you mean on the repertoire list - the use of the Tabulator?

[bernhard]

Yes. If you scroll down on mobile with your fingers and you hit a spot between two rows, then the row is resized instead of scrolling the page. Which is less than ideal 😉 

https://tabulator.info/docs/5.5/layout#resize-row

The default should be false. Seems you have enabled it?

[Macrura]

On 11/8/2023 at 12:11 PM, bernhard said:

Yes. If you scroll down on mobile with your fingers and you hit a spot between two rows, then the row is resized instead of scrolling the page. Which is less than ideal 😉

Hi @bernhard, thanks for this! it should be fixed now...

[gornycreative]

On 11/7/2023 at 4:58 PM, Macrura said:

i have a YT dev subscription, and a sort of process to be able to use the files in my PW front end,

Go on...

I was looking into doing something like this myself, having used UIKit2 and Master 2 a TON in my wordpress days.

Essentially my PW block builder is similar to what they do in terms of output, but I haven't considered the option of actually bringing elements from the Yootheme pro over into - say - a latte template tree.

Is that what you ended up doing, or do you run templates at all?

[Macrura]

On 11/21/2023 at 7:48 PM, gornycreative said:

Go on...

I was looking into doing something like this myself, having used UIKit2 and Master 2 a TON in my wordpress days.

Essentially my PW block builder is similar to what they do in terms of output, but I haven't considered the option of actually bringing elements from the Yootheme pro over into - say - a latte template tree.

Is that what you ended up doing, or do you run templates at all?

@gornycreative sure - thanks!

Basically i'm only using YT Pro for the styling, and for modeling the basis of certain types of content/markup. Using the local install of WordPress+YTPro I could setup the preferences for the look and feel of the site, choose the theme, etc. I can sync the YTPro generated CSS file, JS and fonts across to the theme folder in my PW folder. I have a MarkupThemeEngine module that handles frontend theme stuff. It has an api that simplifies handling of display assets (CSS/JS).

A fair amount of the markup is custom coded, textbook UIKit - but that markup inherits the styling of the YTPro generated CSS file. The reason i can't use WordPress is that it ends up being too much work for the users, and it doesn't meet our requirements for a lot of content types. Many things that need plugins in WP can be easily created in PW with some small effort.

The template files are designed to make decisions and do all of the heavy lifting, creating intelligent processes that assist the users to get things done fast. The backend config for any given page is mostly text, images and preferences – nobody has to actually design or configure anything in the admin. Fairly complex pages with multiple sections, images, audio, and video can be setup and done in a matter of minutes. (If i needed to create a more complex layout, I might go and do it in my WordPress install and then analyze the output code and turn that into an algorithmic setup in PW).

There are not that many templates - Basic Page and a Page Builder, plus the custom ones for Albums, Events and Players.

The Page Builder template uses a PageTable - each section of any Page Builder page is stacked "sections"; to add a section is just an entry in the PageTable; and then you select the "Section Type". At that point there may be a couple of things to populate - image, text, and some preferences.

There is a centralized Media Library, and a Media Select field that uses InputfieldSelectize to choose any item in the media library.

 

[gornycreative]

Yeah that makes sense. I was more curious if you simply installed Yootheme Pro to a directory and referred to different style chunks (like if it is templated out in partials or whatnot). I haven't trialed it or anything to see what the file layout is like. In the past the tm-classes they add were sometimes useful helpers that added to the core uk-classes - although they have gotten better about bringing the 'helpful extras' into uikit core.

WP has its moments, but I find that a lot of the extra power user think they need ends up biting them in the end because of the extra work it creates for them and PW has better ways of narrowing user focus to the essentials they need to do. So you add all these plugins that folks want and now suddenly they are frustrated with the weight of the sword they weild.