A User Guide For The Craft CMS Sprig Plugin

Downloading and Installing the Sprig Plugin

Accessing the Plugin Store

To access the Sprig plugin on the Craft CMS Plugin Store, first log into your Craft CMS control panel. Click on "Settings" in the left-hand navigation menu, then click on "Plugins" in the dropdown. This will bring you to the Plugin Store page within your Craft install.

Alternatively, you can navigate directly to the Plugin Store by going to yoursite.com/admin/settings/plugins.

In the search bar at the top of the page, type "Sprig" and hit enter. This will display the Sprig plugin by Anthropic in the results.

Purchasing and Downloading

To purchase the Sprig plugin, click on the "Buy" button on the Sprig plugin page in the store. You will be taken to the Anthropic website to complete the purchase.

After purchasing, you will receive a download link via email containing the Sprig plugin files in a .zip folder. Save this .zip folder to your computer.

Next, you'll want to transfer these plugin files to your Craft CMS installation's /plugins folder, located at the root of your Craft install. You can do this via SFTP, or by unzipping the folder and then uploading the contents directly to the /plugins folder through your hosting provider's file manager.

The Sprig plugin files are now in place, ready for installation.

Installing via Composer

For those using Composer to manage Craft plugins, Sprig can be installed quickly via the command line.

First, SSH into your Craft CMS project's root folder. Then run:

composer require anthropic/sprig

This will download and install the latest version of the Sprig plugin and integrate it with your project's Composer-managed dependencies.

Alternatively, you can manually add Sprig to your project's composer.json file:

"require": {

"anthropic/sprig": "^1.0.0"

}

Then run composer update to pull in the plugin files.

With the plugin files now downloaded via Composer, visit the "Settings > Plugins" page in your Craft control panel, find Sprig, and click the "Install" button to complete the installation.

The Sprig plugin is now installed and ready for activation! You can begin using its advanced content generation features immediately.

Configuring the Sprig Plugin Settings

Plugin Settings Sections

Once Sprig is installed, you'll want to dive into the plugin settings and configure it for your specific needs. The settings are broken down into several sections:

General - This contains basic settings like enabling/disabling the plugin, setting a license key, etc.

Templating - Configure how Sprig generates content from templates, including templating methods and template tagging options.

Modelling - Fine-tune Sprig's AI modelling capabilities like model size, context length, and sampling temperature.

SEO - Optimize generated content for search engines with title/description/image settings.

Security - Restrict API access to Sprig and enable/disable advanced security features.

GraphQL - Enable GraphQL querying if you want to access Sprig via API rather than Twig.

There are tons of options available within each settings section to customize Sprig for your specific use case. Take some time to review what's available.

Key Configuration Options

While the Sprig settings are extensive, here are some key options to focus on:

Templating Method - Sprig offers both basic text expansion and more advanced AI generation. Choose the method that fits your content needs.

Model Size - Larger models generate higher quality content but are slower. Start with a smaller model while testing.

Templating Security - Prevent generated text from containing unwanted content types.

GraphQL Access - Be selective in enabling API access to Sprig's features.

For example, a blog may want advanced AI generation with tight security settings and SEO optimizations enabled. An internal corporate site can use basic text expansion with open API access and modeling tweaked for short-form content.

Configuration Recommendations

When configuring Sprig, keep your specific use case and content objectives in mind. Here are some recommendations:

Blogs - Prioritize high-quality content over speed with advanced AI generation. Enable SEO options and security filters. Use smaller models first.

Marketing Sites - Favor fast templating over perfect grammar for things like dynamic product descriptions. Enable templating security.

Knowledge Bases - Use basic text expansion for short snippets of content. Open access via API and GraphQL for flexibility.

Ecommerce - Optimize product descriptions for SEO while preventing unwanted text generation via security settings. Restrict API access.

Corporate Sites - Favor speed and flexibility with basic text expansion. Enable open API access and smaller models for quick generation of short blurbs.

The best way to configure Sprig is to experiment with settings while monitoring the quality and speed of generated content. Let your specific use case guide your configuration.

Creating Custom Fields with Sprig

Sprig's Field Types

The Sprig plugin comes with a robust set of field types that can be used to create customized content entry forms in Craft CMS. Some of the field options include:

• Text - For basic single-line text fields.

• Multi-line Text - For longer freeform text blocks.

• WYSIWYG - For rich text editor fields with formatting options.

• Table - For creating structured data table fields.

• Number - For numeric-only data entry. Options like decimals or percentages.

• Checkbox - For boolean or multi-checkbox options.

• Dropdown - For selector fields from predefined options.

• Tags - For organising entries with tag metadata.

• Date/Time - For date, time, or datetime stamp data.

This covers the core field offerings. There are also advanced Sprig-specific types like Ranked List, Generated Text etc.

Adding Custom Fields

To add a custom field with Sprig, first create a new Section or edit an existing one. In the "Custom Fields" tab, click the "New Field" button.

Give your field a "Name" like "Product Description". Then select the desired "Type", such as WYSIWYG or Table.

Set additional options like making the field Required, setting a Default Value, or enabling Translation Support for multi-language sites.

Click "Save" and your custom Product Description WYSIWYG field will now be available for entries in that section! Repeat for additional fields.

Configuring Field Settings

Each field type in Sprig has settings you can customize for your specific needs:

• Text Fields - Set character and word limits, formatting restrictions, autocomplete sources etc.

• WYSIWYGs - Choose text editors like Redactor or Quill, enable/disable features like HTML editing or embedding media.

• Tables - Configure columns and rows, reorder and resize, allow editing of individual cells.

• Checkboxes - Set default values, toggle between radio buttons and multi-select options, limit number of selections.

• Dropdowns - Set a blank default or pre-selected value, manage list source and appearance, enable/disable search.

• Date/Time - Select date, time, or datetime modes, use native or custom pickers, set validation and formatting.

Get familiar with each field type's available settings for maximum flexibility when creating custom forms.

Building Content Models with Sprig

Content Modeling Concepts

Content modeling is the strategic process of structuring your content into organized, reusable components. It revolves around breaking down content into logical types and structuring it effectively.

The benefits of content modeling include:

• More consistent, standardized content across a site

• Ability to reuse content fragments efficiently

• Simplified content authoring and maintenance

• Better separation of structure from presentation

• Increased flexibility across platforms and channels

With the Sprig plugin, you can build robust content models to manage both conventional and AI-generated content in Craft CMS.

Creating Entry Types

To create a new content model in Sprig, navigate to Settings → Sections and click "New section".

Give your section a name matching the model, like "Product" or "Blog Post". Choose an entry type like Channel or Structure.

Within the model's section, create your custom fields relevant to that content type, like Product Description and Specs for products.

Enable Sprig's AI-assisted fields if desired, likeGenerated Summary or AI-Optimized Titles.

You can create multiple sections to model different content types needed for your site like Services, Case Studies, Events etc.

Structuring Field Layouts

When building your content models, thoughtfully structure the field layouts:

• Put identifying fields like Entry Title, Slug first

• Group related fields into stacked tabs

• Order fields from general to more specific

• Put optional fields in collapsed sub-groups

• Place AI-assisted fields near the top

For example, a Blog Post model may have stacked tabs for Post Details (title, summary, author etc) and Post Body (content sections in ordered field groups).

An Ecommerce Product model could have General Details up top followed by collapsed sub-groups for Inventory Tracking, Shipping Settings, SEO Metadata etc.

Think about required fields, related options, and logical grouping when structuring to optimize the content creation experience. Test different organizations and iterate based on usage and feedback.

Well-structured content models make it much easier for content teams to consistently create, find, edit, and manage both conventional and AI-generated content with Sprig.

Populating and Editing Sprig Fields

Adding Content

Once your Sprig content models and fields are set up, it's time to start populating them with content!

For text-based fields like Single-Line Text or WYSIWYGs, simply click into the field and start typing or pasting your content. For longer WYSIWYG entries, use the text formatting tools to style and structure your content.

For more complex fields like Tables or Tags, you'll select the field type when creating it and be presented with the corresponding input interface. Add column headers and row data for tables. Create your list of tag options and toggle selection for entries.

Numeric and boolean fields like Numbers or Checkboxes simply require clicking and choosing the desired values or toggles.

Dropdowns, Multi-selects and other select fields involve curating your options upfront, then choosing one or more values per entry.

Refer to Craft's docs for details on working with specific native field types. Sprig also extends many types with AI-assisted options.

In-line Editing

Sprig enhances Craft's frontend editing capabilities by letting you quickly edit content right on the page. When viewing an entry, simply double-click any Sprig field block to open it for editing!

Make your changes, then hit the "Save" button to persist them. This allows for rapid iterative updating without jumping between backend and frontend.

Enable Sprig's Live Preview option during in-line editing to show updates on the page in real time as you type. This is great for fine-tuning content like text, titles and summaries.

Embedding Media

Sprig fields like WYSIWYGs and Tables allow embedding images, videos and other media via the field interface.

For WYSIWYGs, use the "Upload File" button or drag-and-drop features. For images, set alignment, padding, captions etc. Use inserted links to embed YouTube or Vimeo videos.

Tables include a dedicated "Assets" column type supporting file uploads and image embedding. Just like spreadsheet cells!

Ensure your media assets are Web-optimized. Use Sprig's built-in image transforms to automatically resize and compress images for Web delivery.

Take advantage of Craft's powerful asset management for a seamless experience embedding media into your Sprig content fields.

Displaying Sprig Content in Templates

Twig Tags and Variables

With your Sprig content models populated, it's time to display that content in your Craft Twig templates.

Access any Sprig field using the standard Twig variable syntax. For example:

{{ entry.yourSprigFieldHandle }}

Sprig includes handy field tags for common formatting needs:

{% sprigImage entry.imageFieldHandle %}

{% sprigTable entry.tableFieldHandle %}

{% sprigWysiwyg entry.wysiwygFieldHandle %}

These auto-format images, tables, and WYSIWYG content optimally for front end display.

You can also tap into additional Sprig utility tags and macros for advanced capabilities like:

{% sprigSeo entry.seoData %}

{% sprigDefines entry.keywords %}

{% sprigRelatedPosts entry, entry.topicIds %}

See Sprig's documentation for its full Twig API.

Formatting Options

When outputting specific field types from Sprig, you have formatting options:

Images - Control size, cropping, lazy loading, srcset generation etc.

Tables - Toggle row limits, sortable columns, pagination, search etc.

WYSIWYGs - Set allowed HTML tags and attributes, typography prefs, sanitize settings etc.

Number - Format for currencies, percentages, significant figures etc.

Tags - Customize list styles, toggle links, set separator chars etc.

Dates - Format date, time and datetime values in any language and style.

Refer to each tag's documentation for all available output customization parameters.

Template Best Practices

When building out your Twig templates to display content managed in Sprig, keep these tips in mind:

• Structure using layout, partial, and macro organization

• Maintain separation of semantics and presentation

• Optimize for performance with caching, eager loading etc.

• Tap into Sprig's utility tags and macros for commonly needed logic

• Remember to toggle between draft and live preview modes

• Use Sprig's starter templates to quickly spin up common pages

Here is an example Sprig blog post starter template you can extend:

{% extends '_layouts/base' %}

{% block content %}

<h1>{{ entry.postTitle }}</h1>

{% sprigWysiwyg entry.postContent %}

<p>Posted by {{ entry.postAuthor }} on {{ entry.postDate | date }}</p>

{% endblock %}

Leverage code organization practices like the ITCSS framework to build scalable, maintainable Sprig templates.

Querying Sprig Content with GraphQL

Enabling GraphQL

To start querying your Sprig content via GraphQL, you first need to enable the GraphQL API in the plugin's settings. Navigate to the Sprig settings section in your Craft CMS control panel, then go to the "GraphQL" tab.

Here you'll find a toggle to enable GraphQL - flip this on to activate the API. An endpoint URL will also be displayed, pointing to /sprig-graphql on your Craft site. This is the URL you'll use to send GraphQL requests and get back structured Sprig content. With just a few quick settings changes, the entire rich Sprig dataset becomes available for flexible consumption via GraphQL.

Example Queries

Once enabled, you can begin issuing GraphQL queries to retrieve and filter your content managed in Sprig.

For example, you could get the latest 10 blog posts by requesting the title, date and summary fields. Or search for products priced under $100 by filtering on a price property.

Events data can be queried by upcoming status as well. The Sprig docs provide a full schema reference and many more examples to work from in constructing your API requests.

The GraphQL API exposes the complete functionality of Sprig in a flexible way - structure the data return however you need by specifying only the fields required. And add limits, filtering, nesting and more to interact with Sprig content in advanced ways.

Optimizing and Caching

To ensure peak GraphQL performance, be sure to optimize your queries and implement caching.

Only request the minimum needed fields on each object type, set sensible limits and pagination to avoid overfetching, and parameterize queries that will be reused. Enable caching in the Sprig settings, and craft a comprehensive caching strategy around common queries, appropriate TTLs, and cache purging on content changes. Use a CDN cache for public APIs. Also optimize the Craft database that Sprig queries - add indexes on relevant columns and analyze any slow queries.

With some thoughtful optimization and caching practices, you can build lightning fast experiences powered by Sprig's GraphQL API. The flexibility of GraphQL plus the optimization of caching gives the best of both worlds.