Fractal: Needs Twig template adapter

Created on 17 Aug 2016 · 12Comments · Source: frctl/fractal

Currently twig.js can be used via the consolidate adapter, but it's not great (no @handle includes etc).

A decent Twig adapter would really open up easier PHP implementations (plus Twig rocks ;-)).

An adapter using the native PHP twig engine under the hood has been started here: https://github.com/LostKobrakai/twig but would also be nice to have one built around Twig.js (or one that let's you choose which one to use?) so that PHP is not a required dependency.

feature-request inactive v2.x

Source

allmarkedup

Most helpful comment

If anyone else comes across this, the fractal project has a twig adaptor: https://github.com/frctl/twig

I am currently using the 1.0.0-beta.1 successfully.

jamiemagique on 21 Feb 2017

👍4

All 12 comments

I've made my own simple Twig adapter for testing, taking example from the Handlebars and Nunjucks adapters. This adapter uses twig.js and supports handles, but I changed it to use # character instead of @, because the Twig PHP version uses @ character for namespaces and I need to write templates which are compatible with both versions, JS and PHP.

You can see it here, in case you find any use for it: https://github.com/tnottu/fractal-twig-adapter

I made it before I went to summer holiday and haven't tested it with 1.0 (which was released during my holiday) yet.

tnottu on 17 Aug 2016

I updated my version of the Fractal - Twig adapter to 1.0 API. I also added a little path-helper. Well, basically copy-pasted the Nunjucks one :)

I also used the example from @LostKobrakai to use Fractal with WordPress. I'm still working on the site so I don't have a public example yet.

tnottu on 29 Aug 2016

👍3

I try to make a adapter for Twig (php), inspired by the work of Lostkobrakai, but with https://github.com/bitmade/node-twig (because it already installed in my project), but at this moment I don't understand how to use @alias and extensions.

ethyde on 30 Nov 2016

If anyone else comes across this, the fractal project has a twig adaptor: https://github.com/frctl/twig

I am currently using the 1.0.0-beta.1 successfully.

jamiemagique on 21 Feb 2017

👍4

Hi @jamiemagique @tnottu . I'm having trouble including components inside other components using the twig adapter. Are you able to post some sample code to achieve this?

I've tried the following but get a Twig error:

{% render '@handle' %}

TwigException: Unable to parse 'render '@article-snapshot'

colourgarden on 6 Jun 2017

👍2

@colourgarden It's been a while but I vaguely remember {% include '@handle' %} working for me.

corygibbons on 6 Jun 2017

👍2 ❤1

The render function works a little bit different and is still missing in the twig adapter.

swey on 26 Jul 2017

Using https://github.com/frctl/twig i cant get path variable to work, obviously, because example is in handlebars.

In docs it says to use this handlebar helper to serve static fiels {{path '/css/style.css'}} but that does not work in twig.

I have public folder set as in fractal example and in it i have /css/style.css but im getting error:

ERROR RENDERING COMPONENT TwigException: Twig.expression.type.string cannot follow a Twig.expression.type.variable at template:4 near ''/assets/style.css'...'

What is twig alternative for this static assets helper?

alexandar87 on 3 Oct 2017

@alexandar87 Probably too late but if anyone else has the same question, the answer is that you need to use ~ to concatenate your strings. In this case:

{{ path ~ '/css/main.css' }}

You'll also need just two curly brackets for your yield variable.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link media="all" rel="stylesheet" href="{{ path ~ '/css/main.css' }}">
    <title>{{ _target.label }}</title>
</head>
<body>

{{ yield }}

</body>
</html>

MarianoMiguel on 4 Dec 2017

👍1

I was frustrated to discover that the Twig {{ path }} helper was working fine for me in the Web UI (over the localhost:3000 server), but inexplicably was set to null when building the static version, breaking my static asset paths. After digging through the Twig adapter source files, I realized that path is a _filter_. Not sure why this works differently for me compared to what's in the documentation, and why it's different than the suggested concatenation {{ path ~ '/css/main.css' }} fix mentioned above, but path now works consistently for me if I use it as a Twig filter like so:

{{ '/styles.css' | path }}

Full example of my preview markup:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{{ _target.title }}</title> <link rel="stylesheet" href="{{ '/styles.css' | path }}"> </head> <body> {{ yield }} </body> </html>

Hope that helps someone, or if anyone knows a better way to fix I'd be glad to know! FWIW, my Fractal build step is handled through Gulp (not sure if that matters).

adamnorwood on 11 Mar 2018

👍3

Do you have anyone step by step solution for using Fractal within WordPress and Twig?

Thanks

illycz on 6 Jun 2018

👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.