Working with Squarespace. At the bottom of each blog post I'm trying to get the authors name, bio, avatar, and applicable social media links to show.
I've solved with the exception of the Twitter and Facebook links.
Anyone know the variable to include these?
Here's my working code:
{.section author}
<span class="author-name">
{.if author.avatarId}
<div class="bespoke-avatar">
<a href="{collection.fullUrl}?author={author.id}">
<img src="/global/{author.avatarId}?format=36w" />
</a>
</div>
{.end}
<div class="bespoke-info">
<em class="bespoke-author-name">{displayName}</em>
<em>{author.bio}</em>
</div>
</span>
{.end}
There is a json object that is storing the social links.
authenticatedAccount -> socialOptions
"socialOptions" : [ {
"type" : "facebook",
"username" : "http://facebook.com"
}, {
"type" : "twitter",
"username" : "http://twitter.com"
}, {
"type" : "google",
"username" : "https://plus.google.com/"
} ],
Go to your main site add ?format=json-pretty and look for the above object.
Related
I have a json object called blogData with json data. Inside the json obj the tags key may have multiple tag values. I would like to display the tags values separately in span tag while iterating using map function.
Now multiple tags are displaying in a single span tag ( please see below) How can I fix this ?
const blogData = [
{
"id" : 1,
"title":"Cypress tests",
"images":"/images/image1.jpg",
"description": "Add the E2E cypress UI tests",
"tags": "cypress"
},
{
"id" : 2,
"title":"Jmeter tests",
"images":"/images/image2.jpg",
"description": "Performance test using Jmeter tool",
"tags": ["jmeter", "performance"]
},
{
"id" : 3,
"title":"Basic Unix commands",
"images":"/images/image3.jpg",
"description": "Learn basic unix commands in git bash",
"tags": "unix"
},
{
"id" : 4,
"title":"Postman",
"images":"/images/image4.jpg",
"description": "Api testing using postman",
"tags": ["postman", "api"]
},
]
Home.js
const [searchResults, setSearchResults] = useState([]);
<div className="container">
{
searchResults.map(({ id, title, images, description, tags }) => (
<div key={id} className="column-center">
{/* <img className="blogImage" key={images} src={images} alt="image"></img> */}
<div className="blogtitle">
<span key={title}>{title}</span>
</div>
<section>
<p className="blogdescription" key={description}>{description}</p>
</section>
<section className="col1">
<span key={tags}>{tags}</span>
</section>
<section className="col2">
<a>Read more {'>'}{'>'}</a>
</section>
</div>
))
}
</div>
I think this what you are after.
Sandbox
<section className="col1">
{Array.isArray(tags) ? (
tags.map((tag) => (
<span style={{ marginRight: "10px" }}>{tag}</span>
))
) : (
<span>{tags}</span>
)}
</section>
You could make this code much simpler be having the tags field always be an array even if there is a single element.
I have a total of (3) templates in my page and this overlay template is the third and final one. The first two are basically written the same as this template and they work fine. BUT For some reason, console.log(html) on this one returns nothing :
<!-- JSON -->
{ "art" : [{
"title" : "2 Intro-B",
"img_small" : "2 Intro-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "6 Bison-B",
"img_small" : "6 Bison-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}, { "title" : "7 Cars-B",
"img_small" : "7 Cars-C",
"description" : "8x10 archival print on Epson Fine Art Velvet Paper.",
"price" : "20"}]}
<!-- HTML -->
<div id="overlay"></div>
----------------------------------------------
<!-- SCRIPT -->
<script id="overlayTmpl" type="text/template">
{{#overlayTemplate}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/overlayTemplate}}
</script>
<script type="text/javascript">
$(function(){
$.getJSON('/scripts/art.json', function(data) {
var overlaytmpl = $('#overlayTmpl').html();
var html = Mustache.to_html(overlaytmpl, data);
console.log(html);
$('#overlay').html(html);
});
});
</script>
** On the first two templates, the console.log(html) returns the html output just fine. I don't know why this one is hung up on something. JSON file has been validated...
Please help me from going insane. There must be a hex on this block of code. Anyone have a magic wand?
This may help you - Change your template like this:
<script id="overlayTmpl" type="text/template">
{{#art}}
<div id="lightbox">
<div id="closeButton">X</div>
<img src="/images/{{title}}.jpg"/>
</div>
{{/art}}
</script>
I have this Backbone App where I display my data/json with HandlebarsJS.
Now my API returns nested JSON data:
{
"Live": [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
],
"Others" : [
{
"artist_name": "some artist",
"video_title": " some video title",
"video_thumbnail": "some thumbnail"
}
]
}
I tried to do
{{#each Live}}
<div>
<img src="{{video_thumbnail}}">
<h2>{{video_title}}</h2>
<h2>{{artist_name}}</h2>
</div>
{{/each}}
But that did not work...
Anyone who know what to do? thanks in advance...
Handlebar templates can be used in two ways.
1. We can save the file with (.hbs)
2. Second way is we need the handlebar template in script tag. Provided same in [jsfiddle][1] , I have provided link, you can check the below link
[1]: https://jsfiddle.net/trilokvallamkonda/cLgzf21y/13/
I have json data having anchor tag .
task.json
{
"data": [{
"id": 1,
"title": "Launch an EC2 Instance",
"desc": "Needed an <a href='#'>EC2</a> instance to deploy the ccr code",
"status": "done",
"percentage_finished": 100
}]
}
I am using angularjs to render this data to my html page . But anchor tag is not working.
It prints as it is as Text.
<div class="task-pn panel panel-primary">
<div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
<div class="panel-body">
<div onclick="this.contentEditable='true';">{{task_detail.desc}}</div>
</div>
</div>
Output img.
I need a simple link to EC2 word .How to deal with this isuue?
You need something like this:
In your controller:
scope.trustedHtml = sce.trustAsHtml(json.desc);
And to use it in your partial:
<p class="org-desc" ng-bind-html="trustedHtml"> </p>
user2720708 :Thanks for sharing your ideas.
eRIZ gave this link .There I used the idea of Luke Madera.
Current working html page .
<div class="task-pn panel panel-primary">
<div class="panel-heading"><b>Description : Task-{{task_detail.id}}</b></div>
<div class="panel-body">
<div contentEditable" ng-bind-html="task_detail.desc"></div>
</div>
</div>
and Then I follow only two steps :
1.include the angular-sanitize.min.js resource, i.e.:
2.In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services',
'myApp.directives', 'ngSanitize']) ---------from answer given by Luke Madera
Its working now ...:)
I am new in kendo ui. I have a shopping cart system like this http://demos.kendoui.com/sushi/. I want to show multiple images in a single line by creating image array. the code of this demo site at this address. https://github.com/telerik/kendo-mobile-sushi.
If you have modified menu.js and the entries look like:
{
"id" : 1,
"name" : "Sashimi salad",
"price" : 12.00,
"image" : "sashimi-salad.jpg",
"category" : "Cold starters",
"description": "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",
"featured" : true
},
{
"id" : 2,
"name" : "Chirashi sushi",
"price" : 21.00,
"image" : [ "chirashi-sushi.jpg", "chirashi-sushi.jpg", "chirashi-sushi.jpg"],
"category" : "Cold starters",
"description": "Sushi bar variety with sushi rice.",
"featured" : false
},
Where you have entries as Sashimi salad that only have one image defined as a string and entries as Chirashi sushi where have multiple images defined in an array.
Then you should modify your templates for checking if image is a string and if not then iterate on the array elements. Something like:
<script id="menuTemplate" type="text/x-kendo-template">
<a data-role="button"
data-click="addToCartFromList"
data-item-id="#:id#"
href="\\#">#:kendo.toString(price, "c")#</a>
<a class="details-link" data-role="listview-link" href="\#details?id=#:id#">
# if (typeof image === 'string') { #
<img src="content/images/75/#= image #"/>
# } else { #
# for (var i = 0; i < image.length; i ++) { #
<img src="content/images/75/#= image[i] #"/>
# } #
# } #
<h2>#:name#</h2>
<span class="added"#= cartDataSource.get(id) ? "" : 'style="display: none"' #>Item added to cart</span>
</a>
</script>