Jump to content
prestoav

BrownHen - Home Automation Integrator

Recommended Posts

This is our latest site using PW. Most of the grunt work is done with core modules but ProCache makes sure everything is super fast and the core image resize function was deployed everywhere an image is used to make sure everything stays looking good.

The site uses a premium theme for it's graphical layout with colours and some typography changed to match the companies in-house style. Page templates themselves are hybrids using bespoke collections of the content blocks in the theme. A 'site settings' page is was added to the admin which collects and allows edits to site wide details such as phone number, email, GA code and main menu items etc.

Comments welcome!

http://www.brownhensolutions.com/

  • Like 7

Share this post


Link to post
Share on other sites

Website looks good. Did you use any css grid ?

href="/site/assets/files/1016/brownhen_favicon.png"

How did you output the favicon png, did you hardcode  /site/assets/files/1016/brownhen_favicon.png

or did you use something like <?php echo $config->urls->templates . $variable ; ?>

For some reason I always have to hardcode the path as the php echo never works for me in case of the favicon.

 

 

 

Share this post


Link to post
Share on other sites
4 hours ago, pwired said:

Website looks good. Did you use any css grid ?


href="/site/assets/files/1016/brownhen_favicon.png"

How did you output the favicon png, did you hardcode  /site/assets/files/1016/brownhen_favicon.png

or did you use something like <?php echo $config->urls->templates . $variable ; ?>

For some reason I always have to hardcode the path as the php echo never works for me in case of the favicon.

 

 

 

The template is based on Bootstrap so the grid comes from that.

The favicon is uploaded to a hidden site-wide 'settings' page with an image field for the favicon. I call the image from that using:

$pages->get("/settings/")->favicon->url

I get all the other site-wide stuff that way too so that I can get page title and descriptions for page meta tags etc. 

Hope that helps.

Share this post


Link to post
Share on other sites

Thanks for the reply and your getting favicon example, going to try that. Have a feeling that is going to work. Maybe I find out later on why my php echo $config->urls-templates . . . never works for the favicon.

Share this post


Link to post
Share on other sites

I've just noticed that the top logo and menu disappear completely when clicking on a top menu link or sub-link with the third/central mouse button, as I often open several pages in other tabs that way. They don't reappear like it is the case when clicking with the left mouse button.

This happens with Chromium. 
I've tried with Firefox, this doesn't happen.
With Opera, it's the same as with Chromium.

[ On Linux Mint ]

Edit: I'll remove this edit later. 2 little details:
"Simple,high performing home technology systems" -> a space is missing after the comma + no dot (difference)
"Saving time and money with smarter technology." -> dot (difference)

Edited by Christophe

Share this post


Link to post
Share on other sites

Nice looking site. Only thing I noticed is, that your robots.txt contains some PHP:

Sitemap: <?php echo "http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>sitemap.xml

And you could further more improve page speed by enabling compression, if your server supports it. Look in the ProCache settings under GZIP+More for more instructions.

 

1 hour ago, pwired said:

Thanks for the reply and your getting favicon example, going to try that. Have a feeling that is going to work. Maybe I find out later on why my php echo $config->urls-templates . . . never works for the favicon.

It is propably a typo, but it should be $config->urls->templates;)

  • Like 1

Share this post


Link to post
Share on other sites
36 minutes ago, AndZyk said:

Nice looking site. Only thing I noticed is, that your robots.txt contains some PHP:


Sitemap: <?php echo "http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>sitemap.xml

And you could further more improve page speed by enabling compression, if your server supports it. Look in the ProCache settings under GZIP+More for more instructions.

 

It is propably a typo, but it should be $config->urls->templates;)

Hi AndZyk,

Robots.txt fixed so thanks for that.

The site is running compression and a couple of test sites I just ran it through confirm that. Is there something else you spotted that suggests otherwise?

Cheers,

Geoff.

Share this post


Link to post
Share on other sites

My only source is PageSpeed Insights and there are two fonts and an external script not compressed, but maybe they slip trough the compression rules:

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.brownhensolutions.com

Minifying HTML also helps, but you have to be careful with the rules inside ProCache, if you are using for example SVGs inside your HTML. Compressing images is also worth a shoot. I prefer ImageOptim for that.

But your site is already fast. So that would be a nice to have. ;)

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By modifiedcontent
      Is there a way to change the input options for the images field?
      I am trying to figure out if it would make sense to use an external script like Zenphoto as a central media library/manager. How could I connect that with Processwire?
      'Choose File' in the images field would have to be able to open that 3rd party media library or a directory on the server or some cloud service instead of (only) the client file manager.
      Could justb3a's field type module Image Extra be part of the solution? I will try that and report back. Other field types/modules?
      I know there is a pro module Media Manager that does look very slick, but would prefer to make this work with a mature, tested 3rd party script if a central media gallery is never going to be a core Processwire feature.
    • By AndZyk
      The CDS Group is an established service partner of leading manufacturers and trading partners in the IT and high-tech sector. We relaunched their service website using the latest ProcessWire. Building this website was fun, especially because of the latest additions to ProcessWire, like the recently introduced markup regions and AdminThemeUIkit. It is really easy to brand the new admin theme with a few lines of code, in my case 7 (see a glimpse in the screenshot below). Besides that, this website makes heavy use of the Repeater Matrix, to be as flexibel as possible. The front-end was build with Bootstrap 3 and the icons used are an custom icon font generated with the IcoMoon App. For a better usability, every textarea can be edited in the front-end.
      www.cds-service.com
      Modules used:
      AdminThemeUIkit Front-End Page Editor Repeater Matrix ProCache Markup Sitemap XML Email Obfuscation (EMO) Database Backups Jumplinks Tracy Debugger Regards, Andreas

       
    • By Macrura
      Soundmanager2 Audio for Processwire
      Github:
      https://github.com/outflux3/TextformatterSoundmanager
      Modules Directory:
      http://modules.processwire.com/modules/textformatter-soundmanager/
      This module provides most of the free audio player interfaces for Soundmanager2 by Scott Schiller:
      Bar UI 360 UI 360+ spectrum UI mp3 buttons mp3 links Page Player, muxtape-style UI Cassette Player The module is a Textformatter that works by allowing you to insert shortcodes which are parsed into audio players.
      The players may be placed anywhere in the content (ck editor or other text field) using the shortcode, for example:
      [smplayer tag=audio1]
      The output will be a default single player (as specificed in the module settings), or if multiple audio files have the same tag, and you don't specify a type (UI), it will default to the Bar UI for the playlist. You may also specify page-player for the type as it also supports playlists.
      Here is a more complex tag:
      [smplayer tag=audio1 type=bar-ui color=2288CC]
      the tags available on shortcodes are:
      tag - *required to find the audio file on the page type (the type of player) limit (limit the number of files to load when using a playlist) Player specific tags for Bar UI:
      bar-ui (options for the bar-ui player) skin (applies to a bar-ui skin to load) extra (when set to true, it will display the extra controls) color (hex value for color - applies to bar-ui and mp3 buttons) compact (makes the player very narrow) playlist-open (make the playlist drawer open instead of needing to click the playlist button to open it.) dark-text (instead of white) flat (remove the faux 3d effect) When using the shortcode, you can chain the tags using underscore, for exmaple:
      [smplayer type=bar-ui bar-ui=flat_playlist-open_dark_text]
      Player specific tags for Cassette:
      cassette (options for the cassette player) In case you are not familiar with SM2, it powers a lot of major audio on the web, like Soundcloud, LastFM, AllMusic etc). The players are all rock solid and work on a wide range of browsers and devices.
      Features
      Multiple Audio Formats
      SM2 supports many formats, and those can be enabled/disabled in the module config if you want to prevent any from being loaded. So far this module was tested with MP3 and AAC (.m4a).
      GetID3 Support
      When enabled, ID3 tags from every audio file that pass through the Textformatter are read and cached as arrays using WireCache. Therefore the first load of a page with new audio files may be slow while the tags are read and stored. The tags are indexed by the filename of the audio, so as long as you don't upload multiple files with the same filename, or change the tags, the system will store the metadata permanently. To remove any metadata, you would need to use Soma's Cache Admin module, or clear it from the database.
      Schema Support
      When enabled, some schema tags relating to audio files will be added to the markup.
      CK editor Plugin
      Very basic dropdown that inserts some pre-configured player codes into the editor. Copy the plugin into your CK editor plugins folder, enable and add a button for 'soundmanager'.

      Instructions
      Before you install:
      1) You will need a files field that accepts audio files, so set the extensions you want to use, such as mp3, m4a, mp4, wav etc. 2) Also make sure that you enable tags on the files field because the module references the tags for any audio file in the shortcode. 3) Add the files field to your template.
      Installation and Setup
      1) Install the module and adjust your settings from the module configuration screen.
      2) Add the TextformatterSoundmanager textformatter to the field where you want to insert audio (e.g. 'body').
      3) Optionally install the CK editor plugin to enable quick access to preconfigured shortcodes.
      4) Add a shortcode into the textarea field that has the textformatter applied to.
      5) You must reference the tag you entered in the audio file's tag field in the shortcode, and that will create a player for that audio file.
      5a) To create a playlist, put the same tag in multiple audio files.
      Output
      1) In order for the module to output the necessary styles and scripts, you need to echo the $config->styles and $config->scripts arrays into your site's header/footer. Here is an example:
      // In Header foreach($config->styles as $style) echo "<link rel='stylesheet' type='text/css' href='{$style}' />\n"; // In Footer foreach($config->scripts as $script) echo "<script type='text/javascript' src='{$script}'></script>\n";  
      API Usage
      To access the module's player method directly, you would first init the module in your _init.php file:
      $sm2 = $modules->get('TextformatterSoundmanager'); then anywhere in your templates, you can output any audio file with any player, in an configuration like this:
      $options = [ 'type' => 'bar-ui', 'skin' => 'gradient-fat', //'tag' => 'audio1', // tag is not needed when using the API //'bar-ui' => 'playlist-open' //all of the classes to apply to the bar ui. ]; foreach($page->audio as $track) { $content .= $sm2->player($track, $options); } Advanced Features
      Using other pages for storing music as playlists. You can create a field to hold a tag for a **page* and then refer to that tag in your shortcode. The shortcode word would be smplaylist instead of smplayer. The module will search the site for pages with that tag in that field. Then it will output all of the audio files in that page's audio field using the player and settings you specify. See the module configuration to select the tag field and adjust your shortcode words. Caveats
      Some player will not work well on the same page as other players.
      Bar UI and Page Player 360 Player and 360 Visual (large) players Also note that the cassette player can only occur once on a page. You can have multiple cassettes output, but they will all play the same audio file. The file that the cassette player uses is set in the script tag. In the future the setup may be modified to allow for cassette players to have their own audio files.
      About Soundmanager2
      http://www.schillmania.com/projects/soundmanager2/
      Speak and be heard
      More sound, in more places
      Despite being one of the senses, sound has largely been missing from the web due to inconsistent technology support. SoundManager 2 bridges this gap, making it easier to use audio across a growing variety of devices and platforms, both desktop and mobile.
      HTML5 + flash hybrid
      Complexity, reduced
      Supporting HTML5 audio can be tedious in modern browsers, let alone legacy ones. With real-world visitors using browsers ranging from mobile Safari to IE 6 across a wide range of devices, there can be many support cases to consider.
      SoundManager 2 gives you a single, powerful API that supports both new and old, using HTML5 audio where supported and optional Flash-based fallback where needed. Ideally when using SoundManager 2, audio "just works."
      The ginsu knife: 12 KB
      Big features, small footprint
      Performance is an important metric, too. SoundManager 2 packs a comprehensive, feature-rich API into as little as 12 KB over the wire when optimized; that's less than 8% of the original, uncompressed file size.
      SM2 is self-contained, having no external dependencies, and is compatible with popular JavaScript frameworks.
      The source code is BSD-licensed and is provided in fully-commented, non-debug and compiler-optimized "minified" versions appropriate for development and production use.
       
    • By AndZyk
      This is a image and animation heavy single page for NexWafe, a spinoff of the Fraunhofer Institute for Solar Energy Systems (ISE) based in Freiburg, Germany. The sections were realized with Flickity carousels to separate the content into slides. The site features various animations, like parallax separators, fixed lines and two large animations to illustrate the process and production. The animations were realized using ScrollMagic in combination with GSAP. Challenging was to keep the site performant by lazy loading almost every image and disable animations for mobile devices.
      www.nexwafe.com
      Modules used:
      ProCache Markup Sitemap XML Email Obfuscation (EMO) Tracy Debugger Regards, Andreas
    • By Pavle
      Dear ProcessWire buddies,
      I am on a tight schedule and I don't have a lot of time for research, so I hope any of you already had a similar case. 
      I have a form and form data will be saved as a new page.
      How would you go about implementing a nice ajax video upload (with upload progress) on frontend and then adding this video to appropriate page. Besides that, I would need a video playback in cms.
      For frontend, I guess the fastest would be to use some library -> what is ProcessWire using for it's ajax file upload? Is it reasonable to use this in frontend as well?
      I have no idea how to make a video player in cms. Probably with a custom field type, that would then render a html5 video element if video is present. Is there any documentation on creating something like that?
      I hope you will be able to help me,
      Thank you all!!
×
×
  • Create New...