{"id":691,"date":"2019-11-23T20:00:00","date_gmt":"2019-11-23T13:00:00","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=691"},"modified":"2021-09-01T20:40:06","modified_gmt":"2021-09-01T13:40:06","slug":"flexible-content-in-timber","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/flexible-content-in-timber\/","title":{"rendered":"Rendering ACF Flexible Content Field with Timber"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p><strong>Timber<\/strong> is a plugin to allow separation between PHP and HTML files.  <a href=\"https:\/\/pixelstudio.id\/blog\/what-is-timber-library\/\">Click here<\/a> for introduction.<\/p><\/blockquote>\n\n\n\n<p>Timber works well with ACF but <a href=\"https:\/\/pixelstudio.id\/blog\/diy-page-builder-with-acf\/\">Flexible Content<\/a> requires a bit of different approach to integrate. We will take a look at how to do it here.<\/p>\n\n\n\n<p>Let&#8217;s say we have a flexible content field named <code>layouts<\/code> that has 3 layouts: Free Content, Gallery, and Testimonials like pictured below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"372\" src=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2019\/11\/timber-flex-preview.jpg\" alt=\"\" class=\"wp-image-833\" srcset=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2019\/11\/timber-flex-preview.jpg 750w, https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2019\/11\/timber-flex-preview-480x238.jpg 480w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>In your views folder, create a new folder called <code>\/builders<\/code> (you&#8217;re free to use any name) and create new Twig files with exact same name as the layout&#8217;s:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">...\nviews\/\n\u251c\u2500\u2500 layouts\/\n\u2502   \u251c\u2500\u2500 free_content.twig\n\u2502   \u251c\u2500\u2500 testimonials.twig\n\u2502   \u251c\u2500\u2500 gallery.twig\n\u251c\u2500\u2500 ...\n...<\/code><\/pre>\n\n\n\n<p>In your Page view, add a loop for the Flexible Content field:<\/p>\n\n\n\n<pre title=\"page.twig\" class=\"wp-block-code\"><code lang=\"twig\" class=\"language-twig\">{% for layout in post.get_field(\"layouts\") %}\n  {% include \"layouts\/\" ~ layout.acf_fc_layout ~ \".twig\" %}\n{% endfor %}<\/code><\/pre>\n\n\n\n<p>Inside the layout file, you still have access to the <code>layout<\/code> variable given by the loop:<\/p>\n\n\n\n<pre title=\"views\/layouts\/free_content.twig\" class=\"wp-block-code\"><code lang=\"twig\" class=\"language-twig\">&lt;section class=\"free-content-layout\"&gt;\n  &lt;h2&gt;{{ layout.title }}&lt;\/h2&gt;\n  {{ layout.content }}\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<pre title=\"views\/layouts\/gallery.twig\" class=\"wp-block-code\"><code lang=\"twig\" class=\"language-twig\">&lt;section class=\"gallery-layout\"&gt;\n  &lt;h2&gt;{{ layout.title }}&lt;\/h2&gt;\n  &lt;div class=\"gallery-items\"&gt;\n    {% for i in layout.images %}\n      &lt;figure&gt;\n        &lt;img src=\"{{ i.sizes.thumbnail }} alt=\"{{ i.alt }}\"&gt;\n      &lt;\/figure&gt;\n    {% endfor %}\n  &lt;\/div&gt;\n&lt;\/section&gt;<\/code><\/pre>\n\n\n\n<p>Simple enough right? I believe you can take it from here and write the code for other layouts.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>ACF and Timber works really well with each other. All fields can be accessed by <code>post.get_field()<\/code> function, but for subfield like the one in Repeater and Flexible Content, you can access it directly with dot array notation.<\/p>\n\n\n\n<p>If you want to know what a variable holds, simply dump it like this:<\/p>\n\n\n\n<p><code>{{ dump( var_name ) }}<\/code><\/p>\n\n\n\n<p>It&#8217;s the same as using <code>var_dump()<\/code> in PHP. That is how I know that the layout name is stored inside <code>acf_fc_layout<\/code>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Please leave a comment if you have any question regarding Flexible Content in Timber \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Timber works well with ACF but Flexible Content requires a bit different approach to integrate. We will take a look at how to do it here.<\/p>\n","protected":false},"author":1,"featured_media":842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[20,31,24,37],"class_list":["post-691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-timber","tag-acf","tag-php","tag-timber","tag-twig"],"blocksy_meta":{"page_structure_type":"default","page_enable_vertical_spacing":"yes","has_hero_section":"default","hero_section":"type-1","hero_alignment1":"left","hero_alignment2":"center","hero_height":"230px","page_title_bg_type":"color","1384340dffb62f2d6f452979afa31e41":"","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"single_meta_elements":{"author":true,"date":true,"categories":true,"comments":true,"updated":false,"tags":false},"has_meta_label":"yes","single_meta_date_format":"M j, Y","page_excerpt_visibility":{"desktop":true,"tablet":true,"mobile":false},"pageTitleFont":{"family":"Default","variation":"n7","size":{"desktop":"32px","tablet":"30px","mobile":"25px"},"line-height":"1.3","letter-spacing":"0em","text-transform":"none","text-decoration":"none"},"pageTitleFontColor":{"default":{"color":"var(--paletteColor4)"}},"pageMetaFont":{"family":"Default","variation":"n6","size":{"desktop":"12px","tablet":"12px","mobile":"12px"},"line-height":"1.3","letter-spacing":"0em","text-transform":"uppercase","text-decoration":"none"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"n5","size":"17px","line-height":"1.65","letter-spacing":"0em","text-transform":"none","text-decoration":"none"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"default":{"color":"rgba(41, 51, 60, 0.2)"}},"pageTitleBackground":{"default":{"color":"#EDEFF2"}},"2f53c637e13aae1d1f05e03ba14d9cb4":"","25d95dc62d77e29291a4705b3560b1c5":"","875d593353644eebfcb79b3b319fce20":"","4903b0378ba7be0faee4dda72998a9c7":"","478de68204c993fec912e572fd2c9cbf":"","b7b8e32b383e4ac06d6f57aa4190425b":"","date_format_source":"custom","5304b252dae11f9233962772da90cdf9":"","5ca34ce7ef9a3ba6b4c786aca4a0d88a":"","c5021043e74aa07be88383223984caa3":"","1d53624d1f64710bfe23753a090cf55c":"","5377aa033106247bc201a136fde76daa":"","b44df3b0f949efa63e00db5702390db9":"","20af809ebc3c5652926b5436cd98dc59":""},"_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":11,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/691\/revisions"}],"predecessor-version":[{"id":2035,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/691\/revisions\/2035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/842"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}