Render field directly in page.html.twig - drupal

How can i render a field directly in the page.html.twig?
When i try to render it like:
{{ node.field_my_field.value }}
I get:
Exception: Object of type Drupal\entity_reference_revisions\EntityReferenceRevisionsFieldItemList cannot be printed
When i add a .value, it does still not render right (well i use paragraphs with subfields) but get following error:
User error: "target_id" is an invalid render array key in
Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).
User error: "target_revision_id" is an invalid render array key in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).
User error: "_loaded" is an invalid render array key in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).
User error: "_accessCacheability" is an invalid render array key in Drupal\Core\Render\Element::children() (line 97 of core/lib/Drupal/Core/Render/Element.php).
So how can i render it?

In Drupal 8 & Twig you can render a lot of stuff such:
 Render field value
For example, the node title
{{ node.title.value }}
Render field entity value
For example, a field of taxonomy term categories
{{ node.field_categories.entity.name.value }}
 Render field value of Paragraph (entity)
You can't print a Paragraph entity in Twig, but you can print every fields
{{ node.field_my_field.entity.field_title.value }}
In the previous example, field_title is a field of my Paragraph.
To go further, you could render a display mode using the module Bamboo Twig.
- Project page
- Article about Bamboo Twig
- Official Documentation
Render entity with display mode using Bamboo Twig
After installing the module and enable the submodule bamboo_twig_loader.
{# Render node with nid 1 #}
{{ bamboo_render_entity('node', 1) }}
{# Render the teaser of node with nid 2 #}
{{ bamboo_render_entity('node', 2, 'teaser') }}
Render field using Bamboo Twig
{# Render the title of node 1 #}
{{ bamboo_render_field('title', 'node', 1) }}
Hopes it will help you !

In order to render the field in a twig template, you will need a contrib module; unless you go with the hook_preprocess_page() implementation.
Using Bamboo Twig definitely does your job, as already mentioned in the suggested answer. It seems a bit awkward at first that you have to enable one of its submodules in order to achieve this though.
An alternative and more common solution is to use the Twig Tweak module with which you could do the following (copying from their cheat sheet):
{{ drupal_field('field_image', 'node', 1) }}
{{ drupal_field('field_image', 'node', 1, 'teaser') }}
{{ drupal_field('field_image', 'node', 1, {type: 'image_url', settings: {image_style: 'large'}}) }}

Related

How to display the Content type custom fields in twig template?

I am very new to Drupal.
Can anyone tell me how to display the custom fields content type into twig template?
Thank you
I used below code with content and nodes.
{{ content.field_a }}
You'll have to follow these steps :
Step 1) Custom template for a content type
Suppose, you have to create a new template for content type i.e. Article ( machine_name : article ). Just make a copy of node.html.twig and rename with node--article.html.twig
Step 2) Call custom field
In this template, you can display content of your field like {{ content.field_test_field }}
Step 3) Clear Cache
If you're looking to create a full page template for an Article for example, you can create a file called : page--node--article.html.twig
Any custom content type would follow the pattern, for example if the content type is called Machine Product, the template would be: page--node--machine-product.html.twig (1 dash between spaces of the content type name.
For Drupal 8, this is my typical mapping for this filetype :
Blocks:
{{ page.REGIONNAME }}
Title:
{{ node.title.value }}
Taxonomy Terms/Dropdown Selects in Create Content:
{{ node.field_FIELDNAME.0.entity.label }}
General Text Fields:
{{ node.field_FIELDNAME.value }}
Images/Files:
{{ file_url(node.field_FIELDNAME.entity.fileuri')) }}

Display dynamically informations in a Symfony layout

I have a layout included in another one that display my menu. The labels of my menu items need to be dynamic (like the unread messages number of a mailbox). Then I did this :
My orders
(
{{ render(controller('MyController', {'etat':2})) }}
<span style="color:red">with {{ render(controller('MyController', {'etat':2})) }} in late</span>
)
I would like to display labels according to the number that return my controller. I don't know how to get it in a variable.
When rendering your template in your controller
return $this->render('twig_template_name.html.twig', array('variable_name' => $variable);
you pass a variable to the twig template in the array of options as I showed. Your code
{{ path('mypath',{'etat': '2' }) }}
prints a path defined in the routing.yml under the 'mypath' section and ends up adding a GET request variable to the link ('?etat=2'), if 'mypath' showed an absolute route 'www.website.com/yourpath',
{{ path('mypath',{'etat': '2' }) }} would produce 'www.website.com/yourpath?etat=2', which would send your controller for a route /yourpath/{etat} a variable etat with a value of 2 so all you need to do now is change 2 with an actual dynamic value which you receive from another controller.
I am not sure what etat is but lets say it's an article and it has it's id, you have a blog page with lots of articles and the controller that prints them all out sends an array of articles to the twig template, on your twig template you do something like:
{% foreach article in articles %}
{{ article.title }}
{{ article.story }}
read more
{% endforeach %}
And you end up something like:
Catchy Title
Awesome story about code without bugs and where deadlines depend on how creative and well designed and implemented the solutions are
[read more]
and you ofcourse click on "read more" and end up on the url ~/article/2 because the article had an id of 2, your controller for that url receives a variable id in the request, you do a $id = $_GET['id']; and grab the article from the repository and send it to the template.
Hopefully this answered your question, I am very tiered so forgive me if i was confusing which I surely was.

Translate the value of twig variable

Is it possible to translate the value of twig variables in a template with the 'trans' tag?
Say for instance I am passing a product to my template. This product has a definition with a trans tag e.g {{ product.definition|trans }}. This definition could either be in EN or DE or some other language. How could I translate the definition.
What are you trying to do is not a good way, It would look like this:
messages.en.yml
product:
definition:
some_value1: Some value 1
some_value2: Some value 2
and in template, you would do something like this:
{% set definition_value = product.definition %}
{% set trans_definition = 'product.definition.' ~ definition_value %}
{{ trans_definition|trans }}
it'll work, if it finds the key. What if it cant find it?
That's why you should use DoctrineBehaviors from KnpLabs, which handles all the dynamic translations for you..
If {{ product.definition }} equals 'cellphone' the following should work.
message.language.yml:
'cellphone': This will work!
However if you want to map it with the 'product' key in your message file like this:
product:
'cellphone': This also works
add the key to the twig template like so:
{{('product.'~product.definition)|trans }}

Using doctrine database object in a template

I am new to Symfony and am finally beginning to understand how to query a database using a Doctrine. However, I am lost as far understanding how to use the database object content in a Twig template.
Lets say my database object contains product Id's, names, prices, for 50 different products. After I am done querying the database in the controller, I do the following, to pass the database object into the Twig template:
public function searchAction($word)
{
//query database using the $word slug and prepare database object accordingly
$dataObject; // contains query results
return $this->render('GreatBundle:Default:search.html.twig', array('word' => $word));
}
This is where I am stuck. Now I have a Twig template, I would like to pass the DB object from the controller and then print out the database data in my Twig template.
I appreciate any suggestions as to how I can accomplish this.
Many thanks in advance!
I'll respond with an example (more easier for me to explain)
You want to search something with a slug (the var $word in your example). Let's say you want to find a article with that.
So your controller :
public function searchAction($word)
{
//query database using the $word slug and prepare database object accordingly
// Search the list of articles with the slug "$word" in your model
$articleRepository = $this->getDoctrine()->getRepositoy('GreatBundle:Article');
$dataObject = $articleRepository->findBySlug($word);
// So the result is in $dataObject and to print the result in your twig, your pass the var in your template
return $this->render('GreatBundle:Default:search.html.twig', array('result' => $dataObject));
}
The twig template 'GreatBundle:Default:search.html.twig'
{% for item in result %}
{{ item.title }} : {{ item.content }}
{% endfor %}
Just look the second example in the Symfony2 Book (Sf2 Book - templating), you have to use the function "for" to parse your object (like an array in php !)
Example in your twig template :
{% for item in word %}
{{ item.id }} - {{ item.name }} - {{ item.description }}{# etc... #}<br>
{% else %}
<h2>Aoutch ! No data !</h2>
{% endfor %}
Ah, and it's not the good var in your render method (but it's was for your example !)
public function searchAction($word)
{
//query database using the $word slug and prepare database object accordingly
$dataObject; // contains query results
return $this->render('GreatBundle:Default:search.html.twig', array('word' => $dataObject));
}

Table sheet like data in symfony2 form

I need to have this type of data in my form :
value11, value12, value13 ...
value21, value22, value23
value31, value32, value33
value41, value42, value43
...
This is how the form should look like :
Is there any form type that can do that automatically or the form must be created manually? There is collection type but its seems cant fit in my case. I am planing to serialize data from this table sheet and story it to single db table column (single property of entity class).
Is there any better way to store table sheet data type presented in this example? Preserving all values in their own entity properties is not an option, because there will be plenty of table data in that form.
You should create an entity class with x , y and value properties.
x & y being unique combinations, representing the position in your matrix.
This entity does not have to be stored in your database and can only be used to generate the form.
Then create a form-collection which renders your fields in this matrix form.
Finally: use a DataTransformer to transform the collection of entities to an array as desired.
Now save the array in your database.
I have tried couple of solutions and this is best result by my opinion:
Step 1.
Creation of macro for generating tableSheet in separate twig file (for later usage in other forms).
{# in Default:form.html.twig #}
{% macro tablesheet(name, rows, colums, titles) %}
... titles header ...
{% for i in 1..rows %}
{% for j in 1..colums %}
<input name="{{ name }}_{{ i }}{{ j }}" type="text" class="flat-form" />
{% endfor %}
{% endfor %}
{% endmacro %}
Step 2.
Import macro and create tables of input fields, in add/edit template :
{% import "ProjectSomeBundle:Default:form.html.twig" as forms %}
...
{{ form_widget(form) }}
{{ forms.tablesheet('table1', 4, 3, {0:'col1', 1:'col2', 2:'col3'}) }}
{{ forms.tablesheet('table2', 7, 3, {0:'col1', 1:'col2', 2:'col3'}) }}
...
</form>
Step 3.
Create jQuery function to serialize/deserialize form (input elements with flat-form class attr in this case). For serilize I used something like this http://css-tricks.com/snippets/jquery/serialize-form-to-json/ . Serialized values are stored in single entity filed as string and saved to db like that.
How it's works :
on opening edit form, jQuery deserialized data from that entity field and loaded to tablesheet input fields. Before sending it back (post) to server values are collect and put in that same field via serialized function.

Resources