New site, my own!

simeon at June 20th, 2015 06:36 — #1

First Webhook site, my own! I had the exact same looking site running on Wordpress but I converted it all over.

http://www.tomoro.com.au

A few notes

Halved the load time on the home page alone
Started tinkering with responsive images, made really easy with Webhook's image size thingy, will keep experimenting there
Ported most of Yoast's SEO plugin social/open graph info into the headers
- Created a sitemap.xml using @rdwatters code, thanks!
I would really, really, really like conditional fields in the CMS! (Example: Only show field X if field Y = Z). Would make my multi-part blog post layouts much nicer!
Is it possible to point the domain at Webhook without using the www? I hate that!

I plan to write a long blog post about the whys and hows of the conversion in time. In short, Webhook's not perfect but it's got a hell of a lot going for it!

bzerangue at June 20th, 2015 10:46 — #2

@Simeon - Well done!

I would really, really, really like conditional fields in the CMS! (Example: Only show field X if field Y = Z). Would make my multi-part blog post layouts much nicer!

I agree. I think conditional fields would be immensely helpful. I am needing that very functionality on a Webhook site that I am working on.

I plan to write a long blog post about the whys and hows of the conversion in time.

I look forward to reading your upcoming post. Thanks for sharing your site with us. Great work!

bzerangue at June 20th, 2015 10:57 — #3

@Simeon - I noticed when I was clicking around on your site, that on your children pages, the Home Navigation link is broken...

simeon at June 20th, 2015 11:47 — #4

How embarrassing...fixed!

simeon at June 20th, 2015 11:54 — #5

Also just a note to say the {% if production %} / {% if not production %} tags are extremely useful but well hidden in the docs!

For example I'm using it to include the Google Analytics script only on the production version, and intend to use it to create a Wordpress-like editing toolbar to the top of the page when working in the local version.

rdwatters at June 20th, 2015 12:41 — #6

Great work, @Simeon. I'm with @bzerangue and definitely looking forward to your blog post. A little UAT heads up as well: in your "more work by tomoro" on this page: http://www.tomoro.com.au/work/podiatry-point-toowoomba/, it looks like you're missing urls/hrefs for the li in that list. Maybe a few missed characters in your Swig logic? (I have a tendency to miss these things too.)

Keep it up, brother.

budparr at June 20th, 2015 20:09 — #7

Google (and other cloud providers) serve from the www because they don't point to a single IP address; they have to use CNAME records, which don't point at the root domain.

However, it's generally best practice to serve from the www anyway, because serving your site from the root domain means that you're setting cookies on everything at that domain (root and all subdomains), so if you use a subdomain to serve assets you'd be setting a cookie on them (the cookies aren't used, but the request is made). See for example, google.com or amazon.com or facebook.com.

Practically speaking that's only significant on high traffic sites, but it is something that will show up on performance measurement tools and is the industry standard. Just be sure that when you set canonical domains in your head that you use the www, because Google differentiates between them.

simeon at June 20th, 2015 21:37 — #8

@rdwatters Oops, thanks for spotting that, fixed!

@budparr Good to know technical reason why to use www, it's just a shame because from an aesthetics point of view it's cleaner without it!

simeon at June 20th, 2015 22:28 — #9

Also a quick question on image sizes, is there a way to say "I want an image 800px wide, don't care about the height" (or the same declaring only the height)?

{{ item.image|imageSize(800, 5000) }}

Seems messy.

budparr at June 21st, 2015 08:55 — #10

use 'auto'
http://www.webhook.com/docs/template-rules-and-filters/#imagesizewidth_height

erindotio at June 24th, 2015 23:23 — #11

Great stuff @Simeon. I've been on a bit of a "this is why webhook is better than wordpress" rampage lately with clients and developer friends alike. Your blog post mirrors a lot of my sentiments on the subject.

I also just added a bunch of open graph stuff to some of my personal site internal pages. Interesting stuff!

simeon at June 25th, 2015 00:15 — #12

Thanks @erindotio

Since there's no real concept of 'plugins', thought I'd just share my OG code here...

{% if item.seo_description %}
	<meta name="description" content="{{ item.seo_description }}" />
{% else %}
	<meta name="description" content="{{ site_description }}" />
{% endif %}

<link rel="canonical" href="{{ getSetting('site_url') }}/{{ item.url }}" />
<link rel="publisher" href="http://google.com/+TomoroWebsiteDesignToowoomba" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />

{% if item.seo_title %}
	<meta property="og:title" content="{{ item.seo_title }}" />
{% else %}
	<meta property="og:title" content="{{ item.name }}" />
{% endif %}

{% if item.seo_description %}
	<meta property="og:description" content="{{ item.seo_description }}" />
{% else %}
	<meta property="og:description" content="{{ site_description|default('Built with Webhook.') }}" />
{% endif %}

<meta property="og:url" content="{{ getSetting('site_url') }}{{ getCurrentUrl() }}" />
<meta property="og:site_name" content="{{ site_title }}" />

{% if getSetting('site_facebook') %}
<meta property="article:publisher" content="{{ getSetting('site_facebook') }}" />
{% endif %}

<meta property="article:section" content="{{ item._type }}" />

{% if item.publish_date %}
	<meta property="article:published_time" content="{{ item.publish_date|date('c') }}" />
	<meta property="article:modified_time" content="{{ item.last_updated|date('c') }}" />
	<meta property="og:updated_time" content="{{ item.last_updated|date('c') }}" />
{% endif %}

{% if item.feature_image %}
	<meta property="og:image" content="{{ item.feature_image|imageCrop(1200, 630) }}" />	
{% endif %}

	<link rel="alternate" type="application/rss+xml" title="{{ getSetting('site_name') }} Feed" href="{{ getSetting('site_url') }}/feed.xml">

erindotio at June 25th, 2015 00:23 — #13

Nice, thanks for sharing. I've got something like this right now in the individual template (pretty basic):

{% block head_extra %}
<meta property="og:title" content="{{ item.name }}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ site_url }}{{ url(item) }}" />
<meta property="og:image" content="{{ item.feature_image|imageCrop(1200, 630) }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
{% endblock %}

Note that adding the og:image:width and og:image:height properties to your head will prevent a bug in facebook that causes the thumbnail image to not load the first time you try to post a link to that page in a status update. Once it globally caches that URL though the image seems to show up fine. More about that here.