ACF with Timber&Twig - don't display on front page - twig

I am new to Timber and Twig andnow I encountered problem I cannot solve. I use ACF in page templates and everything works fine but they do not display on front page. {{dump.(post.meta)}} is null
my front-page.php:
<?php
$context = Timber::context();
$context['post'] = new Timber\PostQuery();
$templates = array( 'pages/front-page.twig');
Timber::render( $templates, $context );
my front-page.twig:
{% extends "base.twig" %}
{% block content %}
{{dump(post.meta('header'))}}
<h1>{{post.meta('header')}}</h1>
<div class="hero__image__container">
<img src={{ Image(post.meta('img')).src }}/>
</div>
{% include 'parts/banner.twig' %}
{% include 'parts/services.twig' with {'items': services.get_items} %}#}
{% endblock %}
What am I doing wrong?

When you want to get a single post in Timber, you would use Timber::get_post().
<?php
$context = Timber::context();
$context['post'] = Timber::get_post();
$templates = array( 'pages/front-page.twig' );
Timber::render( $templates, $context );
When you use Timber\PostQuery, you get a collection of posts in return, which behaves like an array. Before you could use {{ post.meta() }}, you’d first have to access the first post in that array.

Related

How to integrate Symfony 6 form with proper style into EasyAdmin 4?

I have a logic that wouldn't be easy to implement in EasyAdmin so I decided that I implement it in Symfony 6 then integrate it into EA. The integration worked like a charm but I can't figure out which form_theme should I use to look like the other EA forms.
I have created a form type which doesn't belong to any entity since multiple entities will be generated after the validation based on the input data.
This is the controller
<?php
namespace App\Controller\Admin;
use App\Form\Type\NewTextType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class TextController extends AbstractController
{
#[Route('/admin/text/new', name: 'new_text')]
public function new(): Response
{
$defaultData = [];
$form = $this->createForm(NewTextType::class, $defaultData);
if ($form->isSubmitted() && $form->isValid()) {
$data = $form->getData();
// process the data and persist them as different entities
// redirect to the empty form and do it again
}
return $this->renderForm('admin/text/new.html.twig', [
'form' => $form,
]);
}
}
and the template
{% extends '#EasyAdmin/page/content.html.twig' %}
{% form_theme form 'foundation_5_layout.html.twig' %}
{% block content_title %}
<h1 class="title">Add new Text</h1>
{% endblock %}
{% block main %}
{{ form(form) }}
{% endblock %}
Unfortunately it looks like a crap.
It looks better if I replace foundation_5_layout with {% form_theme form 'bootstrap_5_layout.html.twig' %} but then the appearance setting is not applied even though it is presented in the BODY tag:
data-ea-dark-scheme-is-enabled="true"
What do I miss here?
I use Symfony 6.1.2 and EasyAdmin 4.3.2
Finally I have found the right template which supports the Light/Dark appearance:
{% form_theme form '#EasyAdmin/crud/form_theme.html.twig' %}
The whole template
{% extends '#EasyAdmin/page/content.html.twig' %}
{% form_theme form '#EasyAdmin/crud/form_theme.html.twig' %}
{% block content_title %}
<h1 class="title">Add new Text</h1>
{% endblock %}
{% block main %}
{{ form(form) }}
{% endblock %}

Translate data from API in in template with an an other API

im doing a package tracker with PHP / TWIG , and would like to translate results in an other language, so i have a google translate APi
in my twig file i have this :
{% for item in item.origin_info.trackinfo %}
<div class="status-{{item.checkpoint_status}}">
<p> {{item.StatusDescription}}. </p>
<hr/>
{% endfor %}
And i would like to translate each {{ item.StatusDescription }}. Could you tell me how to do ?
my function to translate is :
function translation($str){
$url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=fr&dt=t&q=" . $str;
$result = file_get_contents($url);
$data = json_decode($result);
$traduction = $data[0][0][0];
$lang = $data[2];
return $traduction;
}
You could register a custom filter into twig which allows you to call global functions.
$twig = new \Twig\Environment($loader);
$twig->addFilter(new \Twig\TwigFilter('translate', 'translation'));
First parameter translate is what the filter will be called in twig, the second is your global function translation. You now can use this filter in any template, e.g.
{% for item in item.origin_info.trackinfo %}
<div class="status-{{item.checkpoint_status}}">
<p> {{ item.StatusDescription | translate }}. </p>
<hr/>
</div>
{% endfor %}
If you need more than one extra function, filter, test, ... you are better off with creating an extension. See documentation for more information on this.

Opencart php to twig

can anybody help convert to twig this piece of code.
foreach ($methods as $method){?>
<li><?php echo ${'tab_express' . $method}; ?></li>
<?php } ?>
I have tried this:
{% for method in methods %} <li>{{ 'tab_express' ~ method }}</li>
{% endfor %}
But this part: {{ 'tab_express' ~ method }} does not work. What wrong?
*EDIT:
need retrieve names of the tabs from the controller
foreach ($data['methods'] as $method){
$data['tab_express' . $method] = $this->language->get('tab_express' . $method);
}
*
I answered below
solution for my question i found.
in controller should be:
foreach ($data['methods'] as $method){
$data['tab_express'][$method] = $this->language->get('tab_express' . $method);
Twig:
{% for method in methods %}
<li>{{ tab_express[method] }} </li>
{% endfor %}
In controller it should be:
{{ attribute(_context, 'tab_express' ~ method) }}

Using an ACF gallery with Timber/Twig

I'm using Timber (the WordPress plugin implementation of Twig) and the Advanced Custom Fields plugin gallery field. I have a working gallery under a custom post type, so ACF and Timber are working elswhere in the site, but not for a standard page. When I try to add a gallery to a page, all I end up with is empty markup for the img src tag.
I have this in page.php in the template folder:
$context = Timber::get_context();
$page = new TimberPost();
$context['page'] = $page;
if ($photos = $page->get_field('photos')) {
$context['photos'] = $photos;
}
I have this in default.twig in the templates/page/ folder in the theme (html removed for simplicity):
{% if page.photos %}
{% for p in page.photos %}
<img src="{{ p.sizes.gallery|relative }}" alt="{{ p.alt }}" />
{{ p.caption }}
{% endfor %}
{% endif %}
This results in the page source <img src="" alt="">.
If I use {{ dump(photos) }} inside the for p in page.photos statement, it dumps the array of images I have entered in the Gallery field on the backend. So the image array exists and it being output. The relative extension runs for all post types; removing it makes no difference here.
So why is the p.sizes.gallery|relative function not outputting each image's url and caption?
You append the data to the $context['photos'] so I believe you should change your code to check for if photos and iterate as for p in photos

Set an object with Twig into a template thats imported via another template?

Im including a link.twig into block.twig, and block.twig into page.twig. in my set options is there a way I can change the link objects name to something like heroLink?
I need to set options within page.twig. link.twig is included into other templates so I dont want to change it (eg changing link.url to heroLink.url).
In my page:
{% set options = {
title: 'my title',
link: {
text: 'Search',
url: "www.google.com"
}
}
%}
{% include "block.twig" with options %}
In block.twig:
<div class="something">
<h2>{{ title }}</h2>
<div class="hero">
{% include "link.twig" with {'style': 'primary'} %}
</div>
</div>
In link.twig:
{{ link.text }}
The reason for this is that block.twig actually has other links. link.twig may be imported multiple times. As the mock object needs to be created in page.twig something like heroLink makes a lot more sense in this context.
In my page:
{% set options = {
action: {
text: 'Action',
url: "action.com"
}
}
%}
{% include "component.twig" with options %}
In component.twig:
{% import "link.twig" as mainLink %}
{{ mainLink.link(action.url, action.text) }}
In link.twig
{% macro link(url, text) %}
{{ text }}
{% endmacro %}

Resources