Is there a way in Jekyll to add a string filter for {{ data[1] }} in this YAML hash, so that the comma after "amet" doesn't break the array?
- project:
-
name: Name
main:
- image: image.png, Lorem ipsum dolor sit amet, consectetur adipiscing elit., category, Main Category, placeholdertext
Edit: #marcanuy asked how data[1] is defined. It's the index location in a for loop, and I'm using it for an alt tag: alt="{{ data[1] | strip }}", so:
{% for main in project.main %}
{% assign main = site.data.catalog[0].project[0].main[0] %}
{% assign data = main.image|split:"," %}
Maybe you can simplify you catalog file structure.
_data/catalog.yml
Contains all projets in an array :
-
name: Name1
main:
image:
url: image1.png
alt: 1Lorem ipsum dolor sit amet, consectetur adipiscing elit.
category: 1Main Category
placeholderText: 1placeholdertext
-
name: Name2
main:
image:
url: image2.png
alt: 2Lorem ipsum dolor sit amet, consectetur adipiscing elit.
category: 2Main Category
placeholderText: 2placeholdertext
Now, you can get stuff with :
{% for project in site.data.catalog %}
{% assign mainImg = project.main.image %}
<img src="{{ site.base }}{{ maybe.img.path.from.config }}{{ mainImg.url }}" alt="{{ mainImg.alt }}">
{% endfor %}
Someone answers: create a new array with the first item removed (the name of the image) and the join the rest of the elements with a comma to restore the original text:
Image name: {{ data |first | strip }}
{% assign text = data | shift %}
Image text: {{ text | join: "," }}
Output:
Image name: image.png
Image text: Lorem ipsum dolor sit amet, consectetur adipiscing elit., category, Main Category, placeholdertext
Related
I'm trying to use tinymce. So far so good, so I tried to add some formats (like adding some background colour, or making some styles for headers.
It does show everything in place but it won't be saved to the database with the format.
This is my configuration:
tinymce.init({
entity_encoding : "raw",
selector: '.wysiwyg',
plugins: "image textcolor colorpicker hr link table lists advlist contextmenu",
toolbar: 'styleselect | undo redo | bold italic underline | link image | forecolor backcolor | hr | table',
menubar: "",
contextmenu: "bold italic underline | bullist numlist | link | cell row column deletetable",
content_css : "style-tinymce.css",
valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]",
image_caption: true,
style_formats: [
{title: 'Image Left', selector: 'img', styles: {
'float' : 'left',
'margin': '0 10px 0 10px'
}},
{title: 'Image Right', selector: 'img', styles: {
'float' : 'right',
'margin': '0 10px 0 10px'
}},
{ title: 'Encabezado',
block: 'h2',
styles: { 'color': '#0871ad' }
},
{ title: 'Texto Resaltado',
inline: 'span',
styles: { 'color': '#000000',
'background-color': '#f6f433'
}
}
]
});
These are the steps that I'm taking:
I do add the image:
I set the image with the format "float right":
I add some special format to the text:
This is what is saved into the database:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan, massa at sollicitudin vulputate, mauris sapien vestibulum libero, id mollis arcu neque vitae odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ornare tristique tempor. In finibus volutpat sapien. Nulla mi justo, luctus ut volutpat a, tienim. Mauris molestie placerat dui sed consectetur.
I did cut the est of the Lorem Ipsum text. As you can see, the image is saved, but the format won't.
It does not happen the same with the bold, or italic, for example, they do get saved. It only happens with my special style_formats.
I'm using tinymce 4.
What am I doing wrong? Thanks!
Just in case it helps someone some day: the problem was this ine:
valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]",
Telling tinymce that it should accept IMG as a valid element, I was actually telling them that it was the only valid element that it should accept!
I want to show show more text only if the p tag is more than 40px height and if the text expands on click of show more, it should change to show less. So how can I check the condo if the text size is more than 40px ? Kindly help.
<p class="expandable" ng-class={expanded:show}>long text-------</p>
<a ng-if="!show" ng-click="show=true">show more</a>
<a ng-if="show" ng-click="show=false">show less</a>
CSS:
.expandable {
line-height:40px;
Overflow:hidden;
}
.expanded{
line-height:auto;
}
Hi referer this https://plnkr.co/edit/gfQmrD1mRvF81QXp7C8C?p=preview
HTML
<p class="expandable hideContent" ng-class=showclass> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
ghjgjgjkghkk jkhkj
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.-</p>
<div class="show-more">
{{showtest}}
</div>
JS
$scope.showtest = 'ShowLess';
$scope.showmore = function(_logout) {
if($scope.showtest == 'ShowMore')
{
$scope.showtest = 'ShowLess';
$scope.showclass = 'hideContent';
}
else
{
$scope.showtest = 'ShowMore';
$scope.showclass = 'showContent';
}
}
using the Line-height i implement the class
CSS
/* Put your css in here */
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
.showContent{
height: auto;
}
Why I can't remove item from array posts?
html tag for delete item
html tag
<span ng-click="remove($index)"> delete</span>
//AngularJS method where I try to delete item
blog.remove = function(index) {
blog.posts.splice(index, 1);
};
//Angular array posts
blog.posts = [{
"title": "Blog Post One",
"comments": [
{
"body":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. ",
"author": "trollguy87"
}
]}];
Where can be problem?
Try passing the item to the function and getting the index from the item.
As mentioned in the below thread.
How do I delete an item or object from an array using ng-click?
If you are using ng-repeat then this can help:
<div ng-repeat="key in posts"> <!-- This will use your blog.posts -->
<button ng-click="posts.splice($index, 1)">
{{key.title}}
</button>
</div>
im working in phonegap project with angularjs google maps (https://github.com/allenhwkim/angularjs-google-maps)
I need to change default icon marker with custom images.
This is my controller code:
core.js
// Map Markers Controller
app.controller('markersController', function($scope, $compile){
$scope.infoWindow = {
title: 'title',
content: 'content'
};
$scope.markers = [
{
'title' : 'Location #1',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7112, -74.213]
},
{
'title' : 'Location #2',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7243, -74.2014]
},
{
'title' : 'Location #3',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7312, -74.1923]
}
];
$scope.showMarker = function(event){
$scope.marker = $scope.markers[this.id];
$scope.infoWindow = {
title: $scope.marker.title,
content: $scope.marker.content
};
$scope.$apply();
$scope.showInfoWindow(event, 'marker-info', this.getPosition());
}
});
And this is my markers.html
<div ng-controller="markersController" class="map-fullscreen-container">
<map zoom="8" center="[-26.82, -54.84]" class="fullscreen">
<info-window id="marker-info">
<div ng-non-bindable="">
<strong class="markerTitle">{{ infoWindow.title }}</strong>
<div class="markerContent">
<p>{{ infoWindow.content }}</p>
</div>
</div>
</info-window>
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)" >
</marker>
</map>
</div>
If you only have one marker, you can set it up directly on your marker directive:
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)"
icon="yourIconUrl.png" >
</marker>
If you have different markers for each item, the first thing you need to do is to add the icon property to your items:
$scope.markers = [
{
'title' : 'Location #1',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7112, -74.213],
'icon' : 'yourIconUrl.png'
},
{
'title' : 'Location #2',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7243, -74.2014],
'icon' : 'yourIconUrl.png'
},
{
'title' : 'Location #3',
'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
'location' : [40.7312, -74.1923],
'icon' : 'yourIconUrl.png'
}
];
Then you need to use it on your html, by adding it to the marker directive:
<marker ng-repeat="(id, marker) in markers" id="{{ id }}"
position="{{marker.location}}"
on-click="showMarker(event, $index)"
icon="{{marker.icon}}" >
</marker>
That's it, hope that helps.
Please refer to the documentation for more info:
https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html
I have an ng-repeat that displays a list of dates, and information about purchases on that dates.
HTML:
<div ng-repeat="data in MyData">
<p>
{{ data.purchasedOn.substring(6, data.purchasedOn.length - 2) | date:'dd/MM/yyyy' }}
</p>
<br>
<p>
{{ data.purchaseDescription }}
</p>
</div>
Which displays:
01/02/2013
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
10/04/2014
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
02/08/2014
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
13/06/2014
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
19/02/2013
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"
How can i only show the {{ data.purchaseDescription }} when purchasedOn is within the last 6 months from the current month?
Assuming that you want to show purchasedOn but not the description, you could use a function like this one described here to determine a date 6 months prior.
function addMonths(date, months) {
date.setMonth(date.getMonth() + months);
return date;
}
Then define a function to get a boolean show/hide value:
function shouldHide(purchasedOn){
var purchaseDate = Date.parse(purchasedOn);
var sixMonthsAgo = addMonths(new Date(), -6);
var hide = purchaseDate < sixMonthsAgo ? true : false;
return hide;
}
Now you can just use your function in an ng-hide in your <p> element
<p ng-hide={{shouldHide(data.purchasedOn)}}>
{{ data.purchaseDescription }}
</p>
EDIT
If you do just want to hide the entire element, you could make a filter function like this:
$scope.filterOldDates = function(date)
{
if(shouldHide(date)){
return false;
}
return true;
};
You would use it like this:
<div ng-repeat="data in MyData | filterOldDates">