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>
Related
I'm using angular calendar, and I want to customize the events style,for example- to change their shape to square instead of circle.
I tried this code:
<mwl-calendar-month-view [eventTitleTemplate]="customEventsStyle" [locale]="locale" [viewDate]="viewDate" [events]="events" (dayClicked)="dayClicked($event.day)" (eventClicked)="eventClick($event)">
{{ viewDate | calendarDate:(view + 'ViewTitle'):'Es' }}
</mwl-calendar-month-view>
<ng-template #customEventsStyle let-event="event">
<div class="cal-events">
<p style="background-color: brown;">{{event.title}}</p>
</div>
</ng-template>
But it didn't change anything in the style.
I also tried to change the css file in this path:
"../node_modules/angular-calendar/css/angular-calendar.css"
I changed the style of the .cal-month-view .cal-event class, but nothing happend.
I'm new for this issue, I'll be thankful if you could help me.
Thank you
I found it out!
I just added this code into the custom template instead of the div:
<ng-template #customCellTemplate let-day="day">
<mat-list *ngFor="let e of day.events">
<button class="customEvent" (click)="eventClick(e)">
{{e.title}}
</button>
</mat-list>
</ng-template>
<mwl-calendar-month-view [cellTemplate]="customCellTemplate"> ect...
Thanks
I have about six tags that I use on my blog. On the index.hbs page, I display each post in a small box, with the title, tag and author. I was wondering if there was a way to style each of those tags a different colour. For example, tag-1 would be red, tag-2 would be blue, and so on.
Here is my current code for a item on the home page—
<div class="synk-item ff-card shape-rounded bg-white shadow-mild">
<a href="{{url}}">
{{#if primary_tag}}
<p class="post-category category-product no-margin">{{primary_tag.name}}</p>
{{/if}}
<h4 class="margin-top-fixed">{{title}}</h3>
</a>
<div class="margin-top-tiny vertically-center-items">
{{#if author.profile_image}}
<img class="icon-small shape-circular margin-right-fixed show-inline " src="{{author.profile_image}}" alt="{{author.name}}" />
{{/if}}
<p class="post-author text-small show-inline">{{author}}</p>
</div>
</div>
I'd like that primary tag to have a specific colour based on the tag. Is that possible?
First, you'd need to assign a class. All Ghost resources (tags, posts, users) have a "slug" property, that is used in URLs and is also valid for classes.
So you would do something like this:
{{#if primary_tag}}
<p class="post-category category-product no-margin tag-{{primary_tag.slug}}">{{primary_tag.name}}</p>
{{/if}}
Then assuming you have a primary tag called "Foo Bar" and one called "Buzz", the slugs would be foo-bar & buzz, and the classes would be tag-foo-bar and tag-buzz.
In your CSS you can then setup appropriate rules. A crude example would be:
.tag-foo-bar {
background: red;
}
.tag-buzz {
background: blue;
}
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 }}
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);
}
Relatively new to Ionic.
I have seen examples of this succeeding here in stackoverflow
http://stackoverflow.com/questions/30584948/ionic-framework-different-background-color-for-each-list-item
http://stackoverflow.com/questions/30806738/why-collection-repect-not-show-alternate-color-in-angular-js
However, I not having success in the implementation. I have my collection-repeat in an ion-item tag.
<ion-item class="item item-thumbnail-left artistList" collection-repeat="artist in artists | filter:searchText" collection-item-height = "100px" ng-click="artistDetail(artist)" on-swipe-left="onSwipeLeft(artist)">
<img ng-src="{{ artist.image }}">
<h2>{{ artist.name }}</h2>
<h4>{{ artist.email }}</h4>
<h4>{{ artist.twitter }}</h4>
<h4>Upcoming Event: {{ artist.artist_info.upcoming_events[0].datetime | date: 'MMM d, y' }} </h4>
<h4 class="defaultValue" ng-hide="artist.artist_info.upcoming_events[0].datetime"> None Yet!</h4>
<div class = "item-icon-right">
<i class="icon ion-ios-arrow-right item-right positive"></i>
</div>
<ion-option-button ng-click="payPal(artist.artist_info.paypal_link)" class="button-positive icon ion-social-usd"></ion-option-button>
<ion-option-button class="button-positive icon ion-heart"></ion-option-button>
</ion-item>
I attempted to do ng-class-odd="odd-row" ng-class-even="even-row"and have declare the css but there was no change. Does this work differently with ionic-item tag?
Here is similar to what I would like (Except I want every other to be a different color):
http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview
One solution could be to use the $index property of the ion-list.
Just to give you some information about $index it gives the index of current list item and starts from zero index. Means the index of first item will be zero.
As per the code provided by you the following code should work
<ion-item class="item item-thumbnail-left artistList"
collection-repeat="artist in artists | filter:searchText"
collection-item-height = "100px"
ng-click="artistDetail(artist)"
on-swipe-left="onSwipeLeft(artist)"
ng-class="$index%2 != 0 ? 'classA' : ''" >
It will added the classA on every alternate item starting from second item of list (since the index of list is started with zero)
Refer this updated Plnkr code.
Hope this will help.