I need to modify the parser rules for my img element.
Currently it only support very limited attributes with limit data types as following:
"img": {
"check_attributes": {
"width": "numbers",
"src": "url",
"height": "numbers",
"data-sda": "url"
}
}
How to make it support more elements like class or id.
In my solution I, the user, drag images and drop it inside the editor which is wysihtml5 as I said before.
This pull request on github adds what seems like exactly the feature you're looking for: extend checkAttributes value type. It's a small change; you could do it by hand on your own copy without any fuss.
Related
We use many charts, and some of them simply lack data, especially when filtering for dates. In these cases, the "No data to display." message appears. That's all well and good, but the problem is that the captions and subcaptions (which we use as titles and subtitles) of the charts disappear, thereby making it difficult to identify which of the half dozen charts lack data.
example:
{
"chart": {
"caption": "My Caption",
"subcaption": "My Subcaption",
"plottooltext": "Document: $label<br />Total: $datavalue",
"theme": "fusion",
},
"data": []
}
Is there a setting we can use to still display the caption and subcatption when there is no data?
I'd suggest looking at replacing the caption and subcaption with your own HTML. The captions aren't required on the charts and can be completely removed. Just make an HTML header and embed your chart below it and make sure it has no captions.
Google mentions here that Carousel markups using ListItem with type, position and item is currently supported only for Recipe, Course and Article. So, doing this for other products is not much effective (looking at google search as the consumer).
Google in another page mentions this:
A category page listing several different products (or recipes, videos, or any other type). Each entity should be marked up using the relevant schema.org type, such as schema.org/Product for product category pages. However, if one item is marked, all items should be marked. Also, unless this is a carousel page, the marked items should not link out to separate details pages.
Note the statement about usage of proper Schema.org type, like Product and should not link to separate details pages.
So, for an online seller of shoes, then the category page will probably be like:
{
"#context": "http://schema.org",
"#type": "CollectionPage",
"#id": "https://www.example.com/cat1/cat2",
"url": "https://www.example.com/cat1/cat2",
"provider": {
"#type": "Organization",
"#id": "https://www.example.com#org"
},
"isPartOf": {
"#type": "WebSite",
"#id": "https://www.example.com#ws"
},
"name": "Running Shoes",
"hasPart": [
{
"#type": "Product",
"name": "shoe 1"
},{
"#type": "Product",
"name": "shoe 2"
},
...
]
}
I didn't use #id and url here, to conform with Google's statement about no link to separate details page. Don't feel comfortable about it.
Q1: Without these, how does this page semantically connect with the schemas of the respective products in other pages?
I didn't define the schema with ItemList as the items are not ordered and without position, SDTT raises error. (Infact, the above schema too raises error on SDTT with hasPart, stating: "Product is not a known valid target type for the hasPart property").
Q2: What is a better way to define this schema, to stay correct as per Schema.org and also not have Google raise errors?
Q3: If we use hasPart here for the products, can we on each of the product's ItemPage define isPartOf to include id-s to this CollectionPage (and other categories', if necessary) where the product is listed? Basically, that closes the loop, but as per schema, is that necessary or just one-way declaration (with 'hasPart' in category page) enough?
My webapge
I am building a webpage for a conference. The page contains multiple objects like speaker (Person), or session (Event).
My problem
I would like to add semantic data to the page, so that search engines and social networks can easily understand its content. I would like to both describe the page as a whole, and parts of it - like a single session
My question
How do I mark up both the entire page and inner objects in a standard way?
Can I use multiple JSON-LD in the same page, or should I use JSON-LD for the page as a whole and other markups for inner objects?
Clarification, following the comments
Thanks for pointing out the answer to JSON-LD Schema.org: Multiple video/image page. However, it I am not sure where should I put the different JSON-LD objects so that each of them refers to a specific part of the document. Should they be linked using div ids? Should the <script> be placed inside the relevant div?
You can include multiple structured-data elements on a page if you wish as per Google's guideline:
https://developers.google.com/search/docs/guides/sd-policies#multiple-elements-on-a-page
The best way to tell whether it can parse your expected JSON-LD objects and attributes is to use their Structured Data Testing Tool
https://search.google.com/structured-data/testing-tool
I am not sure where should I put the different JSON-LD objects so that each of them refers to a specific part of the document.
With JSON-LD, the structured data is not "coupled" to the HTML. (That would be possible with the syntaxes Microdata and RDFa, but even there, after extracting the structured data, it’s of no relevance anymore on which HTML elements it was specified.)
If you have a page about two persons, you would just provide one WebPage and two Person objects. To be able to make statements about these objects from other places, it’s a good practice to give them URIs, which can be specified with #id. For the WebPage, the URI would typically be the canonical URL of the page.
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"#id": "",
"about": [
{
"#type": "Person",
"#id": "#person-1"
},
{
"#type": "Person",
"#id": "#person-2"
}
]
}
</script>
Theoretically, there could be a property which allows you to reference the HTML elements which describe the entity. Schema.org currently has properties like that in Pending, which are used for SpeakableSpecification (Pending): cssSelector (Pending) (using CSS selectors to reference the elements), xpath (Pending) (using XPath to reference the elements). But these can’t be used for other cases (as currently defined). So you would have to define your own property for this purpose.
Should they be linked using div ids?
You could provide the id value in the object’s url property. It doesn’t "link" the HTML to the structured data, though. It just conveys: You can find information about the entity described by this node object by following this URL.
Often each entity has its own page, but it’s perfectly fine to describe multiple entities on the same page, of course.
Expanding the example from above:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebPage",
"#id": "",
"about": [
{
"#type": "Person",
"#id": "#person-1",
"url": "#about-person-1"
},
{
"#type": "Person",
"#id": "#person-2",
"url": "#about-person-2"
}
]
}
</script>
Should the <script> be placed inside the relevant div?
For the structured data, it makes no difference where in the HTML document the script elements are placed.
You could place all objects in one script element (like in the examples above), or you could use multiple script elements, but then you should reference their #id values so that you can still make use of properties like about (example in my answer linked above). It makes no difference semantically.
I'm trying to understand how to retrieve data from a Firebase database based on multiple tags. Let's consider the following data structure:
{
"posts":{
"post1":{
"title":"First post",
"description":"that's a nice post",
"tag": ["tag1","tag2","tag3"]
},
"post2":{
"title":"Second post",
"description":"the best post",
"tag": ["tag4","tag5","tag6"]
},
"post3":{
"title":"Third post",
"description":"cool post",
"tag": ["tag5","tag80","tag90"]
}
}
}
Each post has a title, description and an arbitrary size array of tags.
My goal is to show the user only the posts having specific tags. For example I may search for tag1 and tag4, then I want to show post1 and post2 to the user. Or search for tag1 and tag5, then all the three posts must be shown.
Tags in each post are not predefine keywords, they could be any possible word because could also be the case that a user set these tags. So could be that I search for tag100 but nothing is in the database.
I've seen couple of similar posts but I couldn't adapt any of them to this case. Can you give me some hints about the best strategy to handle this problem?
I'd recommend creating a separate structure for "tags", something like this:
{
"posts":{
"post1":{
"title":"First post",
"description":"that's a nice post",
"tag": ["tag1","tag2","tag100"]
},
"post2":{
"title":"Second post",
"description":"the best post",
"tag": ["tag2","tag3","tag100"]
}
// more posts...
},
"tags":{
"tag1": ["post1"],
"tag2": ["post1","post2"],
"tag3": ["post2"],
"tag100": ["post1","post2"]
}
}
This way, every time you add a post, you can take tags from that new post and check if they exist in the "tags" structure. If the tag DOES exist already, just push the post onto the end of the array. If the tag DOES NOT exist, create that tag property and add that post in an array as the value.
When you look for posts with any searched tag in the future, you just need to go into the "tags" structure, find any arrays with the searched tag names, use those post titles to get specific posts, and you're on your way.
Note: To add values to the Tag arrays (both in the "posts" and "tags" structures), you should probably use the .push() functionality described in the docs here.
Hopefully this helps!
fancytree folders are never collapsed. All children and parents are displayed without correct nesting structure.
When I copy the exact same data that works in text data source, instead from a web2py (python) controller the folders will not collapse but just display permanently expanded. No js console errors in browser.
original data that works perfectly in text file
FancyTree copies data from python contoller like this
json_list = [{
"alexLink": "http://example.com/",
"kind": "tasks#task",
"id": "MTYwNzEzNjc2OTEyMDI1MzcwNzM6ODUwNjk4NTgzOjExMTkyODk2MjA",
"etag": "\"4qyCALf1j510T_-I20NAMbUHF2k/LTEzNTgzMTMzODg\"",
"title": "Task 01",
"updated": "2015-04-23T19:25:44.000Z",
"selfLink": "",
"position": "00000000002147483647",
"status": "needsAction"
}]
I convert to json: json_list = json.dumps(json_list)
Then use as source:
// Initialize Fancytree
$("#alexTree").fancytree({
checkbox: true,
selectMode: 3,
source: {{=XML(json_list)}},
postProcess: function(event, data){
data.result = convertData(data.response);
},
select: function(event, data) {
window.open(data.node.data.alexLink, "_blank");
Data looks same as in text file source. What could be causing the folders to not contract with children under them?
I can't see an obvious reason, why your sample is not working (I assume persistence extension is off?).
Except maybe for {{=XML(json_list)}}, that may do something unexpected.
I guess a debuggable demo is needed, to find out.
Anyway, your sample does this:
Generate tree data in a native (none-Fancytree) format
Generate a html page with an embedded <script> tag that in turn has this data embedded as string
On page-load the tree is created with native data and post processing is done client-side
Fancytree was designed with this pattern in mind (among others):
Have a static page with an empty <div id="tree"> element and include some JavaScript
On page-load initialize the tree and pass an ajax url for source.
This will immediately display the page for your users, while loading is deferred (showing a spinning icon)
A soon as the data arrives, the tree will update.
(You could also consider to do the conversion server-side and send valid Fancytree-compatible data.)
This would probably deliver a smoother user experience. It would also allow to refresh tree data without reloading the page, by calling tree.reload().