benbyf

supercarownerscircle.com

Recommended Posts

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.

1062312384_Screenshot2018-04-3013_30_07.thumb.png.665c452db84c26696d3c691bbc3cb779.png

 

 

  • Like 7

Share this post


Link to post
Share on other sites

So you didn't integrate the shop into the PW website in the end? (I remember you were looking for a solution). What stopped you from doing it? Just curious here 🙂 Great work!

  • Haha 1

Share this post


Link to post
Share on other sites

Yeah, true! Thats still in the pipeline. I'm hoping to pull data from shopify and show it on the homepage of the PW site, then link it through to the real shopify – but not yet started that work.

Share this post


Link to post
Share on other sites

Just out of curiosity but will you try to downsize the homepage's size in the future?

82.6 MB is quite a big number.

  • Like 1

Share this post


Link to post
Share on other sites

I've done some of that work for sure. I just looked in Chrome and got around 22mb and thats with video, so its not great but not quite that bad.

Though in checking I spotted some massive png's that should be jpg's that obviously the client must have uploaded so going to have to change that.

Share this post


Link to post
Share on other sites

You only get about 22 MB?

The video I get is already way larger than that.

79150099_2018-08-0617_37_50-.thumb.png.6c17003bac842c6d0adf3297c3127ef4.png

 

Share this post


Link to post
Share on other sites

clients. not sure I can account for that, as they replaced a 6mb video with a 70mb one... what would you do?

  • Like 1

Share this post


Link to post
Share on other sites

In case of images I would limit upload sizes as in height/width and MB.

In case of videos it depends on where they were used. As a movie I wouldn't care that much about size but I would load them only on demand. As a background video I would limit size.

 

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, benbyf said:

what would you do?

Just a suggestion, as @wbmnfktr said, you should limit the size for the video on client editing. Then give them a note that they have to use **a video converter from a web service** prior to upload the video to the backend.

With https://clipchamp.com/en/products/utilities your video can be reduced from 72MB to 15MB with a really decent quality.

Settings are : 

Preset:  Web
Resolution:  720p
Format:  mp4
Quality:  Medium
 
You should give a try ✌️
ps: I am not affiliated with them but there are a free plan. Mods, feel free to remove the link..
  • Like 3

Share this post


Link to post
Share on other sites
1 hour ago, wbmnfktr said:

In case of images I would limit upload sizes as in height/width and MB.

In case of images you can let them upload what they want, but ensure that it is in highest possible quality. For the output you define width x height, quality and even output format (jpeg), if they use png were not appropriate. 🙂

  • Like 3

Share this post


Link to post
Share on other sites
1 minute ago, horst said:

In case of images you can let them upload what they want

I would agree with that to a certain point. Imagine your client uploads a few hundred images with 12 MB+ each.

If they explicitly ask for the possibility to upload super high-res images it's another story. 

  • Like 1

Share this post


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

I would agree with that to a certain point. Imagine your client uploads a few hundred images with 12 MB+ each.

??? If they want to, - why not? Sure, I would tell them not to use such big images where not necessary. But if they don't care, it is not my time waiting during the boring long uploads. 🙂

And if they are not able to scale down the images before uploading, it seems better to me to let them upload the hires instead of something scrumbled because they don't know what they do.

Share this post


Link to post
Share on other sites
5 hours ago, horst said:

??? If they want to, - why not?

Have you heard of storage quota? 😉

  • Like 1

Share this post


Link to post
Share on other sites
16 hours ago, horst said:

In case of images you can let them upload what they want, but ensure that it is in highest possible quality. For the output you define width x height, quality and even output format (jpeg), if they use png were not appropriate. 🙂

thanks @horst didnt know you could convert the type as well as size.

Share this post


Link to post
Share on other sites
17 hours ago, flydev said:

Just a suggestion, as @wbmnfktr said, you should limit the size for the video on client editing. Then give them a note that they have to use **a video converter from a web service** prior to upload the video to the backend.

With https://clipchamp.com/en/products/utilities your video can be reduced from 72MB to 15MB with a really decent quality.

Settings are : 

Preset:  Web
Resolution:  720p
Format:  mp4
Quality:  Medium
 
You should give a try ✌️
ps: I am not affiliated with them but there are a free plan. Mods, feel free to remove the link..

looks good, but I dont really want to sign up for a monthly fee to get the watermark off for a single video 😞

Share this post


Link to post
Share on other sites

If you are on a Mac, I can strongly recommend ff Works for encoding anything. It uses FFmpeg, which you can use via command line for free, but with a nice GUI. 😉

  • Like 1

Share this post


Link to post
Share on other sites

I have ff Works too and often use it to covert video files. While I like its GUI and  ffmpeg too, the fact that ff Work's GUI is not mac OS native makes it a bit cumbersome to use in some cases but for the price/features ratio I have not found a better alternative.

  • Like 1

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 schwarzdesign
      We recently finished a relaunch of  the website of the consulting firm Engfer Consulting: engfer-consulting.de (currently only in German). Built with ProcessWire 3 and Bootstrap 4.
      Features
      Bilingual website (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 kuba2
      Hello
      I need to make a small, easy Webshop for a friend. He is selling 4 music albums.
      What would be the best way to go?
      Is there a sensible solution for a webshop within processwire? 
      Thanks
      Jakob
    • By prestoav
      Hi folks,
      I have a marketplace site built on PW which I'd like to tie to a subscription payment system for those selling. The user accounts currently use specific PW user accounts. I'm looking closely at PayWhirl to manage payments and subscriptions as it looks ideal for subscriptions. Their API seems to work well too from initial testing.
      I wondered if anyone else in this super forum had used PayWhirl and had any advice or tips & tricks?
      Thanks.
      https://app.paywhirl.com/
    • By Samk80
      Hi there community,
       
      I'm new to this site. Basically I just discovered processwire. I was always a fan of Joomla but recently I came across a site which was designed by processwire. I looked at some of modules on processwire website but couldn't find the module I need.
       
      I want to create a website that does the custom configuration of a product and provides product filtering.
      Something similar to this site but not exactly the same.
       
      Is there a module that can do that?
       
      Basically the product configuration is done by checking the compatibility values between the categories, so the module need to support product tagging or some sort of value check to only display compatible products. 
       
    • By erikvanberkum
      I like to showcase my new website acniti on the forum here.
      History
      Building and managing a website is a hobby, over the years, making websites got more complicated and more technologies, knowledge and wisdom are required. I started building my first website around 1997. It started out with a static site built with FrontPage, a WYSIWYG HTML editor. A few years later it was time for the first content management system, I looked at Joomla but settled for MediaWiki. I run those websites for 2 years on the MediaWiki platform and then moved on to WordPress. WordPress was good, it did a good job but over time, it became more complicated to make something out of the box, if it's not a blog, it becomes complicated and to have a feature rich website requires a lot of plugins. Little by little it became less fun and more and more hassle juggling the various plugins.
      In 2014 I became interested in learning PHP programming, I wanted to do this already for many years, but never had enough time to bite the bullet and work my way through the basics. At the end of the courses I though and now what have I learned, how to put this into action? To built modern website with PHP only is difficult, it also requires knowledge of html, MySQL, CSS, java-script etc. I started looking for a framework experimented a little with CakePHP and then came across Processwire via a CMS Critic blog post.
      Development setup
      I developed the acniti website on a Linux Ubuntu 16, with PHP 7 and MySQL as the development server. For the IDE I use PhpStorm, before using Storm I have used and tried some other IDE's such as Zend, Eclipse, Netbeans, Aptana but none of them I liked, some were feature poor, Zend and Eclipse were slow and use a lot of memory. PhpStorm not free but definitely worth the investment. I make use of the free tier Git repository of AWS called CodeCommit, I still use GIT Cola to commit the changes, I could also use PhpStorm for this but I never took the time to change my workflow.
      For project management I am a big fan of Redmine, Redmine is a web-based open-source project management and issue tracking tool. I use this also for my other work so it easily integrates with the website building flow as well. It's easy for maintaining lists of features you want to carry out per version, it supports a wiki which is easy for making notes and keeping a log of the activities. I use it everyday and it runs on Ruby. For images and graphics I switch back to Windows for some Photoshop.
      Processwire
      The acniti website runs on the latest stable Processwire version at the time of writing 3.0.62, the website has 4 languages including an Asian language. The Japanese language URL's are implemented with their 3 alphabets kanji, hiragana, katakana i.e. https://www.acniti.com/ja/インレットフィルタ. Some images on the site have text and image language tags help to select the correct language, the Processwire blog post from 30 June was helpful to get this running.
      The main site has a bootstrap theme, for the mobile version of the site the google AMP specification is implemented. This was really fun to do but challenging at times as the AMP specification is still a little limited. To visit the AMP pages type /amp/ behind any URL like https://www.acniti.com/amp/ for the homepage. The Google webmaster portal is really easy to troubleshoot and check for the correct AMP implementation. Finally structured data according to schema.org is added to the site via the JSON-LD markup.
      The commercial modules ProCache and Formbuilder are installed. The ProCache module is really amazing and makes the website lightning fast. Besides the commercial modules around eleven open-source modules are used, Database Backups, Tracy Debugger, Wire Mail SMTP, Protected Mode, Batcher, Upgrades, PublishAsHidden, URL (Multi-language), Twitter Feed Markup, Email Obfuscation (EMO), Login History, Selector test.
      During development the Processwire forum is really helpful and checked often. The forum is good for two reasons, most of the questions, I had during development of the site, are already on the site. Secondly the only 6 questions I posted over the last 2 years, are quickly and accurately answered. The downside I didn't become a very active member on the forum but see that as a compliment.
      An open issue on the acniti site is the AMP contact form with Formbuilder, the restricted usage of java-script for the AMP specification requires some more in-depth study.
      Hosting setup
      For the hosting services the acniti site uses Amazon EC2, I use AWS already many years to manage my cloud office so it was easy to decide to use it for the web hosting as well. The site is running on a micro instance of EC2 and with the ProCache module CloudFront is serving webpages worldwide fast. Updates from the development server are sent to CodeCommit and from there to the production server. From a site management point of view it would be nice to use AWS RDS to manage the MySQL databases, but from a cost perspective I decide not to do that for now. Via a cron I have set up automatic MySQL backups and these are via another cron job uploaded to AWS S3. To make sure the server is safe, a cron job runs daily snapshots of the server, this is getting initiated via AWS Lambda. Lambda also removes older snapshots because during creation a delete tag is attached for sevens days after their creation. It's important to make a separate MySQL backup as with snapshots the database often gets corrupted and its easier to restore a database backup than to fix a corrupted database. Another nice feature to use AWS Lambda for is a simple HTTP service health checker, which reports to you by email or sms when the website is down.
      Making use of all these Amazon services cost me probably somewhere between 10 - 15 $ a month, I have to estimate a little since I am running a lot more things on AWS than only the website.
      The site is running on a Comodo SSL certificate but next year I will change to the free LetsEncrypt, as it is easier to add and will automatically renew after 90 days. The Comodo certificate requires manually copy pasting and editing the certificates in place.
      Writing Content
      The content for the site I write in the Redmine wiki, most of the content I write requires research and it takes about two weeks before I publish the content to the Processwire site. For writing content I use the google spell checker with the grammar checker, After the Deadline. To ensure catchy headlines they are optimized with the Headline Analyzer from CoSchedule
      Social Media
      Now the site is running, it needs promotion. The robots.txt files shows the search engines the way as does the sitemap.xml both of these I have made in a template file. Most of the blog articles I promote are republished on social networks like, LinkedIn, Tumblr, Google+, Twitter, and some branch specific networks as the Waternetwork and Environmental XPRT. To check, the search engines index the site well, Google webmaster and Bing webmaster check for any problems with the site. For statics on the same server there is an instance installed of Piwik. Piwik is a leading open alternative to Google Analytics that gives full control over data. The Piwik setup works very well and gives a good overview of the site usage both on the desktop via the site or via a mobile app. As a part of a test I have installed the open-source SEO-panel on the same server to manage keywords and to further improve the scores in the search engine, a nice feature is that you can also track your competitors. I am still new to SEO panel and have to learn more how to use the tool effectively.