We use cookies to improve the user experience. No personal information is gathered and we don't serve ads. Cookies Policy.

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