recipes.md

title	Recipes
permalink	/recipes/

Below are recipes showing how to use the SUFramework theme API. These recipes are intended to be a jumping-off point for people who are interested in experimenting with the APIs for themselves.

Many of these recipes make use of custom collections. You'll need to set up your own custom collections to make full use of the recipe. For more information on custom collections and links to a few more-detailed step-by-step recipes, please see the page What is a Collection? on the SimpleUpdates support website.

In addition, you'll probably also find it useful to reference the Twig API docs for more detailed information on everything the SUFramework Twig API has to offer, as well as the official Twig Documentation.

Accordion

See the Pen Accordion by Narthur (@narthur) on CodePen.

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

su-narthur/videos.twig

Display three YouTube videos on your home page from your media manager, filtered by tag.

<script src="https://gist.github.com/su-narthur/1d8764e8dc1b76d67a0114989bca456b.js"></script>

su-narthur/devotional_recipe.twig

Display devotionals from a devotional custom collection.

<script src="https://gist.github.com/su-narthur/3b30dbdca8f85f7bbaf094bdf04198ca.js"></script>

su-narthur/sunset_times.twig

Display sunset times.

<script src="https://gist.github.com/su-narthur/1473c4209cacf663604e65e893e70517.js"></script>

su-narthur/testimonial_carousel.twig

Display testimonials from a custom collection.

<script src="https://gist.github.com/su-narthur/4e221b59d0e75da12d0b133f12a8ad88.js"></script>

su-narthur/directory_recipe.twig

Create a directory listing using a custom collection.

<script src="https://gist.github.com/su-narthur/815b0edb19892c134866c2c9157bbd89.js"></script>

su-narthur/ivy_faculty_listing.twig

A version of this code generates the faculty listing in the Ivy theme.

<script src="https://gist.github.com/su-narthur/5f8132e7e2142bf250b4aaa427ec8f9b.js"></script>

su-narthur/devotional_block.twig

Another take on using a custom collection to display devotionals.

<script src="https://gist.github.com/su-narthur/93481ca989f034f62d71ca9c5eda765a.js"></script>

su-narthur/recentPostsWidget.twig

Create your own recent posts widget.

<script src="https://gist.github.com/su-narthur/f01b0ed8005c9913c5c16498ce669f82.js"></script>