Craft CMS First Impressions
I've been listening to the buzz about Craft CMS since 1.0 was launched. Recently Andrew Welch came up to Toronto to talk to me and a colleague about Craft CMS. Andrew was an engaging presenter with in depth knowledge of Craft CMS, he has several plugins and a podcast for Craft, as well as ExpressionEngine the CMS I primarily use.
Andrew's talk got me fired up to finally dive into Craft. The next day I purchased the Up and Running with Craft video tutorials by Mijingo and watched them over the next few days. Watching these videos got me even more fired up to try out Craft. My jaw kept dropping in amazement at the flexibility and power of Craft and all the features that are built in right out of the box that many CMSs require add-ons, free or commercial, to get the same functionality.
Killer Features Out of the Box
Out of the box features that will make you want to use Craft CMS right now include:
- Multilingual support
- Matrix
- Fields everywhere - no limitations on where fieldtypes can be used at all
- Live Preview
- One click updating
- Drafts and Entry Versioning
- Section Types: Singles, Channels, & Structure
- Multi Environment Config
Twig
Of course learning a new CMS means learning a new templating language. Once you've worked with one CMS for a while you can code sites relatively fast without checking the documentation. Craft uses the Twig templating language which does have a little bit of a learning curve. However there is some advantage in that a few other CMSs are using Twig which means that once you've learned it, the skill is transferrable should you wish to use a different CMS such as Drupal 8, Symphony, and October CMS and more.
In Craft when working on an single entry template there is no need to call the channel name as Craft will know what channel you want and gives you an "Entry" object to use where use double curly braces entry.field_name:
<div class="row">
<div class="col-sm-8">
<p class="intro">{{ entry.intro }}</p><!-- /.intro -->
{{ entry.body }}
</div><!-- /.col-sm-8 -->
<div class="col-sm-4"></div><!-- /.col-sm-4 -->
</div><!-- /.row -->
The most important tag to learn and remember is the for loop which is analogous to the Channel Entries tag in ExpressionEngine. This tag is used for looping over anything that may repeat itself including fields such as table and matrix or pulling in channel entries as a list. For example see the code below. Lines 1-9 are an image transform with line 1 &3 opening and closing comments. Then on line 11 set a variable "Assets" equal to a field used to upload gallery images. Below that comes the for loop
{#
set gallery transform here
#}
{% set thumb = {
mode: 'crop',
width: 400,
height: 240,
quality: 90,
} %}
{% set assets = entry.galleryImages %}
<ul class="list-unstyled gallery row">
{% for asset in assets %}
<li class="col-sm-3">
<a href="{{ asset.url }}" class="fancybox" rel="group"><img src="{{ asset.url(thumb) }}" alt="" class="img-responsive" /></a>
</li><!-- /.col-sm-3 -->
{% endfor %}
</ul><!-- /.list-unstyled -->
See the Craft Twig Primer and/or the official Twig documentation for more in depth twig code. Twig is a more verbose templating language than I'm used to, but the flipside of that is increased flexibility and power.
Matrix
Matrix is the most mind blowing powerful field type you can imagine. In the image above you can see I have two blocks defined in Matrix: a Slide and a Slide With Title Image. In the publish page the client can add as many of each of these blocks as they want. You can also restrict the number of blocks allowed if you wish to.Each block can have as many fields as you need. It is also possible to require or not each individual field. Then in the template you use a switch statement on the block type with an include to the specific code you need for that block.
<ul class="bxslider">
{% for slide in entry.slider %}
{% switch slide.type %}
{% case "slide" %}
{% include 'includes/_slide' %}
{% case "slideTitleImage" %}
{% include 'includes/_slideTitleImage' %}
{# end slideTitleImage #}
{% endswitch %}
{% endfor %}{# end slider #}
</ul><!-- /.bxslider -->
Super dry and reusuable. Need to use a pull-quote or image with a caption on various sections of the site? Create a matrix block and then use it anywhere including this specific bit of code. Boom it's like you've taken the red pill. It's really brilliant. If you need something more powerful than Matrix you can checkout out the Neo plugin which will cause your head to explode with all the possibilities.
Fields Everywhere
In Craft fields are not restricted to one section or specific type of content. When you create a field it is available everywhere you could possibly want it. This includes the very powerful matrix field. Create the field and use it in your entries, any channel, your member fields, and category fields. Truly flexible and powerful. Fields can easily be organized into field groups. Once in a field group they are still available anywhere you want them to be. In my first site I organized fields into Default which are fields used in most sections of the site and then grouped other fields that are used only in one specific section. In the screenshot below you can see my field groups and the fields in the Default group.
Section Types
When creating a section to hold your content and entries you have three choices:
- Singles - used for one off pages with unique content such as a homepage or contact page
- Channels - used for entries with similar content such as a Blog or Services
- Structure - is used for when you need to be able to have entries in a specific order or nested under one another.
Multi Environment Config
Assuming your sites are versioned controlled you'll be familiar with developing locally and then having a staging and live server. Craft makes this easy to do by following the documentation here or use the Foolproof Multi-Environment Config. I'm using the method from the official docs and it works great.
Plugins
When building in any CMS I do try to keep things as native as possible as this keeps thing simpler and makes upgrading easier. However most builds do require an addon or two to make coding easier. On this site I used Retour which allows you to add in redirects in the Craft control panel. I also used Seomatic which is the swiss army knife of SEO implementation for any website. SEOmatic is so powerful that I will dedicate a whole blog post to reviewing it sometime in the future when I've had more time to digest everything it does.
Conclusion
I've only scatched the surface of what I want to say about Craft. Keep checking back for more posts about Craft as I continue to use it and discover more.
I've been given the choice of taking the Blue pill or the Red Pill and I'm taking the red pill. Craft CMS is simply the most powerful, flexible, feature rich CMS that I have used. Out of the box there are so many features that other CMSs either don't have, have implemented poorly or require addons, commericial or free. The control panel is clean, attractive, and intuitive as well as being responsive. I am looking forward to delving into more advanced capabilities of Craft CMS and the twig templating language.
