Jump to content

Macrura
 Share

Recommended Posts

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

post-136-0-84743000-1425652104_thumb.jpg

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...

post-136-0-70635500-1425652101_thumb.jpg

the album page:

post-136-0-45123600-1425652103_thumb.jpg

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..

post-136-0-39088500-1425661327_thumb.jpg

left widget showing some extra content:

post-136-0-08920600-1425661373_thumb.png

  • Like 17
Link to comment
Share on other sites

@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

  • Like 3
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

@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..

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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..

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By hellerdruck
      Hi all
      I need help with something. Situation: We have let's say 2'000 Files (Excel) that should be displayed (list with links) on a page. We'd need to filter these files by given Keywords or a tree structure or both. Now, I'm looking for a solution whereas our customer can synchronise the files from his local computer with the folder on the webserver. They will update and upload files on a daily basis. Therefore, it would need to synchronise rather than load the files manually in pages or repeaters. Maybe indexing would be an idea, too.
      Are there any modules for Processwire that would help achieving this? Could anyone point me in the right direction?
      Thanks in advance.
    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By Clément Lambelet
      Hi all,
       
      I'm really new to ProcessWire, maybe I missed the solution in the documentation.
      I'm working on a site which involves a lot of image upload fields, and I'm always getting many timeout errors. I'm pretty sure it's because I generate too many variations on a single page load (around 20 images with 7 different sizes, for them to be responsive).
      I can't use ImageSizerEngineIMagick to help (my host doesn't support it).
       
      I was wondering if there was a way to hook to the process of client-side image resizing (https://processwire.com/blog/posts/processwire-3.0.63-adds-client-side-image-resizing/) to generate the different variations (as it seems really faster). If not, is there a way to generate the different variations on upload and not on page load ?
       
      Any ideas and suggestions are welcome!
    • By abdus
      While I was reading Smashing Magazine, I discovered this handy tool called XRespond that lets you load webpages in iframes that are designed to simulate different devices, (similar to how browsers' mobile simulators work).
      I think it's quite useful for local development. In fact it works for any website as long as it doesnt have `X-Frame-Options` headers set to `sameorigin`. I highly recommend using it with browser-sync with live loading as well. I use this settings when using it with PHPStorm to live reload my dev site on pw.dev.
      // remember set cwd to /site/templates/ or call it from templates directory path/to/browser-sync.cmd start --proxy pw.dev --port 8080 --files "**/*.php" --files "assets/**/*.css" --files "assets/**/*.css"
      What other tools/utilities do you use for testing your responsive designs?
×
×
  • Create New...