Jonathan Lahijani Posted April 17, 2015 Share Posted April 17, 2015 I soft-launched this site a few weeks ago and it's still being refined, however most of it is complete: http://brakhax2.com/ Brakha X2 is a production company headquarted in Los Angeles. They handle many large ad campaigns for well known brands. The bulk of the site consists of the image galleries (/advertising/, /editorials/, /silent-pictures/, etc.). The images in these galleries are not coming in via a typical images field since the images are really more like artwork pieces with it's own set of data. Therefore, I decided to create a template called "image" and a field in it called "image" (max upload of 1) in with some other fields (title, tags [not being used yet], body, etc.). These images then get assigned to each image_gallery in a Page field I created called image_items. By allowing each image / artwork piece to have it's own page, it allows for: a specific URL for each artwork piece page (example: brakhax2.com/images/name-of-the-piece/) fine control when people share images via social media (OG tags) the ability to re-use the entry in Page fields There's some fancy stuff going on in the frontend. I didn't use a CSS framework since it wouldn't have been a good match. I ended up using the following packages: Packery: this takes care of the masonry-style layout on the gallery pages ImagesLoaded: this allows the gallery images to show only after all the images have been loaded. it will show the loading graphic until everything is loaded Featherlight: this is a simple lightbox which is being used for the bios on the contact page Slick.js (aka Slick Carousel): this is being used for the video galleries (/spots/, /inside/) Fresco: a great commercial plugin that powers the lightboxes for the images and videos Responsive-nav: this takes care of the mobile menu logic Animsition: this takes care of page-to-page fade animations There's a few other little techniques/approaches being utilized on the site, but that covers all the major stuff. Eventually I will work in a Gulp workflow so that the CSS and JS is packaged and minified. Jonathan 12 Link to comment Share on other sites More sharing options...
cstevensjr Posted April 17, 2015 Share Posted April 17, 2015 Very nice website, I enjoyed looking at all the artwork. What really caught my eye was "Occupation Dreamer - Arnold Schwarzenegger 2" which actually showed the Jazz great Miles Davis. Nevertheless, the website is a piece of artwork itself. Great job! 1 Link to comment Share on other sites More sharing options...
Ivan Gretsky Posted April 17, 2015 Share Posted April 17, 2015 Thank you for sharing! I did not read to the end and dug into the source code to spot those js plugins. Came back to reading - and here they are - listed and explained. Always nice to find out some working solutions (although most of them are paid). Always interested in your posts as they uncover some usefull frontend techniques. Please share your experiense when you're done with integrating gulp workflow. The only flaw of the site is that it loads forever from 2mbit/s in Russian backwoods where I am at, but I am not target audience anyway . 1 Link to comment Share on other sites More sharing options...
pwired Posted April 17, 2015 Share Posted April 17, 2015 very nice site and helps me how to use the page concept in more versatile ways. I didn't use a CSS framework since it wouldn't have been a good match. Why wouldn't a css framework not be a good match ? Link to comment Share on other sites More sharing options...
blad Posted April 17, 2015 Share Posted April 17, 2015 Nice site & cool photos Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted April 17, 2015 Author Share Posted April 17, 2015 Thank you for sharing! I did not read to the end and dug into the source code to spot those js plugins. Came back to reading - and here they are - listed and explained. Always nice to find out some working solutions (although most of them are paid). Always interested in your posts as they uncover some usefull frontend techniques. Please share your experiense when you're done with integrating gulp workflow. The only flaw of the site is that it loads forever from 2mbit/s in Russian backwoods where I am at, but I am not target audience anyway . Hi Ivan, The only paid/commercial plugin is Fresco. Yes, the site is very bandwidth intensive, which is a tradeoff that had to be made but in opinion acceptable given the primary audience viewing the site. One adjustment that might be made is lazy loading of images: http://luis-almeida.github.io/unveil/ Also, maybe a better hosting solution like Digital Ocean. It's on GoDaddy right now. Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted April 17, 2015 Author Share Posted April 17, 2015 very nice site and helps me how to use the page concept in more versatile ways. Why wouldn't a css framework not be a good match ? Although I generally use CSS frameworks, I decided not to use one for this project because most of the features they provide would not be used (especially the grid system). This site is very low on widget/component-like design, so to me it made sense to selectively bring in only the features that were needed (masonry-layout, lightbox, carousel, etc.). Bootstrap for example comes with a carousel but it's not as good as Slick.js. It also has a lightbox/modal, but it's not optimal for lightbox galleries which is why I used Fresco for images/videos and Featherlight for text. I wouldn't be able to fine-tune the responsive breakpoints Bootstrap provides with its grid system (or at least not without a lot of headache). The site didn't require 6 button styles, accordions, etc. Easy enough to accomplish these features without a framework. Bootstrap automatically makes a mobile optimized navigation from the navbar component, but using Bootstrap's navbar (combined with its grid framework) would have caused a lot of trouble with the masonry photo layout since that masonry photo layout has it's own breakpoints that would clash with Bootstrap. A big CSS framework could be utilized, but my approach is to use the best tools for the task at hand. 1 Link to comment Share on other sites More sharing options...
teppo Posted April 17, 2015 Share Posted April 17, 2015 One adjustment that might be made is lazy loading of images My thoughts too. The site looks stunning, but 7MB+ for the home page without lazy loading is a lot, even for current connections.. and for my relatively slow (and very unstable) 4G it's way too much. Additionally this is going to cause some serious bandwidth usage on your side, though I'm sure you're already aware of that 2 Link to comment Share on other sites More sharing options...
Mike Rockett Posted April 17, 2015 Share Posted April 17, 2015 In agreement with teppo here. My average speed HSPA connection took 31 seconds to load everything up, which is far too long. That aside, I like the design, and the choice of font. Great work 1 Link to comment Share on other sites More sharing options...
k07n Posted April 28, 2015 Share Posted April 28, 2015 I was confused for a second when I saw "Scroll Down" at the bottom of homepage. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now