Partials, Embeds, Variables

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

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

Doug is the developer and founder at tripleNERDscore. He is also core contributor to, ExpressionEngine!