Partials, Embeds, Variables

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

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

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

  • ExpressionEngine Template Variables: https://docs.expressionengine.com/latest/templates/variable.html#template-variables
  • ExpressionEngine Template Partials: https://docs.expressionengine.com/latest/templates/partials.html
  • ExpressionEngine Template Embeds: https://docs.expressionengine.com/latest/templates/embedding.html
  • See all of the site build in action in the Learn EE git repository.

Take It For A Test Drive

Get a free scan and start your trial today!

Additional Resources

Ready to dive in?
Start your free 15 day trial today.

Sign Up For Updates

We'll keep you in the loop of new features, resources, and articles!
We keep your info private.

© 2021 tripleNERDscore. All rights reserved.