I make a small tour company site right now.
I want to describe the activity of each of a given trip -
Each 3 days has to be wrap inside a div with span-4 class as follow:
<div class ="span-4">
<h3>Day 1</h3>
<h4>Departure and arrival</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>
<h3>Day 1</h3>
<h4>Departure and arrival</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>
<h3>Day 1</h3>
<h4>Departure and arrival</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>
</div>
I use data folder and loop as follow inside my yml file:
{% for groups in site.data.tak-lampang %}
<div class="span-4">
{% for d in groups.day %}
<h3>{{d.title }}</h3>
<h2 class ="fi-marker">{{ d.direction }}</h2>
<p>{{ d.description }}</p>
{% endfor %}
</div>
{% endfor %}
My yml files look like this
- groups:
day:
- title: "Day 1"
direction: "A-B"
description: "Lorem ipsum......"
day:
- title: "Day 2"
direction: "B-C"
description:"Lorem ipsum....."
day:
- title: "Day 3"
direction: "C-D"
description: "Lorem ipsum ...."
My output is this
<div class ="span-4">
<h3>Day 3</h3>
<h4>C-D</h4>
<p>Lorem ipsum...</p>
</div>
I kind of stuck now after many tries.
Can someone point out where my mistake is ?
Two things : an error in yaml data file and a small refactoring
The error
Your assigning three time a value to the same key :
- groups:
day:
- title: "Day 1"
direction: "A-B"
description: "Lorem ipsum......"
day:
- title: "Day 2"
direction: "B-C"
description:"Lorem ipsum....."
day:
- title: "Day 3"
direction: "C-D"
description: "Lorem ipsum ...."
groups.day can have only one value and in this case it's Day 3.
Correct organization of your data file can be :
groups:
days:
- title: "Day 1"
direction: "A-B"
description: "Lorem ipsum......"
- title: "Day 2"
direction: "B-C"
description: "Lorem ipsum....."
- title: "Day 3"
direction: "C-D"
description: "Lorem ipsum ...."
The refactoring
In your loop, you do {% for groups in site.data.tak-lampang %}. This means that you will have to replicate your code for each destination. If one day you want to change your html, you'll have to change it in every files.
It's better to abstract this to an include template.
1 - datas
Your data file is tak-lampang.yml. See code above.
2 - Tour page
The tour page is tak-lampang.html or whatever you want. It contains :
---
title: Tak Lampang dream tour
layout: default
dataFile: tak-lampang
---
{% include destinationDisplay.html %}
That's it !
3 - Display template
Now the display template _includes/destinationDisplay.html :
<div class="span-4">
{% for day in site.data[page.dataFile].groups.days %}
<h3>{{day.title }}</h3>
<h2 class ="fi-marker">{{ day.direction }}</h2>
<p>{{ day.description }}</p>
{% endfor %}
</div>
Note the site.data[page.dataFile].groups.days that grab the correct datas depending on your page.dataFile variable in tak-lampang.html.
You can now change your display code in one file and that's good for maintenance ;-).
Good trip with Jekyll.
groups: day:
title: "Day 1" direction: "A-B" description: "Lorem ipsum......"
title: "Day 2" direction: "B-C" description:"Lorem ipsum....."
title: "Day 3" direction: "C-D" description: "Lorem ipsum ...."
try with this
Related
I have a small problem. I'm getting a text from the server with innerHtml which is inserted in Angular component. Inside of this text, there are possibly some links. Example text block looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Is there a way to insert a bind there a click action like this?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Thanks.
If I get you right, you render html loaded from server with innerHtml, in this case you can't use Angular directives inside of this template. But you can add listeners with common JS (document.addEventListener) after content rendering.
#Component({
template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
#ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;
ngAfterViewInit() {
const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
links.forEach(link =>
link.addEventListener('click', this.linkClickHandler.bind(this));
);
}
linkClickHandler(event: MouseEvent) {
...
}
}
For dynamic links you can bind your desired url link in you a tag like the following
<a [href]="some.url">Link</a>
If some is an object.
For click event you can have something like
method(url: string) {
window.location.href = url;
}
then you'll pass your url string like (click)="method('http://domain.tld/page.html')"
I have a JSON with one key with multiline value.
I´m trying that pug render this in multiline with breaklines, but it shows it in a line.
https://codepen.io/anon/pen/mXjZZR
<pre>
-
var example = [
{
"company": "Orange Software",
"website": "example.com",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
"services": [
"Customer experience",
"Digital strategy",
"Velocity development"
]
}
];
body
for i in example
h1 #{i.company}
p #{i.services}
</pre>
Currently all items in the services array is appended into the <p> paragraph tag, thus it is displayed in a single line.
<h1>Orange Software</h1>
<p>Customer experience,Digital strategy,Velocity development</p>
To show it in different lines, you should iterate the services array as well, and add individual array items to separate <p> paragraph elements.
for i in example
h1 #{i.company}
for j in i.services
p #{j}
Which renders to,
<h1>Orange Software</h1>
<p>Customer experience</p>
<p>Digital strategy</p>
<p>Velocity development</p>
Please let me know whether this helps.
I'm working on this app with HttpClient, which gets data from a local json file containing images and description (the images are also local) I can log the data (in local array), but I'm having trouble outputing it in the view. This is the request:
export class AppComponent {
spaceScreens:Array<any>;
constructor(private http:HttpClient) {
this.http.get('assets/data/data.json')
.subscribe(data => {
this.spaceScreens = data['results'];
console.log(data);
}, (err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log('An error occurred:', err.error.message);
} else {
console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
}
});
}
}
The JSON:
{
"screenshots": [
{
"img": "assets/images/space1.jpg",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"liked": "0"
}, //etc
The HTML:
<mat-card *ngFor="let spaceScreen of spaceScreens; let i = index" >
<img mat-card-image src="{{ spaceScreen.img }}">
<mat-card-content>
<p>{{ spaceScreen.description }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<i class="material-icons md-18" >favorite</i> LIKE
</button>
<button mat-button>
<i class="material-icons md-18">delete</i> DELETE
</button>
</mat-card-actions>
</mat-card>
This is the log:
I guess the issue has to do with the map? But if I try to map the response I get the word underlined. Can someone give me a help? Thank you
this.spaceScreens = data['results'];
should become
this.spaceScreens = data['screenshots'];
to match your json format.
change
<img mat-card-image src="{{ spaceScreen.img }}">
to
<img mat-card-image [src]="spaceScreen.img">
In angular 2+ you should prefer binding to attributes rather then setting them with string interpolation.
Try to use safe-operator ?
<img mat-card-image [src]="spaceScreen?.img">
I'm a relative newbee to jekyll and liquid. I had this running a while ago but messed it up somehow, without a backup. When finding something the error just shifts to somewhere else... Please take a look.
Here is my code:
---
title: Gallery
layout: gallery
heroimage: /img/hero-image-gallery.jpg
imgsize: small
masonry:
itemsize: 33.333%
categories:
- Objects
- People
- Places
images:
- title: one
thumb: img/gallery-image-one.jpg
big: img/gallery-image-one.jpg
categories:
- People
- Places
- title: two
thumb: img/gallery-image-two.jpg
big: img/gallery-image-two.jpg
categories:
- Objects
- Places
- title: three
thumb: img/gallery-image-three.jpg
big: img/gallery-image-three.jpg
categories:
- People
- title: four
thumb: img/gallery-image-four.jpg
big: img/gallery-image-four.jpg
categories:
- Objects
- Places
- title: five
thumb: img/gallery-image-five.jpg
big: img/gallery-image-five.jpg
categories:
- Objects
- title: eight
thumb: img/gallery-image-eight.jpg
big: img/gallery-image-eight.jpg
categories:
- Places
- title: seven
thumb: img/gallery-image-seven.jpg
big: img/gallery-image-seven.jpg
categories:
- Places
- title: six
thumb: img/gallery-image-six.jpg
big: img/gallery-image-six.jpg
categories:
- Objects
- People
- title: bla
thumb: img/gallery-image-six.jpg
big: img/gallery-image-six.jpg
categories:
- Objects
- People
---
<div class="portfolioFilter">
Alle
{% for cat in page.categories %}
{{cat}}
{% endfor %}
</div><br>
<div class="grid">
<div class="grid-sizer"></div>
{% for item in page.images %}
<div class="grid-item{% for cat in item.categories %} {{cat | slugify}}{% endfor %}">
<a class="example-image-link" href="{{item.big}}" data-lightbox="example-set" ><img src="{{item.thumb}}"/></a>
</div>
{% endfor %}
</div>
And here is the error I'm getting:
Error reading file /Users/maxborm/Desktop/lukawebsite/gallery.html: (<unknown>): did not find expected key while parsing a block mapping at line 2 column 1
Thanks in advance.
Indentation is very important in Liquid, and you have to make sure you have the right amount of spaces when declaring collections.
In your case, you have an extra space before - title: bla which is causing the error.
i.e. you have:
- title: bla
when you should have:
- title: bla
Beginner in Symfony2, so maybe it's a dumb question.
I would need to get the response of an HTTP query (external server) and put it on a template before sending it to the client.
Like
<div id="main_content">
Lorem Ipsum
<div id="external_content">
{% get_content_by_url 'http://external.com/uri' params_object %}
</div>
</div>
Or maybe I should get the response from the controller and pass it as a variable to the template ?
What is the best practice (or am I on a totaly wrong way :) ?
you can use this bundle
after enters this code in your controller:
$crawler = $client->request('GET', 'http://symfony-reloaded.org/');
$response = $client->getResponse();
$content = $response->getContent();
and finaly in file twig :
<div id="main_content">
Lorem Ipsum
<div id="external_content">
{{ content }}
</div>
</div>