Make your HTML components dynamic with the "with" keyword in TwigJS

Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

In this lesson, we make TwigJS components output custom content via the "with" keyword of the "include" tag. We also set up fallback values to make our component work in a variety of scenarios.

[00:00] I am including two instances of a card component as defined in the cards.twig partial. The include tag in Twig allows you to pass custom data via the with keyword. Here, we'll give it a title, a description, and an image.

[00:16] Let's refactor our component [inaudible] . I'll rename our data variable to fallback and create a new data object. If the title is defined in my component, then use the title. If not, use the fallback version of the title instead. If the title is passed through the include tag, it will use that. If not, it'll use the fallback value.

[00:38] Same process for the description and for the image, since we passed custom values, we can see the new image and text here while the other component is outputting the fallback values, in our first component here, let's add an image, but no title and no description.

[00:56] Now, you will see the image updated here, but the title and description will keep the fallback values. Let me quickly delete these static HTML blocks. I'll duplicate my first include tag a couple of times with different images, give a title to this one of "How Cool Is This?"

[01:11] Now, you have a pretty robust setup. You can create cards on the fly with only one single block of HTML to maintain. Say you want to change the title to light red, font weight 900, change it in one place, and this is updated everywhere.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today