Why I love the Latte Template Engine

[zoeck]

I think you have to pass the variable to your included latte file:

{include '../blocks/' . $block->type . '.latte', block: $block}

 

[wbmnfktr]

10 hours ago, bernhard said:

It should work just like any other PW api... Does it render empty divs? Does it throw an exception?

I receive the markup but couldn't access any data somehow.

10 hours ago, bernhard said:

I'm never using {include ...}, I'm always using {$rockfrontend->render(...)}, but both should work.

Using $rockfrontend every time wouldn't save me that much time so I tried using it the .latte way.

10 hours ago, zoeck said:

I think you have to pass the variable to your included latte file

This did the trick. Thanks for this hint!

[artfulrobot]

On 7/19/2022 at 3:37 PM, bernhard said:

<ul>
  <li n:foreach="$page->parents()->add($page) as $item">
    <a href="{$item->url}" n:tag-if="$item->id != $page->id">
      {$item->title}
    </a>
  </li>
</ul>

If it's ok to dig up old threads....

@bernhard here, aren't you double encoding url, title? Assuming this is front end code, with `$pages->of(true)` and you have html entities text formatter in place on your title, url fields then a title with - say - an & would come out looking like & as it would actually be &

 

[bernhard]

20 hours ago, artfulrobot said:

@bernhard here, aren't you double encoding url, title? Assuming this is front end code, with `$pages->of(true)` and you have html entities text formatter in place on your title, url fields then a title with - say - an & would come out looking like & as it would actually be &

I think you are right for the ->title, but not for the ->url. The url is a property of the page object, not a regular field. So there is no textformatter applied and therefore it should just work like shown in the example. If you have a textformatter applied on the title field, then you'd need a |noescape filter in latte, yes.

 

[Greg Lumley]

@bernhard I absolutely love Rockfrontend and latte, it's so intuative!! The only issue I'm having is bracket pair colours in Visual Studio Code. Is there a way to get VSC to highlight the brackets and div pairs in a *.latte file? I'm sure there must be, I can't seem to find anything online. 

[bernhard]

Hey @Greg Lumley great to hear that, thx 🙂 

There is a latte extension for VSCode. It's not perfect, but it's ok:

Also there is no proper intellisense/code completion in latte files which is a pity, but I try to keep my latte files as clean as possible and put all the logic in the custom page class or in my Site.module.php so latte files are really just some simple markup and calling {$obj->method()} which is something that I can manage without typos most of the time 😄 

[Greg Lumley]

@bernhard Thank you. I am using that extension. 

I'll be sure to follow your guidelines regarding logic as I move forward. 

Greg

[bernhard]

Imagine you want to display an image on your website. Easy.

Imagine you want to open the bigger version in a lightbox. Easy when using UIkit (or any other framework).

Imagine you only want to add the lightbox link only if there is actually a larger version than the one displayed. Easy when using LATTE 🙂 

<div
  n:if="$img = $page->image"
  class="uk-background-muted uk-padding-small uk-text-center"
  uk-lightbox
>
  <a
    n:tag-if="$img->width > 800 || $img->height > 400"
    href="{$img->maxSize(1920,1920)->webp->url}"
  >
    <img src="{$img->size(800,400)->webp->url}" alt="{$page->title}" />
  </a>
</div>

This takes care of so many things with so little and clean code:

• the n:if on the outer div makes sure that we don't get any errors if no image is uploaded
• the n:tag-if makes sure that the anchor wrapper is only added if the original image is larger than the thumbnail

Note that you can assign $img directly in the n:if condition. No need for an additional {var $img = $page->image} at the top. For some that might be too short, but I like it 🙂 

[cwsoft]

Have reworked all my projects with Latte and CustomPage classes and the code is more clean, way easier to read and maintain and more structured now. Definitely recommend diving into Latte and CustomPage classes for new projects to anyone. Both techniques were easy to learn and paid off quite soon in my projects.

[rastographics]

On 1/28/2024 at 1:45 PM, cwsoft said:

Have reworked all my projects with Latte and CustomPage classes and the code is more clean, way easier to read and maintain and more structured now. Definitely recommend diving into Latte and CustomPage classes for new projects to anyone. Both techniques were easy to learn and paid off quite soon in my projects.

I want to do this to my projects too. What resources did you use to learn how to do this @cwsoft? Or is any of your code shareable? Thank you!

[zoeck]

11 hours ago, rastographics said:

What resources did you use to learn how to do this

For the custom page classes there is a great video by @bernhard

And you can take a look at the Latte documentation, everything is well described here

[cwsoft]

@rastographicsYou can find some additional infos in this post here. Meanwhile I used the 2nd approach shown in the linked tutorial with a slightly modified setup (e.g. proper namespaces, use statements, method names etc.) to implement Latte template engine in all my new projects so far. 

For Latte I would go with official Latte documentation linked above. In addition I would read the Custom Page Classes tutorial linked and watch Bernhards video.

Then I would start off with a first project and use normal PW template files (like a controller), loading the required latte template (view) and implement my page specific methods via custom page classes. Nice part is, that you can call the specific page methods via {$page->myAwesomeMethod()} in Latte view too. 

[rastographics]

Thanks @cwsoft and @zoeck. I've used custom page classes for a while but I don't think to full potential so I'm sure these resources will get me to the next level of what is possible. 

My reason for coming to this thread is I'm trying to have a more elegant way of using htmx by using "partials" on the php side, and I read that latte will let me break the html up into partials better than the regular php templates. Excited to hopefully use latte to make the htmx experience better. And just overall structure my processwire projects better.

[cwsoft]

@rastographicsBreaking HTML templates into blocks, sections or partial files is what Latte supports out of the bocks. Details see https://latte.nette.org/en/template-inheritance. Maybe you can a small writeup of your approach with htmx an PW once you made your way through. 

[bernhard]

1 hour ago, cwsoft said:

is what Latte supports out of the bocks

Loving that typo 💪😉😎🤣

[cwsoft]

1 hour ago, bernhard said:

Loving that typo 💪😉😎🤣

Than I let it unchanged 😂

[spoetnik]

On 2/12/2024 at 5:06 PM, rastographics said:

Thanks @cwsoft and @zoeck. I've used custom page classes for a while but I don't think to full potential so I'm sure these resources will get me to the next level of what is possible. 

My reason for coming to this thread is I'm trying to have a more elegant way of using htmx by using "partials" on the php side, and I read that latte will let me break the html up into partials better than the regular php templates. Excited to hopefully use latte to make the htmx experience better. And just overall structure my processwire projects better.

Inspired by this reading? https://htmx.org/essays/template-fragments/#known-template-fragment-implementations

[rastographics]

26 minutes ago, spoetnik said:

Inspired by this reading? https://htmx.org/essays/template-fragments/#known-template-fragment-implementations

Yes! And reading that while being a little frustrated with the way I'm currently doing htmx and processwire

[fliwire]

How format .latte files in vs code ? 
Currently there is no formatter for "latte".

[bernhard]

There is a latte extension for vscode and there is an open issue: https://github.com/smuuf/vscode-latte-lang/issues/5

[fliwire]

Those who need it can use this for now.

create .prettierrc file

{
  "overrides": [
    {
      "files": ["*.latte"],
      "options": {
        "parser": "html",
        "tabWidth": 4
      }
    }
  ]
}

 

[sebibu]

I am also already in love with Latte, but curiously enough can't find a solution to output a fieldvalue only if it exists.
Ideally with short code and output class-tag only if the value exists.

What I tried:

<body n:class="$page->category->value !== '' ? $page->category->value">
// Unexpected end, expecting for element started on line 46 at column 5 (in '.../sections/header.latte' on line 120 at column 26)
  
{if $page->category->value !== ''}{$page->category->value}{/if}
  or
<body n:class="$page->category->value !== '' ? $page->category->value">
// 2 x PHP Warning: Attempt to read property "value" on null in .../Latte/templates-sections-header.latte--27db76d0dd.php:53

I'm sure it's so easy.😇 Can you help me out?

[bernhard]

You have to check what $page->category->value actually is. You can do that with {bd($page->category->value)}

If that outputs "" or null, then you can do n:if="$page->category->value"

Likely it will be something else that only looks like a string when using "echo" but behind the scenes it's actually a PHP object. For example the root page in PHP is a "Page" object but echo $page prints "1".

18 minutes ago, sebibu said:

$page->category->value !== ''

This is an exact match, maybe it already works if you use the != operator instead of !==

That would tell the comparison to allow the value being converted to "string" before comparison, because you compare it with a string.

The same happens if you do this:

$page->template === 'foo' will always be false

$page->template == 'foo' will be true if the name of the template is "foo"

[dotnetic]

14 hours ago, sebibu said:

// 2 x PHP Warning: Attempt to read property "value" on null in .../Latte/templates-sections-header.latte--27db76d0dd.php:53

This is basically saying that you are trying to read the value property of a category which is not available, as it is null.

You could check the existence of category first and then check if the value is not empty, if you use the following comparison:

<body n:class="$page->category && $page->category->value !== '' ? $page->category->value">
 // or
  <body n:class="$page->category && $page->category->value ? $page->category->value">

 

[d'Hinnisdaël]

If you're on PHP 8 and a new-ish version of Latte, you should be able to use the nullsafe operator to safely get the value:

<body n:class="$page?->category?->value">

On PHP 7, you can still use the similar nullish coalesce operator, which in this case behaves identically:

<body n:class="$page->category->value ?? ''">