Partials, Embeds, Variables

<<Previous Lesson       Next Lesson>>

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

What We Do

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}

Links

Discussion and Questions

Doug Black's avatar
Doug Black

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