Render tpl files in browser - server-side-rendering

.tpl is an extension for templates, used by shop sites. I download the files from a site (nuvemshop.com) and the pages files came with .tpl. By the way, css is with .tpl extension too. What I could do to render these files? Maybe I need a server side renderer? Appreciate for the help :).
I will atach an example:
<div class="page-content pagina container-xs">
{% snipplet "breadcrumbs.tpl" %}
{# Page preloader #}
<div class="page-loading-icon-container full-width hidden-when-content-ready">
<div class="page-loading-icon svg-icon-secondary opacity-80 rotate">
{% include "snipplets/svg/spinner.tpl" %}
</div>
</div>
<div class="visible-when-content-ready user-content">
{{ page.content }}
</div>
</div>
```
`
It's like Jinja or Twig templates.
I try to render the template directly in browser, but obsviously does'nt work.

I partially solve it. .tpl files are templates from smarty lib and to render them, you need to use the class in a php file and start a server. I will atach my php file:
include "smarty/libs/Smarty.class.php";
$smarty = new Smarty();
$smarty->template_dir = "smarty/templates";
$smarty->compile_dir = "smarty/templates_c";
$smarty->config_dir = "smarty/configs";
$smarty->assign("msg", "Hello World!");
$smarty->display("smarty/examples/test.tpl");
The problem is: my "tpl" file is like more twig or jinja, and is not renderer by smarty because the wrong syntax. You can see the true syntax in the docs: https://www.smarty.net/
So, I will keep trying to renderer these files and I update the answer if I find a solution

Related

Rendering Issue in header.html.twig file path in page--front.html.twig

I created a custom theme in drupal 8.
Now after much work i want a separate file and folder for header, footer etc so created a folder partials and created a file name header.html.twig file copied the header from front page and now after assigning a path in that front page which is :
{% include directory ~ '/partials/header.html.twig' %}
I cannot get a header in the front page, if i do it directly so i can get the header on front page.
The Code I wrote for header was :
<header class="main-header" role="banner">
<div class="container">
{{ page.header }}
<div class="main-navigation">
{{ page.main_navigation }}
</div>
</div>
</header>
The directory variable refers to the root folder of your theme, so it should be something like that :
{% include directory ~ '/templates/partials/header.html.twig' %}
But Drupal recommends using a Twig namespace, like so :
{% include '#your_theme_name/partials/header.html.twig' %
A Twig namespace is created in Drupal 8 automatically when installing your theme, and it points to the /templates directory of your theme. Essentially, writing "#theme_name" in a Twig include (like above) will reference the location "your_site.com/themes/theme_name/templates" on your server.
More info here : https://www.drupal.org/docs/8/theming-drupal-8/including-part-template

Setting up Google Analytics in Jekyll when theme includes no head.html

I have this static page built with Jekyll and host with GitHub Pages (repo), and I wanted to track it with Google Analytics.
I was following this tutorial.
But I've reached the step where it says:
Finally, open _includes/head.html and add the following code just before the end tag.
And actually my theme has no _include/head.html file!
So my question is, if I create a file called _include/head.html should it be automatically included in every page built by Jekyll? (I tried creating such a file and adding a placeholder image to see if that worked but it didn't)
The code that follows that quote should be included in every html page built by Jekyll, right? Like, that is what I want for it to work, no? So if I put it in footer.html instead it should work?
If you create that file, as the tutorial suggests, then you can use it everywhere, (in your layout for example) so every time you include it, it gets rendered.
Create the file _includes/head.html with the analytics content.
Then in your layout include it where you want it to appear like:
{% include head.html %}
Then you can place all your code that goes in your head there, so you have a cleaner layout
side note
I prefer to have the analytics code following Google recommendation immediately after the opening <body> tag. So my default layout looks like:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include ganalytics.html %}
{% include header.html %}
{{ content }}
{% include footer.html %}
</body>
</html>
and _includes/ganalytics.html just contain the analytics code.
Simple add analytics marker in _layouts/default.html head tag. No need to add a head include.

How to get the field_image path with Twig in Drupal 8

To make an animated slider, I overwrite a fields view template file in my own template named: views-view-fields--slider.html.twig
Inside that file I have access to a fields array to print out all the fields that are in my content-type slide.
The problem is that I need to get the path of the image file instead of the image itself, because I need the path for CSS background-image styling.
The following doesn't work:
<div class="jumbotron " ref="" style="background-image:url(?????);">
{{ file_url(fields.field_image.entity.fileuri) }}
</div>
I tried everything I good find on Google:
fields.field_image.entity.uri
fields.field_image.entity.uri.value
fields.field_image.entity.url
fields.field_image.entity.url.value
etc.
Has anyone an idea how it is done in Drupal 8 ?
Since you are in views-view-unformatted you should already have access individualy to each field of your content type Slide with {{ row.content }} and because of that you have to do:
{{ file_url(row.content.field_image.entity.fileuri) }}
Try {{ file_url(row._entity.field_image.entity.uri.value) }}.
It works for me.
<div style="background-image:url({{ file_url(row._entity.field_image.entity.uri.value) }});"></div>
I found this module: image_url_formatter, so in View interface, I can use this to formatter my image filed as path.
It works perfect, but if I turned the twig debug on, it wouldn't work, because it will output debug annotation. I don't know how to solved it yet.
I use fields.field_image.content to show the path, I don't konw whether it's rignt.
Solution without extra module:
In your Views:
1.Add your image filed to the Advanced/Relationship
2.Then in the filed section, change to File Group, you can see URI field,add it, and make sure you check "Display the file download URI"
3.Add your new field in the twig template: {{ field.uri.content }}
Done!

Responsive Email Template in Twig file

Trying to build a responsive email template in a Twig file. Using Swiftmailer within a Symfony application to send the emails. Two issues I am having so far is the images only show when I view the email on my localhost not when the email is viewed in Gmail, Inbox or Yahoo!
Linking the images using an absolute path (currently). Also, tried a relative path with the same result.
<img src="{{ absolute_url(asset('bundles/coreecommerce/images/logo.png')) }}">
Problem #2 is include stylesheets. I have some media queries in a stylesheet I am trying to include within a head tag like this.
{% block stylesheets %}
<link href="{{ asset('bundles/coreecommerce/css/email.css') }}" rel="stylesheet" />
{% endblock %}
I'm doing something wrong here. Just not sure what? Can you include stylesheets, inline styles for a responsive email in Twig?
Thanks for any help.
To inline images in your html mails you should take a look at this section of the documentation.
To show you the example with twig, you can start with something like this:
<?php
$message = \Swift_Message::newInstance();
$fileToEmbed = 'a path to image file';
$templateParams = [
'fileToEmbed' => $message->embed(\Swift_Image::fromPath($fileToEmbed)),
];
// then compose the mail like this
$message
// set subject etc...
->setBody($this->twigTemplating->render('yourMailTemplate.html.twig', $templateParams), 'text/html')
;
And then in you twig template you just create a IMG tag with template variable:
<img src="{{ fileToEmbed }}">
So TL;DR you just need that $message->embed(\Swift_Image::fromPath($fileToEmbed)) return value to be passed to your mailing template and use it as src attribute.
To locate the image file within your bundle you can use Kernel::locateResource method like this (assuming that your logo.png is located in CoreEcommerceBundle/Resources/public/images/ directory):
$fileToEmbed = $this->kernel->locateResource('#CoreEcommerceBundle/Resources/public/images/logo.png');

NetBeans use custom code templates for a TWIG file

In my twig view files for a Symfony application I need to write a log {% trans %}Foo Bar Baz{% endtrans %} what is quite annoying.
Therefore I tried to make a template, where I just have to write trans press space and the magic is done.
I made a new Template in Twig File, Twig Block and Twig Variable but non of them worked. The Code I used was:
{% trans %}${TEXT}{% endtrans %}
Abbreviation is trans
Then I restarted NetBeans, but unfortunately nothing happens when I write trans in a .twig file.
What am I doing wrong? How do I have to do this?
Thanks (:
You should add your Code Template in the Twig Block language, not Twig File language.
You don't need to reboot netbeans.
Then, type relatively quickly: {% trenter
You'll come up with:
If you don't want to type {% at all, you can choose HTML language instead of Twig Block language (assuming your file name ends with .html.twig).

Resources