I am just new to Drupal and trying to update some existing applications. I am trying to associate the title to an URL. I tried this
link(title, content.field_url)
But I don't think I am right track. Any help would be appreciated. Following is the twig templet for displaying persons.
<div class="wdn-col" style="margin-top:2.4em;">
<div class="wdn-grid-set">
<div class="wdn-col-three-sevenths">
<div class="wdn-frame">{{ (content.field_portrait) }}</div>
</div>
<div class="wdn-col-four-sevenths">
<h5 class="wdn-brand clear-top">{{title }}
<span class="wdn-subhead">{{ (content.field_position) }}, {{ (content.field_institution) }}</span></h5>
<p style="font-size:smaller;">{{ (content.field_unit) }}</p>
<p>{{ (content.field_email_address) }}</p>
</div>
</div>
</div>
Try like this way....
{{ title }}
Related
Before creating this question, I've read all the question existing, and none of the answers has fixed my issue.
Well, I'm fetching a data from API, {{ album.image["3"]["#text"] }} - is the link to the .png file which I would like to set as background-image of the . Here is the example of my code:
<div class="album-grid">
<div *ngFor="let album of albums">
<div class="album"> <--! I want here to set a backgroundImage for each album-->
<h4>{{ album.name }},</h4>
<h5>by {{ album.artist.name }}</h5>
<p>{{ album.image["3"]["#text"] }}</p> <--! this is the link to .png file I'm getting from server -->
</div>
</div>
</div>
here is the solutions I've tried, but none of them helped me:
[style.backgroundImage]="album.image['3']['#text']"
[style]="backgroundImage: {{album.image['3']['#text']}"
[ngStyle]="{ 'backgroundImage': album.image['3']['#text'] }"
Link to my repo -> https://github.com/paslavskyi9roman/Spotilar
On a picture, you can see a grid of albums, with the album name, artist name, and link to album cover file which need to be a background image
click here
You are missing the url() part.
Try the following (as seen in your repository)
<div class="album" [ngStyle]="{ 'backgroundImage': 'url('+ album.image['3']['#text'] + ')'}">
<h4>{{ album.name }},</h4>
</div>
<h5>by {{ album.artist.name }}</h5>
</div>
I need to create a selection list with checkboxes inside of an expansion
expansion panel
<mat-expansion-panel *ngFor="let item of Dataseource">
<mat-expansion-panel-header style="display:flex" class="mat-row">
{{datasource.showheader}}
</mat-expansion-panel-header>
<div *ngFor="let match of Datasource; let i= index">
<mat-selection-list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option [value]="match">
<div class="container-name">
<div class="col-6">{{match.Name }} vs {{ match.Address }}</div>
</div>
<mat-divider [inset]="true" *ngIf="!last"></mat-divider>
</mat-list-option>
</mat-selection-list>
</div>
</div>
</mat-expansion-panel>
I should be able to select individual items and add to list object with header and selected items
<mat-expansion-panel *ngFor="let item of Datasource">
<mat-expansion-panel-header style="display:flex" class="mat-row">
{{item.Name}}
</mat-expansion-panel-header>
<mat-selection-list ngFor="let match of item.match; let i= index;" [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option *ngFor="let match of item.match" [value]="match">
<div class="container-name">
<div class="col-6">{{match.Name }} vs {{ match.Address }}</div>
</div>
</mat-list-option>
</mat-selection-list>
</div>
<hr>
</mat-expansion-panel>
Not sure why I have been down voted on this.
Surely I found the solution to a problem and can hopefully help someone.
I realize I am not a programmer, and also a beginner regarding coding but I am trying to solve a problem with a website I have built using Jekyll.
I am trying to retrieve a single item from a collection in a _data file. The code in the example pulls all entries into the detail.html page, I just want to show one particular item from the collection to place in the details.html page.
It comes from a picture gallery which has a link allowing the viewer to click and see a larger example of the item with all the information on the artwork.
Here is the details.html page in the Jekyll _includes folder:
<!-- Wrapper Start -->
<section id="intro">
{% for work in site.data.work %}
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="block">
<img src="{{ work.img }}" alt="{{ work.title }}">
</div>
</div><!-- .col-md-5 close -->
<div class="col-md-4 col-sm-12">
<div class="block">
<div class="section-title">
<h2>{{ work.title }}</h2>
<br>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics</p>
<h5>{{ work.medium }}</h5>
<h5>{{ work.size }}</h5>
<h5>{{ work.frame }}</h5>
<div class= "sold">
<h5>{{ work.avaliability }}</h5>
<p>{{ work.desc }}</p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
This is part of the collection in the file work.json in _data folder:
[
{
item1 "img": "img/portfolio/work1-big.jpg",
"title": "Window Models",
"medium": "Medium: Acrylic on canvas",
"size": "Artwork size: 100cm x 100cm",
"frame": "Frame: yes",
"avaliability": "Avaliability: sold",
"desc": "i am a fron on a log looking out to sea!.",
item2 },
{
"img": "img/portfolio/work2-big.jpg",
"title": "The Flower",
"medium": "Medium: Acrylic on canvas",
"size": "Artwork size: 100cm x 100cm",
"frame": "Frame: yes",
"avaliability": "Avaliability: sold",
"desc": "i am a fron on a log looking out to sea!.",
},
{
etc...
I would like to grab item1 in a liquid loop without other items showing on the page.them grab item2 without other items in the collection showing in the page.Then item 3 then 4 ect .......
I hope this explanation makes sense.
New user of D8 : my problem is to access to fields in a view or even in general with Drupal 8.
As we could do with ACF in Wordpress.
a {{ kint() }} crash my chrome but works with Firefox to explore the content var.
Unfortunately I do not managed to find and use fields' variables in my view.
I create a new view, which actually display the last three articles. These are well displayed in ugly list but I want to extract fields to put them in a custom html integration.
I create and use a new template for the view :
x node--view--liste-des-actualites--page-2.html.twig
In a custom parent :
x node--page-accueil.html.twig
But when I try to kint() content in my node--view--liste-des-actualites--page-2.html.twig, I have the custom field of the page (Page accueil) and can't find the article's one.
I managed to do it in my custom page but not in this view.
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
'clearfix',
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
<div{{ content_attributes.addClass('node__content', 'clearfix') }}>
{{ content }}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<a href="{{ LINK_VAR }}" class="bloc-type">
<div class="categ categ_projet">{{ CATEGORY_VAR }}</div>
<div class="img"> <img src="{{ IMAGESRC_VAR }}" alt=""> </div>
<span class="wrapper">
<p class="date">{{ DATE_VAR }}</p>
<h3>{{ TITLE_VAR }}</h3>
</span>
</a>
</div>
</div>
</article>
EDIT
I managed to guess some fields but this is definitely not a good way to find variables..
{{ node.label }} + {{ content.field_tags }} (But I do not want a rendered one, I just want the text/value)
if you use kint(); to debug large arrays can crash your browser.
I would suggest to use the devel module https://www.drupal.org/project/devel. With devel you can debug your arrays inside of the Drupal8 UI for each content type, block or view.
In my case i use the UI of devel (additional tab on each content). in the module settings, you can chose how devel debugs, the error handling and the output.
As the OP commented it is possible to use a preprocess to display the array on your site:
function <themename>_preprocess_page(&$variables) {
dpm($variables);
}
I want to be able to apply some bootstrap formatting on these fields and labels but I don't want all the fields displayed and I know using widget renders the rest of the fields and labels so what can I use in lieu? I tried
{{ form_start(edit_form, {'attr': {'novalidate': 'novalidate'}}) }}
{{ form_row(edit_form.orgName, {'label_attr': {'class': 'col-md-2'}}, {'label': 'Organization Name'}, {'attr': {'class': 'col-md-4'}}) }}
// blah blah more labels and fields
{{ form_end(edit_form) }}
This generates:
<div class="form-group'">
<div><label class="col-md-2 required" for="company_nameofbundleorg_orgName">Org name</label><input type="text" id="company_nameofbundle_org_orgName" name="company_nameofbundle_org[orgName]" required="required" value="Computation Directorate" /></div>
</div>
Update: I tried this:
{{ form_row(edit_form.orgName, { 'label': 'Organization Name:'
,'label_attr': {'class': 'col-md-2'}
,'attr': {'class': 'col-md-4'}}) }}
I guess putting the "label" before the "label_atrr" matters. But why am I getting my class as "col-md-2 required".
<div class="form-group'">
<div><label class="col-md-2 required" for="company_nameofbundle_org_orgName">Organization Name:</label><input type="text" id="company_nameofbundle_org_orgName" name="company_nameofbundle_org[orgName]" required="required" class="col-md-4" value="Computation Directorate" /></div>
</div>
As you can see it's not applying it to the <div> does not get applied. Any ideas?
This might not be the best solution. I still think modifying the "form_div_layout.html.twig" is probably the best stratgey. A faster solution in my case is to just put
<div class="hidden">
{{ form_widget(edit_form.orgFax) }}
</div>
to not show the one field I do not want to display. If your interested in modifying the "form_div_layout.html.twig" it is located in /vendor/symfony/symfony/src/Symfony/Bridge/Twig/Resources/views/Form/ and here is a good source for modifying it.