Partials, Embeds, Variables

By Doug Black · January 7, 2021 · Watch in 15 minutes.

1 - Installation....... 9:00
2 - Let’s Create a Channel....... 10:00
3 - Let’s Create a Template....... 11:00
4 - Using File Fields Part 1: Set Up....... 6:00
5 - Using File Fields Part 2: Templating....... 12:00
6 - DRY Template Layouts and Partials....... 13:00
7 - Moving the System Directory Above Webroot....... 9:00
8 - Variable Modifiers....... 5:00
9 - Working with Categories....... 8:00
10 - Working with Relationships....... 8:00
11 - Partials, Embeds, Variables....... 15:00
12 - Let’s Create a Channel Layout....... 5:00
13 - Routing....... 7:00
14 - Contact Form....... 8:00
15 - Adding A 404 Page....... 5:00

In this video, we will explore partials, embeds, variables, and implement each of them into our site.

What We Do

Explore the difference between partials, embeds, variables, and when to use each
Add a partial to our site
Add a embed to our site
Add a variable to our site

Code Snippets

Create a Variable

If your variable is called facebook, create facebook.html in your templates/default_site/_variables folder with your Facebook link. To call a variable, simply place it between curly brackets like {facebook}

Create a Partial

Follow the instructions above, but create it in the _partials folder isntead.

Embedded Blog Card

<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
   <div class="flex-shrink-0">
      <img class="h-48 w-full object-cover" src="{embed:featured_image}" />
   </div>
   <div class="flex-1 bg-white p-6 flex flex-col justify-between">
      <div class="flex-1">
         {!-- Categories --}
         <p class="text-sm leading-5 font-medium text-indigo-600">
            {embed:categories}
         </p>
         {!-- End categories --}
         <a class="block" href="/blog/entry/{url_title}">
            <h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
               {embed:title}
            </h3>
            <p class="mt-3 text-base leading-6 text-gray-500">{embed:blog_content}</p>
         </a>
      </div>
      <div class="mt-6 flex items-center">
         <div class="flex-shrink-0">
            <a href="#"><img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt=""></a></div>
         <div class="ml-3">
            <p class="text-sm leading-5 font-medium text-gray-900"><a class="hover:underline" href="#">{embed:author}</a></p>
            <div class="flex text-sm leading-5 text-gray-500">
               <time datetime="{embed:time_date}">{embed:pretty_date}</time>
               <span class="mx-1">&middot;</span>
               <span>6 min read</span>
            </div>
         </div>
      </div>
   </div>
</div>

To call a card in a loop:

{exp:channel:entries channel="blog" limit="3" dynamic="no"}
   {embed="embeds/blog-card"
      featured_image="{featured_image}"
      categories='{if has_categories}{categories backspace="2"}<a class="hover:underline" href="/blog/entry/{url_title}">{category_name}</a>, {/categories}{/if}'
      title="{title}"
      blog_content='{blog_content:attr_safe limit="150"}'
      author="{author}"
      time_date="{entry_date format='%Y-%m-%d'}"
      pretty_date='{entry_date format="%M %d, %Y"}'
   }
{/exp:channel:entries}

Discussion and Questions

Discuss in the forum

Doug Black