New Focus Recordings

[Macrura]

This site was recently launched and has been running great for the last few weeks.

It is probably the largest PW project I have done;

there is a lot of media to keep organized, this label has about 70 albums and over 400 artists...

http://www.newfocusrecordings.com/

the homepage displays 12 random albums

the catalogue page, uses datatables and loads the cover images on demand;

the filtering is all done with the datatable, and the urls are updated without page reload...

the album page:

the pw version replaces a joomla version that was used for about 6 years.. and was a pain to work with;

some modules:

AdminCustomFiles

AdminSaveActions

AdminTemplateColumns

AIOM+

FieldtypeColorPicker

FieldTypeSelectFile (for selecting huge media instead of uploading into PW)

FieldtypeTemplates (for selecting which template a certain support doc should show on)

FormBuilder

FormSaveReminder

ImportPagesCSV (used to import some of the data from Joomla and Zoo)

InputfieldSelectExtended (used to show additional info after a select action)

PageReferencesTab

PageTreeAddNewChildsReverse (new albums need to be at top of list)

ProcessCustomUploadNames (to ensure the asset naming matches the catalog numbers)

PageListerPro

ProcessRedirects (for some legacy URLS)

ProFields

TextformatterBBCode (used for formatting of track and album titles with special characters, superscripts, bold, italic)

VersionControl

HannaCode

SiteUtilities - a custom module that controls many helper functions, read id3 tags, move audio files, rename stuff etc..

some forum threads that relate to this project, and as always thank you to everyone who helped and more generally who take part in the forum!

https://processwire.com/talk/topic/8366-setup-sharrre-sharing-widget-in-5-minutes/

https://processwire.com/talk/topic/8392-simple-built-in-docs/

https://processwire.com/talk/topic/8350-module-fieldtype-yaml/

I also work for this label, and have designed about 10 of the covers..

- - - -

Special Features:

Press View

There is a user role called press, and on the user profile, site admins can select certain albums to allow access to for that press user.

When the user logs in they can see which albums they have extended access to and then when they view the album there is an extended view and additional media and content.

The page audio player will play full streams of the tracks, whereas the public view only plays the edited preview files; the presence of the full stream is indicated with a radio/wave icon..

left widget showing some extra content:

[cstevensjr]

I'm a long-term music lover and your websites are always impressive.

[Martijn Geerts]

Impressive !

On the home page I was clicking the covers, expecting a click (link), maybe you could add some JS magic to trigger a click on the link.

Or make .entry-innerwrap the link. 

[Macrura]

@cstevensjr - thanks for checking it out and for the compliments, most appreciated!

@martijn - thanks! yeah i think you're right; it might be annoying the way it is now with the small link icon to open the album..

maybe i need to lose the icon and then make the link be on the .entry-innerwrap as you suggest.. that would leave more room for the text

[MuchDev]

What a beautiful site, everything seems to work great! I am currently listening to a enchanting guitar solo and clicking around. The connection between the media player and the rest of the site is really slick. I love how when you are listening to a track, whatever page that the item is on shows a now playing icon, most music sites don't even have that functionality (even the really big ones). My only note would be that I was a little confused when I clicked on the catalog and ended up on the site search, I guess I was expecting a more simple display of represented artists than a fully featured search. 

Thanks for showing this!

[Peter Knight]

Gorgeous site and I imagine the clean layout hides what is a very compiles and vast amount of data?

On the catalogue search, what's powering the select lists with built in search and auto complete?

[Macrura]

@MuchDev - thanks for checking this out! Actually there is no connection between the radio player and the pages, but the radio player will only play tracks that have been checked off for that, and then those same tracks also get the radio icon, so that's why you can see which track from the radio player is on any given album page; The catalogue page is just a filterable list of the albums.. there is also a site search and artist listing/search..

@Peter - it definitely seemed like a lot of data when building it... album template does have a lot of fields, and there is more media/info when the press user is logged in..

The catalogue search is really dead simple, a chosen select that are being used to filter the datatable... it was really the most economical way (time/budget) to build a filterable catalogue, and it is all client side filtering, so the whole table loads on that page, though the album covers load on demand based on the datatables redraw callback..

[adrianmak]

@MuchDev - thanks for checking this out! Actually there is no connection between the radio player and the pages, but the radio player will only play tracks that have been checked off for that, and then those same tracks also get the radio icon, so that's why you can see which track from the radio player is on any given album page; The catalogue page is just a filterable list of the albums.. there is also a site search and artist listing/search..

@Peter - it definitely seemed like a lot of data when building it... album template does have a lot of fields, and there is more media/info when the press user is logged in..

The catalogue search is really dead simple, a chosen select that are being used to filter the datatable... it was really the most economical way (time/budget) to build a filterable catalogue, and it is all client side filtering, so the whole table loads on that page, though the album covers load on demand based on the datatables redraw callback..

The jquery is great. But I'm wondering for a site with hundreds of product,  it may not practical to load all products on a page

[Macrura]

i think the datatable is fine to load the # of rows maybe up to 100, and it will take a while for them to have that many albums;

the page is procached and loads fast here, even with the datatables having to parse that table..

gtmetrix reports a 2.17s load time, and it gets a decent speed score.. the page is currently 647kb which isn't bad considering it is loading almost 15 years worth of releases; i could probably optimize the joins and increase the speed it takes to create the cached version; procache reports 5.1094s to create the page, but there is a ton of processing going on, like each album has hidden columns with the filter data, which are page IDs for stuff like album artist, performers, genres and label..

[apeisa]

Definitely one of my all time favorites - very clean, polished, nice typography, mobile and desktop both work flawlessly. Great work Macrura!

[Ivan Gretsky]

The site is great. One has to be picky to find something to improve)) But I did try:

1) On desktop the "About" page in nearly unreadable as the dont size is small and lines are long with no pictures. Maybe limiting width or adding columns could help readability. But who cares about those "About" pages?

2) Catalog and news paginations are different. The 1st one uses datatable's defaults, the second one is custom made. It could be better to make them use the same style for consistency.

3) I would've changed the ratio of the columns in the catalogue under 480px so the cover takes less space. Or put tthe text underneath the cover.

4) The hover state of the cover pictures in the catalogue looks a bit buggy as the pictures have different widths. I do not know why is that as the covers should be all square. Maybe you shoud limit their width not height?

Those are little things you can find on any site if you wanna look for'em.

[Pete]

i think the datatable is fine to load the # of rows maybe up to 100, and it will take a while for them to have that many albums;

the page is procached and loads fast here, even with the datatables having to parse that table..

It's possible to paginate the datatable with AJAX too, though it adds a minor delay of course when you click a page number.

[Macrura]

The site is great. One has to be picky to find something to improve)) But I did try:

1) On desktop the "About" page in nearly unreadable as the dont size is small and lines are long with no pictures. Maybe limiting width or adding columns could help readability. But who cares about those "About" pages?

2) Catalog and news paginations are different. The 1st one uses datatable's defaults, the second one is custom made. It could be better to make them use the same style for consistency.

3) I would've changed the ratio of the columns in the catalogue under 480px so the cover takes less space. Or put tthe text underneath the cover.

4) The hover state of the cover pictures in the catalogue looks a bit buggy as the pictures have different widths. I do not know why is that as the covers should be all square. Maybe you shoud limit their width not height?

Those are little things you can find on any site if you wanna look for'em.

@Ivan, many thanks for looking; yes you're right about the 'about'...  it will probably get improved - maybe i'll add the default right column there, so it's not such a dead end.

the covers on the catalogue should be around 110px... it's all in a datatable, so more utilitarian focused and each in 1 row so i probably wouldn't go with text under cover, especially as i'm trying to conserve vertical space;  for the hover state, yeah that's just how it is because they never enforced a cover ratio, so for now it has to be that way... also because the rows need to all be same height...

@Pete - yeah, i originally was going to use ajax data source, but i'm using atttibutes on the <td> like data-sort, and data-filter, and couldn't really get my head around how to ajax that..

[Macrura]

want to express my deepest gratitude to the PW folks for selecting this as site of the week!

As someone who worships PW and all of the developers and contributors alike, it is a tremendous honor to receive this.