Jump to content

Recommended Posts

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!

  • Like 15

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hello,

In google:

site:www.charleswuorinen.com "salmon rushdie"

or

"salmon rushdie" site:www.charleswuorinen.com

:)

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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! 

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
 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)

  • Like 9

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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

 - PageimageRetina ?

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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 :)

  • Like 1

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by lpa

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Red Minnow
      Our website has a video banner auto loop playing on the homepage, it plays and looks fine on Safari, but in Chrome and Firefox it is running choppy and extremely pixelated. I'm unable to determine what is the root cause and have not found any other sources online that are having this occur. 
      Can be viewed at www.redminnow.com

      If you have a better way of adding video to a banner, please provide the solution or point me in the right direction. I did not develop this site, just a guy looking for a solution to provide to my PW developer. 
      Thanks, Duane
    • 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 schwarzdesign
      We recently finished a relaunch of  the website of the consulting firm Engfer Consulting: engfer-consulting.de. Built with ProcessWire 3 and Bootstrap 4.
      Features
      Bilingual website (UPDATE: The English page is now available! the English page is inactive at the moment, as the content is not ready yet) A strong, simple data structure for job offers and news, allowing for a custom search page and fulltext search Sectioned content-blocks built with a Repeater Matrix (ProFields) Reusable components available as page reference fields Automatic generation of open graph-tags, with manual overrides available on each page Contact forms with a custom recipient depending on the current page Modules used:
      ProFields ProForms Sitemap Cookie Management Banner Duplicator Tracy Debugger Wire Mail SMTP Admin Links in FrontEnd Technical insights
      Most of the content is built using a Repeater Matrix field. Each section has an optional heading and a select-field for background colors. Some of the sections available include:
      Text blocks (a repeater-field for multi-column text) Feeds / listing of the latest job offers or news (with a field to control the number of entries shown) Displaying a team member or quote (selected through a page reference field) Downloadable files (a multivalue field for file uploads) Those sections can be combined and stringed together arbitrarily, so any number of page templates showing different contents can be built. The job offers template, in contrast, features fixed fields for taxonomy assignment, description, contact person, preview image and so on, making the job offer pages uniform and easily accesible.
      The (technically) most interesting part of the site is the job overview page, which contains custom filters that are automatically generated from the available taxonomy terms.
      The stylesheets are written in SASS, built with Bootstrap 4. Only the base and grid SASS files of Bootstrap are included, along with the Bootstrap components that we ended up using. Using Bootstrap 4 as a framework in this way makes development & styling blazingly fast, once all the utility classes are commited to muscle memory ...
      > Our Agency.
      Screenshots









    • By benbyf
      Not new, but a website I've worked on for a year or so in continous development.
      http://supercarownerscircle.com/
      I originally inherited the site from another web design company - upgraded PW and over the year added ecommerce using the Stripe module and a custom integration, revamped the frontend and added lots of new templates.
      Also did some frontend work on the shopify shop.

       
       
×
×
  • Create New...