Craft Link List (Archive)

Introduction

Tightening your Craft CMS Security Belt, Sprig Tips, Vanity URLs, and more.

Due to the way the calendar fell in July, it’s been three weeks since the previous issue. That means what follows is an issue packed with lots of great Craft links.

The issue kicks off with a new episode of devMode discussing SEOmatic’s recent critical security release.

There are several links that will help you get the most out of Ben Croker’s recent Sprig plugin. There's a summary of a Craft Discord discussion on making vanity URLs in your Craft sites, plus there are other tips and plugins.

Thank you to the sponsors of this issue.

Fortrabbit is a preferred hosting provider for Craft CMS, offering a modern PHP application platform tailored for Craft, with Git deployments and Composer support. Try fortrabbit today.

Freeform is the feature-filled form plugin for Craft CMS that includes ready-to-use templates to get you up and running quickly. Learn about the power of Freeform.

Let’s hit the links.

-John Morton

News

Craft 3.4.27

There have been four releases of Craft since the last issue of the newsletter. Here are some highlights. Read the full changelog for all the details.

3.4.27 - fixed a “major bug” introduced in 3.4.26

3.4.26 - added the utils/repair/project-config command.

3.4.25 - Added the setup/app-id command.

3.4.24 - updated how the feed widget worked in the control panel and added the utils/repair/section-structure and utils/repair/category-group-structure commands

How the Craft business is maturing

Brandon shared a graph breaking down current revenue sources for Craft. 4 years ago, 99% of our revenue came from Craft license sales. As of June, it’s just about half. Impressive.

Paul Burton’s Craft Installation Illustrations

Have you ever wondered about the cool illustration you see on the Craft installation screen? The link above will give you a bit of context and history.

Introducing Direct Paystack integration with Craft Commerce for Craft CMS

Using Paystack, businesses in Ghana and Nigeria can now build their online presence on Craft Commerce's platform and also collect payments online.

Featured Sponsor

Craft CMS Hosting Partner

We like to automate ALL THE THINGS — except customer support.

Get started with a free trial today! And ask whenever you have any questions.

Tools, tips, and fundamentals

What template are you rendering?

h/t Adrea for pointing this little Twig function.

{{  _self  }}

For a more robust solution, check out Andrew's Template Comment plugin.

Vanity URLs in Craft

In Discord a couple of weeks ago, a user asked how you can allow content authors to create vanity URLs within the control panel pointing to specific entries. For example, the URL example.com/my-vanity-url would link to example.com/products/some-product, meaning the canonical URL would be example.com/products/some-product.

Brandon suggested creating a vanityUri field that holds the value. Then in the config/routes.php add this to the bottom of the array, which creates a catch-all rule if nothing else matched:

return [
    // ...
    '<vanityUri:(.+)>' => ['template' => '_vanity'],
];

Then create a _vanity.twig template with this:

{# see if an entry matches the URI #}
{% set entry = craft.entries()
  .vanityUri(vanityUri)
  .one() %}

{% if not entry %}
  {% exit 404 %}
{% endif %}

{# Include the normal entry template #}
{% include (entry.section.siteSettings|first).template %}

Notice that the 404 triggering is now done in this template.

Updated: Twig templating tips and tricks for Craft CMS on Craft Snippets

Piotr has updated his Twig Tips and Tricks post with loads of new content, starting at tip #12. If you missed the first 11 tips when it was mentioned in Issue 98, just start at the top, though, and enjoy them all.

Learn to Build Websites with Craft Cms

Neftali Loria released a new course on the “designer’s ultimate weapon of choice,” Craft CMS. This series of videos picks up where his previous Webflow series ended.

devMode.fm // A Gentle Introduction to GraphQL

Eve Porcello joins the devMode crew to talk about when you’d use GraphQL, and what benefits it brings to the table over other ways of getting data from an endpoint.

The Craft Mindset

Before you throw a bunch of content at Craft, stop for a minute and learn how to approach content and Craft together.

Craft Multi-site template fallbacks

If you’re doing a multi-site setup, CraftCMS automatically looks for site-specific templates, w/ global fallbacks. Andrew shares the details in this tweet.

Craft Q&A (Evening Edition) | CraftQuest

In this edition of the CraftQuest livestream, Ryan and Andrew answer listener and StackExchange questions about Craft CMS. It’s free to watch with a free account.

Using Custom Templates in Git

In this free CraftQuest article, learn how to create a starter templates for Git, which can, for example, change the default branch name from master to main.

Troubleshooting Failed Updates of Craft CMS

Just in case something goes wrong when updating Craft, the Craft team has a Knowledge Base article in the docs to help you get things back in order.

How to change php.ini to max execution 120

The requirements for Craft include setting the Max Execution Time to a minimum of 120. This update is something you're going to set on your server, not within Craft. This Stack Exchange question shows how to update that setting. If you use Laravel Forge, as I do, you can update this setting in the control panel under the PHP tab section.

Craft field instructions show as tooltip

This Stack Exchange post has a CSS / JS solution for turning help text in the Craft control panel into a tooltip.

Twig macro generating links from an array of entries

Piotr tweeted that "you can quickly generate a list of links separated by commas from entries array by using "map" and "joint" Twig filters." The link above is to his macro for accomplishing this.

The purpose of a line item's snapshot of Commerce

Perfecting your technique

Sprig Cookbook – Copy-paste recipes for Craft sites.

Sprig, a reactive Twig component framework for Craft, was mentioned in the previous issue. Ben Croker has now released a cookbook to help developers quickly see how to use it.

One highlight on this page is the protected variables example that helps prevent tampering with data passed into the page.

Reactive Components in Twig with Sprig | CraftQuest

Ben Croker joins Ryan to show how his Sprig plugin makes it easy to add reactivity right in Twig. No JS needed. We code two examples on CraftQuest and replace existing JavaScript with simple Sprig code right in Twig.

</> htmx - high power tools for html

HTMX is a library used in Sprig and offers locality of behavior, which makes your code easier to read. If you’re using Sprig, you’ll want to read the HTMX doc. For example, they’ll show you how to implement a loading graphic when making an AJAX request when using Sprig.

Pro tips on the cache tag

Oliver Stark has a series of 3 tweeted tips (twips?) on the cache tag.

Things to Consider When Planning a Craft Plugin

In this free 9 minute video on CraftQuest, Andrew Welch shares to his approach to plugin development for Craft CMS and getting a plugin ready for the Plugin Store.

Craft CMS Live Preview with Nuxt.js

Will Browar discusses how he configures Craft to work with Nuxt and have live preview work, including keeping the scroll position consistent during page refreshes.

Running Multiple Craft Installations from the Same Domain

If you need to run multiple Craft CMS installations from the same domain, there are a couple of things you should do to ensure your Craft installs are able to run independently of each other.

Sponsor

Effortlessly build beautiful forms in minutes with Freeform!

Freeform is the most reliable, intuitive and powerful form building plugin for Craft. Everything is at your fingertips in our elegant form builder. It gives you full control to create simple or complex multi-page forms, as well as connect your forms to many popular API integrations. Templating is easy and highly customizable. Our ready-to-go templates and features like built-in AJAX and Conditional Rules Logic will have you ready in minutes! No other form plugin even comes close to comparing! You can trust Freeform (and the team behind it) to deliver the quality and support you expect and deserve.

Plugged In

Linode S3 Object Storage

This plugin provides a Linode Object Storage integration for Craft CMS.

Field Buddy

Field Buddy adds a small icon next field labels in dev mode. Clicking the icon will copy the field handle to your clipboard. Field Buddy pairs nicely with the Relabel plugin.

Craft 3.5 will include a similar feature in that it will display the field handle, but Field Buddy includes the ability to copy it as well. That UX nicety might be a reason enough to keep it in your installation even after 3.5.

Paystack for Craft Commerce

This plugin provides a Paystack payment gateway for Craft Commerce.

Tracker

A handy server-side Google Analytics tracking helper for CraftCMS.

Named routes

This plugin allows you to get the URLs of routes that have been set in config/routes.php from within Twig templates so that you will no longer need to hardcode them in your markup.

Poptin

This plugin integrates the Poptin, a popup creator and lead generation service, into Craft.

Symfony Dump Twig Filter

Symfony Dump Twig Filter allows using the dump twig filter in your craft templates for better debugging.

Hop DocuSign

Hop DocuSign is the bridge between your Craft CMS website using Freeform and your DocuSign document.

The Craft Advantage

Craft CMS vs. WordPress - How a Digital Product Agency Chooses

This post shares the seven questions Goat, a digital development agency, asks when choosing between Craft CMS and WordPress.

Overheard

An Exception

It’s not Craft, but it’s interesting.

How to Make localStorage Reactive in Vue

This post explains how Vue’s reactivity works by trying to solve the problem posed in the title: How can you make localStorage variables reactive in Vue?

Google pushes “text fragment links” with a new Chrome extension

Google has released a new Chrome extension that can create a link that will deep-link to specific text on a Web page, with highlighting. The URL the extension creates "will work for anyone else using Chrome on desktop OSes and Android. Google has proposed the idea to the W3C and hopes other browsers will adopt it, but even if they don't, the links are backward-compatible."

/* Headers out of order (i.e. h2 before h1, etc.) Result: dotted blue outline */
h2 ~ h1, 
h3 ~ h1, 
h4 ~ h1, 
h5 ~ h1, 
h6 ~ h1, 
h3 ~ h2, 
h4 ~ h2, 
h5 ~ h2, 
h6 ~ h2, 
h4 ~ h3, 
h5 ~ h3, 
h6 ~ h3, 
h5 ~ h4, 
h6 ~ h4, 
h6 ~ h5 { 
   outline: 2px dotted blue; 
}