I have a html snippet in a markdown file in jekyll, the problem is that when it gets parsed, liquid tries to parse it, is there anyway I can tell liquid not to parse a specific line or block?
public render() {
<ExifOrientationImg markdown="span" src={img} style={{ height: '100%', width: '100%', objectFit: 'cover' }} />
}
throws:
Liquid Warning: Liquid syntax error (line 25): Expected end_of_string but found colon in "{{ height: '100%', width: '100%', objectFit: 'cover' }}" in /Users/osp/dev/githubpage/_posts/2019-08-27-react-rotating-image.md
Liquid Warning: Liquid syntax error (line 63): Expected end_of_string but found colon in "{{width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center'}}" in /Users/osp/dev/githubpage/_posts/2019-08-27-react-rotating-image.md
Liquid Warning: Liquid syntax error (line 86): Expected end_of_string but found colon in "{{maxWidth: '100%', maxHeight: '100%'}}" in /Users/osp/dev/githubpage/_posts/2019-08-27-react-rotating-image.md
...done in 0.138611 seconds.```
The {% raw %} liquid tag disables Liquid parsing :
{% raw %}
public render() {
<ExifOrientationImg markdown="span" src={img} style={{ height: '100%', width: '100%', objectFit: 'cover' }} />
}
{% endraw %}
Related
I am trying to select backgroundImage dynamically based on value of item.imageLinks.smallThumbnail.
If the array returned by my API has a smallThumbnail URL then I want to use that as the backgroundImage or use a local default backgroundImage of book.png inside ../public.
Below is my code, but it's not working when item.imageLinks.smallThumbnail is undefined and it's not using the alternate book.png but giving me the error:
Type Eror: Cannot Read 'smallThumbnail of undefined
Please help.
Thanks
return(
<ol className="books-grid">
{book.map( (item) => (
<li key={item.id}>
<div className="book">
{item.shelf && (
<div className="book-top">
<div
className="book-cover"
style={{ width: 128, height: 193, backgroundImage: `url({${item.imageLinks.smallThumbnail} || ../public/book.png } )` }}></div>
If imageLinks is undefined then it is not an object so you won’t be able to use dot syntax, hence the error trying to get the smallThumbnail property.
Try this instead:
<div
className="book-cover"
style={{
width: 128,
height: 193,
backgroundImage: `url(${(item.imageLinks && item.imageLinks.smallThumbnail) || "../public/book.png"})`
}}
></div>
... so you are checking for imageLinks first.
Since your imageLinks itself is not a property you can handle this like so:
let imageUrl = item.imageLinks ? item.imageLinks.smallThumbnail : '../public/book.png';
return(
<ol className="books-grid">
{book.map( (item) => (
<li key={item.id}>
<div className="book">
{item.shelf && (
<div className="book-top">
<div
className="book-cover"
style={{ width: 128, height: 193, backgroundImage: `url(${imageUrl})` }}></div>
in your code you need to handle the situation where item.imageLinks is not defined, so the problem is with this line:
`url({${item.imageLinks.smallThumbnail} || ../public/book.png })`
Here, if imageLinks is undefined, the line will error out.
Instead you could use the ternary operator like this:
`url({${(item && item.imageLinks && item.imageLinks.smallThumbnail) ? item.imageLinks.smallThumbnail : `../public/book.png`} })`
Although this is very hard to read.
I'd consider refactoring this so that you have an array of objects at the top of your render method, where you store the image and image url for each item and then iterate over that in your render method.
This is now solved, Below is the code that worked.
return(
<ol className="books-grid">
{book.map( (item) => (
<li key={item.id}>
<div className="book">
{item.shelf && (
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${(item.imageLinks && item.imageLinks.smallThumbnail) || "book.jpg"})` }}></div>
One trick that i learned here is using && to check for undefined otherwise JS will complain of error.
Thanks Everyone
This is an exaple if you're using react js
import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'
const Post = (data) => {
return (
<div
style={{
backgroundImage: `linear-gradient(
325deg,
rgba(0, 36, 51, 1) 0%,
rgba(98, 218, 255, 0.164) 100%
),url(${(data.img)})`
}} className="cardService">
<div>
<h1 className='serviceTitle'>{data.name}</h1>
<h6 className='serviceDescription'>{data.description}</h6>
</div>
</div>
</Fragment>
)
}
export default Post;
Below is an example of code that works for me, adding double quote around it worked
let imageUrl = item.imageLinks ? item.imageLinks.smallThumbnail : '../public/book.png';
return(
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${imageUrl}")` }}></div>
Is there any way when your text is too long - and you break it up with new lines - to not have whitespace happen? What I need is three values to be joint without whitespace in between.
<div style='font-size:100%; color:blue'>
{{ $record->m_pk_address_line1 }}
{{ $record->m_pk_address_line2 }}
{{ $record->m_pk_address_line3 }}
</div>
Without entering new line, it'll be too long even if they can be joined together.
<div style='font-size:100%; color:blue'>{{ $record->m_pk_address_line1 }}{{ $record->m_pk_address_line2 }}{{ $record->m_pk_address_line3 }}</div>
Is there no standard way of going about this without resorting to tricks? What do people do when their code is too long and they need to break it up into new lines but they don't want the whitespace that comes with it?
You could make an accessor in the model of $record
public function getFullAddressAttribute($value)
{
return $record->m_pk_address_line1 . $record->m_pk_address_line2 . $record->m_pk_address_line3;
}
and use that in your views like this
$record->full_address;
you have two tricks to avoid whitespace, the first is html comments:
<div style='font-size:100%; color:blue'>
{{ $record->m_pk_address_line1 }}<!--
-->{{ $record->m_pk_address_line2 }}<!--
-->{{ $record->m_pk_address_line3 }}
</div>
the second is font-size: 0
.container {
font-size: 0;
}
.container > * {
font-size: 1rem; /** or whatever suits your needs **/
}
For removing whitespaces use
$string= preg_replace('/\s+/', '', $string);
<div style='font-size:100%; color:blue'>
{{ preg_replace('/\s+/', '', $record->m_pk_address_line1 }}
{{ preg_replace('/\s+/', '', $record->m_pk_address_line1 }}
{{ preg_replace('/\s+/', '', $record->m_pk_address_line1 }}
</div>
Concatenate all three items:
<div style='font-size:100%; color:blue'>
{{ $record->m_pk_address_line1.$record->m_pk_address_line2.$record->m_pk_address_line3 }}
</div>
I have been trying to display a json file having multiple arrays in it on the front-end div tag in using Services Angular2 using Typescript. Can anyone help?
Also, If anyone can help transforming this code by adding Model and Interface class would be very helpful.
Here is the code:
SERVICE
export class HttpServiceDemo{
_data: any;
private url: string = "assets/sample.json"
constructor(private http: Http){}
getMyOrder(){
//return this.http.get(this.url)
// .map((response: Response)=> response.json());
return this.http.get(this.url)
.map(res => this.http = res.json().myOrder);
}
}
component.ts
export class SimpleHTTPComponentComponent implements OnInit {
data:any;
Order_date:any;
OrderNumber: number;
P_O_Number:number;
Total: number;
Quote_Status: string;
Expiration_Date: any;
Quote_Created_On: any;
constructor(public vara: HttpServiceDemo) {
}
ngOnInit() {
//calling myorder from json
this.vara.getMyOrder().subscribe(response => {
this.data=response;
for (var myOrder in this.data)
{
console.log(myOrder, this.data[myOrder]);
this.Order_date=this.data[myOrder].Order_Date;
this.OrderNumber=this.data[myOrder].OrderNumber;
this.P_O_Number=this.data[myOrder].P_O_Number;
this.Total=this.data[myOrder].Total;
this.Quote_Status=this.data[myOrder].Quote_Status;
}
})
}
sample.json
---------------
{
"accOrder":[
{
"Order_Date": "10-sep-1981",
"OrderNumber" : "E12345",
"P_O_Number": "P12345",
"Total": "123",
"Quote_Status": "In Progress"
},
{
"Order_Date": "1-oct-1981",
"OrderNumber" : "E82398",
"P_O_Number": "P87815",
"Total": "265",
"Quote_Status": "In Progress"
},
{
"Order_Date": "21-nov-1981",
"OrderNumber" : "E52367",
"P_O_Number": "P76549",
"Total": "454",
"Quote_Status": "In Progress"
},
{
"Order_Date": "10-dec-1981",
"OrderNumber" : "E42840",
"P_O_Number": "P23632",
"total": "123",
"Quote_Status": "Completed"
}
]
}
You are saying your console.log() shows the JSON just fine ?
Then, your data is correctly fetched into your component's data attribute.
You just have to go through your attribute in your template using *ngFor directive then.
Plunkr : https://plnkr.co/edit/4IdV3OHyNFNi90KXQQHP?p=preview
template: `
<div>
<div *ngFor="let order of data.accOrder" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
Order_Date : {{ order.Order_Date }} <br>
OrderNumber : {{ order.OrderNumber }} <br>
P_O_Number : {{ order.P_O_Number }} <br>
Total : {{ order.Total }} <br>
Quote_Status : {{ order.Quote_Status }} <br>
</div>
</div>
`
PS : No need for your "for" loop inside ngOnInit() , this is not how you should access the data.
You should check out the ngFor doc to learn more about it.
EDIT :
As I said in my comment below, my previous Plunker was using raw data while you use asynchronous data in your use case (it's coming from an Observable sent from your service).
To make it work then, you have to check if your component already received the data before you try to display it. For that, you need to use the *ngIf directive.
New Plunkr : https://plnkr.co/edit/W5qykrh4blplGxTyp8aC?p=preview
template: `
<div *ngIf="data; else loading">
<div *ngFor="let order of data.accOrder" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
Order_Date : {{ order.Order_Date }} <br>
OrderNumber : {{ order.OrderNumber }} <br>
P_O_Number : {{ order.P_O_Number }} <br>
Total : {{ order.Total }} <br>
Quote_Status : {{ order.Quote_Status }} <br>
</div>
</div>
<ng-template #loading>Fetching the data from the webservice... Wait 3 seconds !</ng-template>
`,
You have to create a parent div to the one with your *ngFor directive. In this parent div, use the *ngIf="data" directive. Everything inside it will not be displayed until there is some data into the data attribute.
I used here an if/else syntax which appeared with Angular4. But you don't need that. That's just here to display a message while there is no data. It could be a loading spinner for example, to let the user know he has to wait.
If you don't want to use this if/else condition, you can do it without it like that :
template: `
<div *ngIf="data">
<div *ngFor="let order of data.accOrder" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
Order_Date : {{ order.Order_Date }} <br>
OrderNumber : {{ order.OrderNumber }} <br>
P_O_Number : {{ order.P_O_Number }} <br>
Total : {{ order.Total }} <br>
Quote_Status : {{ order.Quote_Status }} <br>
</div>
</div>
`,
Hope this helped :)
I have a page twig which consumes a component file which in turn consumes another file. I need to set all content for any of these files in the page file.
In my page twig file:
{% set content = {
title: 'page title',
accordion: {
'text': 'TitleA'
}
}
%}
{% include "component.twig" with content %}
In component.twig:
{% set settings = {
'class': 'my-class',
'style': 'primary'
}|merge(accordion)
%}
{% include "button.twig" with settings %}
In button.twig:
<button class="{{ class }} button--{{ style }}" type="button">{{ text }}</button>
Im using gulp-twig. The above works however i get this error in my console.
https://github.com/zimmen/gulp-twig
Error parsing twig template /Users/me/myproject/src/components/component.twig:
TypeError: Cannot read property '_keys' of undefined
at /Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:10:3579
at Array.forEach (native)
at Object.Twig.forEach (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:8:822)
at Twig.filters.merge (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:10:3399)
at Twig.filter (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:10:10126)
at Twig.expression.definitions.parse (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:9:21538)
at /Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:9:28849
at Array.forEach (native)
at Object.Twig.forEach (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:8:822)
at Twig.expression.parse (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:9:28724)
Error parsing twig template /Users/me/myproject/src/components/component.twig:
TypeError: Cannot read property '_keys' of undefined
at /Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:10:3579
at Array.forEach (native)
at Object.Twig.forEach (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:8:822)
at Twig.filters.merge (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:10:3399)
at Twig.filter (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:10:10126)
at Twig.expression.definitions.parse (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:9:21538)
at /Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:9:28849
at Array.forEach (native)
at Object.Twig.forEach (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:8:822)
at Twig.expression.parse (/Users/me/myproject/node_modules/gulp-twig/node_modules/twig/twig.min.js:9:28724)
I can make the error going away by creating the following object. The weird thing however is that from looking at the page I can see TitleA is used not TitleB.
{% set accordion = {
'text': 'TitleB'
}
%}
Ive tried different syntax eg:
{% include "button.twig" with accordion|merge({class: "my-class", style: "primary"}) %}
A workaround solution I discovered was to set an empty object as a default value before applying the merge filter e.g:
{% set foo = foo|default({})|merge(...) %}
Sorry for the stupid question, but I looked everywhere in the doc. If I want to set size, height and width of an image with HTML::image, how can I do it?
I tried with:
{{ HTML::image('path', array('width' => 70 , 'height' => 70)); }}
But it doesn't seem to work.
It should work with
{{ HTML::image('path', 'alt', array( 'width' => 70, 'height' => 70 )) }}
The alt text comes before the attributes array.
In Laravel 5 following ways to use img in blade:
{!! HTML::image('img/picture.jpg', 'a picture', array('class' => 'thumb')) !!}
Note: you need to install laravel library before use HTM i.e "laravelcollective/html": "~5.0",
OR
<img src="{!!asset('img/picture.jpg')!!}">
OR
Set dynamically url:
<img src="{!!asset('img/').'/'.$imgsrc!!}">
Solution : store image path to your MYSQL table field. And dont forget the dot ( . ) at the beginning of filepath.
<img src='./images/bajja_huggy2.gif' class= img-responsive style= height: 22px; width: 100px; >
you can see how I have used twitter bootstrap and other properties.
#foreach($imagefiles as $img)
<div class="col-xs-2 ">
{{ $img->image_3}}
</div>
#endforeach
you can
{{ HTML::image($product->image, $product->title, array('width' => '90%', 'height' => '50%')) }}
it required to be Apostrophe if create inside the percent.
<img src="{{ asset('folder-name/pic_trulli.jpg')}}" class="img-fluid" style="min-width: 20px; min-height: 20px;">
<img src='./images/bajja_huggy2.gif' class= img-responsive style= height: 22px; width: 100px; >