charleswuorinen.com

[Macrura]

new site just launched...

http://www.charleswuorinen.com/

major modules that were essential:

• admin template columns
• AIOM+
• colorpicker (for custom page background colors)
• Font Awesome Page Label
• Form Builder
• ProCache
• jQuery DataTables
• Modules Manager
• Changelog
• Get Video Thumbs
• Field Change Notifier
• Hanna Code
• Redirects
• Template Notes
• Version Control
• Some custom modules for auto page titles, and custom page for managing works

Front end

• Bootstrap
• Masonry/Isotope
• Flexslider
• dataTables
• Magnific Popup
• Soundmanager2
• Fresco lighbox
• html5 video (using jackbox)

extensively used Hanna codes to output lists of links, PDFs in various places;

hanna code is also outputting the music players, scrolling flexslider galleries etc;

the compositions list is using dataTables, and shows extra info in a magnific lightbox, which loads from ajax...

once again, a site that really could not have been realized without PW!

[cstevensjr]

Spectacular website.

[pwired]

Great site but why are the fonts in the left vertical menu looking so ugly and garbled ?

Using firefox 28 here on laptop with 15 inch screen at 1024x768 res.

Tried something here:

#nav-main ul li a {
    font-weight: normal;   removing normal already improves.

.navbar .nav.main-menu > li > a {
    font-size: 14px;

body.left-menu #nav-main ul.nav.main-menu li a {
    padding: 10px;
    text-align: right;

Edit:

just arrived at work where I use an Acer aspire all in one

23 inch screen same res 1024x768 fonts look better here.

[Nico Knoll]

Looks great

[SiNNuT]

Well done

[Pete]

I was reading through the site early this morning and noticed a mis-spelling that is potentially embarassing:

Someone has typed Salman Rushdie on one of the pages as Salmon. He is not a fish

[Macrura]

many many thanks to all who took a look at this!

@pwired - thanks for pointing that out; yes, probably risky to set a 300 weight on a google font, i guess the fallback font didn't like it... I had checked this on a lot of machines/browsers, but i didn't see the issue you encountered...

@Pete - thanks so much for looking at the site and finding that error...do you happen to remember where? i tried looking for it but i can't find that error...

[Christophe]

Hello,

In google:

site:www.charleswuorinen.com "salmon rushdie"

or

"salmon rushdie" site:www.charleswuorinen.com

[PhotoWebMax]

Really nice!

* Love the home page image and how it scales to the screen size. 

* Typography is very cool.

* The main nav menu on the left hand side: you don't see the nav on the left that much but it works so well.

* The scalable layout for the Video page is really nice. It creates a very cool effect. 

* The contact form is a thing of beauty. Love the anti spam question: nice touch!

* The eye candy on the Discography page is also very cool.

** A nit to pick: I think the Writing page needs some refinement. The headline should match the link in the nav. I also the <ul> list of of PDF links could be jazzed up somehow...

** One other thing: the main text (the name Charles Wuorinen) on the home page image: its rather plain and vanilla. Maybe add some "designer" flourish to the typography?

Well done!!!

[Macrura]

@christophe - cheers, that's how i was going to search, but you make it easy for me... problem fixed!

@PhotoWebMax - thank you for looking at this! the contact form is using the awesome formbuilder;

as for the hanna codes, they are shortcodes; so for this site, in order to give the management people the ability to have control over the layout, hanna code outputs the markup for things like widgets, and then you can specify parameters to the hanna code; so for example to output a link of all PDF files with the tag 'article', the hanna code tag is [[downloads tag=article]] and then this can be put inline in the body text; i also have a special textarea field for the sidebar where you can place as many widgets as necessary, like slider galleries, pop-up galleries, audio players, etc..

[MadeMyDay]

Well done Macrura! Clean and nice presentation. One thing though: On Retina displays the images and graphics look very blurry. Perhaps you can add some 2x resolution versions. Take a look at https://github.com/scottjehl/picturefill, so you are also prepared for the future. The loading animation also could be better fitting the overall impression. This little animated gif seems so outdated (and very blurry on Retina) ;-) But this is nitpicking... Like the site very much! 

[Macrura]

@MadeMyDay - many thanks for taking a look at this! yes, the little animated gif is a pain, it's part of the fresco skin, but alas this is a very low budget project and i've already done 2x the work i was paid! Thanks for the link to picturefill.

this does bring up the issue though of how to handle retina images withing processwire; for the hardcoded images in the templates folder i can easily add an @2x version; but within processwire images management, i wonder how to be able to have an @2x version present, say generated from a single uploaded version; most of the images on this site are probably double the size they are being output...

[MadeMyDay]

 i wonder how to be able to have an @2x version present, say generated from a single uploaded version; most of the images on this site are probably double the size they are being output...

Just use the wonderful CropImage module. Say, you have a 300x300 image in your template. Define one 300x300 called "thumb" and one 600x600 crop called "thumb2x". Now you can use the picture polyfill like this:

<picture>

	<img srcset="<?= $page->myimage->eq(0)->getThumb('thumb') ?>, <?= $page->eq(0)->myimage->getThumb('thumb2x') ?>, 2x" alt="<?= $page->myimage->eq(0)->description ?>">
</picture>

Adding additional breakpoints with <source> is also possible (from the picturefill docs):

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
	<source srcset="examples/images/small.jpg, examples/images/medium.jpg 2x">
	<!--[if IE 9]></video><![endif]-->
	<img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

So you can also do some art direction where you output not only different sizes but also different formats (for example 2:1 on mobile, 1:1 on desktop etc)

[Macrura]

@MadeMyDay, this is amazing, and thanks so much for the examples;

The site currently uses the retina.js which as far as i know looks for an image of the same name, but with the @2x appended to the basename;

so that's what i was referring to (sorry it wasn't that clear)... i think about a module for retina that would allow users to for example tag an image as 'retina' and then the module would rename the image, adding the @2x to the basename, though i can't get my head around how this would interact with image sizer;

anyone else using retina.js?

in june/july i will be doing a painter's website, so thanks to your info i will be incorporating the picturefill for retina... looking forward..

[horst]

I think it would be much better if you could do this, for example:

    $options = array('crop'=>false, 'upscaling'=>false, 'withretina'=>true);
    $image = $image->width(400, $options);

and it creates an image with width = 400 and one with width = 800 and add a @x2 or a x2 to the filename of the latter one.

Also I think this is actually possible with the latest dev version and a little module.

[horst]

@Macrura & @Mats: please can you guys test if your js framework(s) also accept a - as first char of the appended string?

file 1 = basename.400x0.jpg

file 2 = basename.400x0-x2.jpg  or  basename.400x0-@x2.jpg

[Macrura]

@Horst -

according to Apple, the naming convention must be @2x, and that has to be the last part of the image name, unless you are adding device-specific images (-ipad, -iphone);

I also actually just discovered thanks you you and @MadeMyDay, that the retina.js library also supports an override using data-at2x attributes.

<img src="/images/my_image.png" data-at2x="http://example.com/my_image@2x.png" />

so that would be an easy way to do this in PW.... but still, having a module generate these instead of specifying manually would be cool!

[horst]

@Macrura: what would be a good & descriptive name for such a module?

 - PageimageRetina ?

[adrian]

In case you guys haven't seen it, this might be relevant:

https://processwire.com/talk/topic/4544-image-field-changes-file-name/

[Macrura]

@Horst - that would be great, sounds like a perfect module name!

I also see from looking at the link that adrian has here that there could be an issue with the @ character in a filename...

[horst]

@adrian: thanks for the link 

But I don't want support uploading of those files, nor would want the user has to manually update his htaccess file.

I only hook into Pageimage::size to create the retina variation and append the '@2x' to the variations filename.

Second hook is into Pageimage::isVariation to take care that these retina image variatiions are detected on image deletion.

@Macrura: I don't think that there will be an issue with 'having' such filenames in the assets folder, but only if you want try to upload files with that name. But we do not need to upload them. At least I think it's that easy. We will see

[adrian]

Yeah, I thought that was probably the case (not uploading, but creating on the server), but thought I'd share, just in case.

This sounds like a great addition btw - I have been a little slack on the retina thing myself at times, so it would be awesome to have a built-in solution. Thanks for working on this!

[benbyf]

Nice site. A lot going on in it but it still seems to retain its simplicity and i didnt ever get lost. good job

[lpa]

I can't get the MP3-player to work when trying to listen samples: Initializing MP3-Player...

Edit: It doesn't work on Mac 10.6.8 Safari 5.1.10. Maybe it is time to upgrade….

Edited June 4, 2014 by lpa

[Macrura]

@benbyf - many thanks for checking this out.. (also want to compliment you on your sites, haven't commented yet, but they look awesome!)

@lpa -  not sure what the issue could be, i tested on 10.6.8 with Safari 5.1.10 and it does work.. *however* this site is using cloudflare, so i would have to surmise that cloudflare is messing something up.. because the mp3 player is based off soundmanager2 which is like the most reliable html5 play engine out there... i wonder if anyone else is having any issues? this is the first problem report i have received...