Drupal 8 custom twig templates
I've abandoned the CMS framework world some years ago when Drupal was to the version 6.x.x and WordPress was at the initial stage of development.
This is because I like to write my projects in pure PHP.
I've started some project where I will use WordPress for one and Drupal 8 for another, because this is the client request.
While I was starting the creation of the layout on Drupal, I was stuck to the new templating system adopted from the version 8.
I've some trouble with twig and his tag system.
I was reading the Drupal 8 documentation and with the .info.yml
and .libraries.yml
, and I didn't found difficulties to integrate the JS, CSS.
I've included Bootstrap 4, the theme I using is stark.
I need to figure out how to create my custom markup for the layout using bs4 classes. On WordPress, it's more quickly but with the Drupal theme structure I can't understand what kind of files are required and what are a plus.
Can anyone give to me a quick explanation about this?
See also questions close to this topic
-
How to decode url from ajax response?
inside
token.php
i have this code:$url = file_get_contents($urlPost); preg_match('/\"amplem\":"(.*)\",/', $url, $matches); echo $matches[1];
This
echo $matches[1]
will print out a url like this one:https://example.com/?id\u003dg596c2f91a67e518\u0026itag\u003d18\u0026source\u003dtest
.on
index.php
i do a ajax call:$.ajax({ type:'post', url:siteURL+'/token.php', data:{token:token}, success:function(data){ var i = decodeURIComponent(data); console.log(i); } })
Current result of
console.log(i)
:https://example.com/?id\u003dg596c2f91a67e518\u0026itag\u003d18\u0026source\u003dtest
.Desired result of
console.log(i)
:https://example.com/?id=g596c2f91a67e518&itag=18&source=test
. -
PHP file would not print the response
I have html form file like this:
<div id="contactModal"> <div id="contactModalWrapper"> <span class="fa fa-times fa-lg text-danger ModalClose" (click)="routerNavigateTo('')"></span> <div id="pageContact" class="animate"> <div id="pageContactForm"> <form (ngSubmit)="onSubmit(confor)" #confor="ngForm" id="confor" enctype="multipart/form-data" > <label for="pageContactFormSubject" class="contactAfter">Pick a Subject</label> <br> <select id="pageContactFormSubject" ngModel name="subject" required="required" class="contactFormInput"> <option value="">Select...</option> <option value="myIdea">I've got an Idea!</option> <option value="general">General Enquiry</option> <option value="bugReport">Report a Bug</option> <option value="other">Other</option> </select> <br> <label for="pageContactInputName" class="contactAfter">Your Name</label> <input id="pageContactInputName" type="text" required="required" ngModel name="cfname" class="contactAfter contactFormInput"> <br> <label for="pageContactInputEmail" class="contactAfter">Your Email Address</label> <input id="pageContactInputEmail" type="email" ngModel name="cfemail" class="contactFormInput" #myEmail="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required> <br> <label for="pageContactTextarea" class="contactAfter">Tell us what's on your mind</label> <textarea id="pageContactTextarea" ngModel required="required" name="cfmessage" rows="10" cols="30"></textarea> <br> <input id="contactFormSubmit" type="submit"> </form> </div> </div> </div>
In the component, on onSubmit this function executes:
import { Component, OnInit, ViewChild } from '@angular/core'; import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { Router } from '@angular/router'; import { NgForm } from '@angular/forms'; import { PhpService } from './_services/index.service'; @Component({ selector: 'contactModal', templateUrl: './contactmodal.component.html', styleUrls: ['./contactmodal.component.scss'] }) export class ContactmodalComponent implements OnInit { @ViewChild(NgForm) form; constructor( private modalService: NgbModal, public router: Router, private phpService: PhpService ) { } ngOnInit() { } public onSubmit(confor: NgForm) { let postVars = { subject: confor.value.subject, name: confor.value.cfname, email: confor.value.cfemail, message: confor.value.cfmessage }; this.phpService.postContactForm(postVars); } }
Calling function from a service.ts file:
import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; @Injectable() export class PhpService { constructor(private http: Http) { } public postContactForm(contents: any) { let headers = new Headers(), json = JSON.stringify(contents, ['subject', 'name', 'email', 'message']); headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); this.http.post('https://comixmemes.com/sendEmail.php', json, { headers: headers }).subscribe(res => { console.log('post result', res); }); } }
When I submit the form, in the browser's devTools (F12), under Network -> Params tab, it prints this:
{"subject":"general","name":"somename","email":"email@email.com","message":"czxc"}
but the Network -> Response tab is empty.
I have been trying solutions from other posts for many days now like changing 'Content-type' or type of the data send by form from 'object' to 'array' but none have resolved my issue.
How do I retreive form data that has been sent ?
-
Problem within phpMyAdmin occured after invoking a method
Everything was running fine on my phpMyAdmin until I tried to perform an add item method to two of my tables; Items and ItemImages. The insert into the database tables seem to work fine and the image uploaded to the correct directory but when I rerendered the page displaying the items, nothing appeared. I tried deleting and recreating the tables, deleting the added item but nothing is working for me. I am thinking this might be a problem within phpmyadmin itself but other parts of the website that are reading from the database are working so I do not know. I got friends to check this too and they could not see the items. I am Open to suggestions on how I could fix this. Thanks.
-
Can I re-order columns in exporting CSV on Drupal 8 Webform Submissions?
Currently, there is a results download feature with webform core module and we can select the columns to include in exporting CSV file.
But I couldn't figure it out how can we re-order these columns to show them in exact custom order we require in exporting CSV file.
Is this possible with current features provided or is this achievable using some custom code and Webform Submission Exporter provided?
Any help, direction or guidance would be appreciated.
-
Issues in the admin panel on Drupal 7
First of all i'm a french developer so i'm sorry for my english ;-)
I have many issues on the admin panel of my Drupal 7 Website. I made a full copy of my production website to have it on a preproduction environnement (exactly the same server configuration).
It's tough to explain my problem even in french so i made a few screenshot to illustrate. On every pictures yo have the preproduction site on the left and the production site on the right.
Screenshot 1 : Where is my wysiwyg ? https://i.stack.imgur.com/BYR1w.png
Screenshot 2 : The list (ex : style settings) are inactive https://i.stack.imgur.com/0L8Lo.png
Screenshot 3 : No arrows to re-order my blocks https://i.stack.imgur.com/ddzSU.png
I hope someone can help me.
Thanks a lot.
Gaƫtan
-
Existing drupal website stay as new website
I'm a little confused about installing an existing Drupal project. The existing project has been developed with Drupal and Symfony. I'm using Wamp and PHP 7.2.14.
I do the following steps for the installation:
- Create database in PhpMyAdmin
- Import the existing database
- Run "consposer install" at the root of the website folder.
- Change the database setting to connect mine
- Run from the Navigator: MonSite/web/core/install.php
- It shows MyDrupal is already installed so I run update script.
Then I launch the website but still have nothing. I always have an empty Drupal page (the same as the one created after installation of a new drupal project).
Thank you for your help !
-
How to display the title of the node in plain text in TWIG on Drupal 8?
I created TWIG for my node, my products, my groups and my stores.
I'm on Drupal 8. For my nodes, I want to display the title. I use the following code:
{{ label }}
But there is the markup inside and I do not want it. So I tried the following code and it works. But is it a good practice ?
{{ label.0 }}
How to display the title of the node in plain text in TWIG on Drupal 8 ?
-
In Timber pass an ID in the loop to a WP function
In Timber/Twig I am displaying a list of events using:
page-events.php:
$context = Timber::get_context(); $events = array( 'post_type' => 'event', 'posts_per_page' => 10, ); $context['events'] = Timber::get_posts( $events ); Timber::render( array( 'page-' . $post->post_name . '.twig', 'page-home.twig' ), $context );
page-events.twig
{% for event in events %} <li>{{ event.name }} - *country* </li> {% endfor %}
I would also like to show the country associated with the event. This is stored as a term. In WordPress, I would normally retrieve this using:
$country = get_the_terms( get_the_ID(), 'country'); echo $country[0]->name;
How would I pass the ID to
get_the_terms($id, 'country')
using Timber?I have searched the Timber documentation and Googled but cannot find an answer.
I have tried
{{ get_the_term( event.id, 'country' ) }}
and{% get_the_term( event.id, 'country' ) %}
and similar, without success. -
Twig template section with variable
Im writing little CMS, for this project Im using Laravel/Lumen FW and Twig engine for templates. I would like to had option to dynamically edit front page, and her sections. Sections of my front page, are stored in mySQL base as text where I putting my html code of section. Section is printed by Twig, by for statement.
Everything work's fine until, I put another variable into my section content in mySQL base.
I does it becouse I want to made child element for my section, which could be displayed only into her area.
Twig for loop:
{% for section in sections %} {{ section.content }} {% endfor %}
Value of section.content in mySQL base:
Lorem ipsum {{ section.name }}
Result which I saw is plain text, without rendering by twig, so it looks like content in base.
Lorem ipsum {{ section.name }}
What could I do to print variable inside other variable in Twig engine?
Thanks.