I'm attempting to add an image to a page type using a singleton set to the slideshow widgetType
The interface is working fine (can upload image, limits uploads to the set variable), but I cannot access the object in the templates
I am logging the page object with the below script in the page template, every other custom field works fine, just not the slideshow widget.
var data = {{ page | json }};
console.log(data);
Here is what is set in app.js
project: {
extend: 'apostrophe-fancy-page',
name: 'project',
label: 'Project',
addFields: [
{
name: 'thumb',
label: 'Thumbnail',
type: 'singleton',
widgetType: 'slideshow',
options: {
limit: 1
}
}
]
}
Any advice?
Hmm. You don't specify, but my suspicion is that you're trying to access the thumbnail from the template for a different page that has access to it as related-page information, e.g. page.ancestors or page.children. If the singleton were being rendered on the template for the page itself, you would have no trouble with this.
The thing about related-page information is that for performance reasons, Apostrophe limits how much information it includes in those arrays.
However, you can specify that you want more information. Here is an example from the pages property of the app.js file of one of our projects:
pages: {
// other config like page types goes here, then...
ancestorOptions: {
children: true,
areas: [ 'thumbnail' ]
},
descendantOptions: {
depth: 2,
areas: [ 'thumbnail' ]
}
}
Here we are enabling:
Include a .children array for each ancestor in page.ancestors, for accordion nav
Include the area called thumbnail for each ancestor
Include the area called thumbnail for each child of the current page (page.children)
Also include grandchildren page.children[0].children for dropdown nav
When you load more data, the price you pay is a little more time. This is a good compromise setup when you need a lot but you don't want to fetch thousands of pages and "hydrate" all of their widgets by fetching even more data.
If I'm mistaken and you are doing this on the page template for the page itself and it still doesn't work, please provide some examples and I can review those.
(I am one of the lead developers on Apostrophe. Apologies for not seeing this question sooner. StackOverflow is a good place for it and we'll be monitoring more closely in the future now that 2.0 stable has been released.)
Related
In GraphiQL I am trying to query the heroImage field from a Contentful blog post, which exists by default within my Blog Post content type:
Raw query code:
{
allContentfulBlogPost {
edges {
node {
id
title
slug
body {
childMarkdownRemark {
excerpt
}
}
heroImage {
gatsbyImageData(
layout: CONSTRAINED
placeholder:BLURRED
width: 300
)
}
}
}
}
}
But I am getting the error: "Cannot query field "heroImage" on type "ContentfulBlogPost".",
In fact, the heroImage field isn't even showing up on my GraphiQL explorer (see pic below), and I cannot figure out why. The field does indeed exist, and I have even made sure that each blog post has a hero image associated with it.
Any help would be greatly appreciated as I am quite stumped with this one.
Ensure the data is published, all the way to the top level. If it is an image on a blog, ensure both the image and the parent blog entry is published.
Ensure that at least one "heroImage" field has a file stored against it
You can't query the image directly in the graphQL explorer. Your best bet is to go for the "url" property, once it shows up.
Restart / re-query the contentful end point by re-running gatsby develop.
If something gets stuck, run gatsby clean, then gatsby develop.
I was having the same exact problem. I ran the command
'npm install gatsby-transformer-remark' and re-ran gatsby develop. Now heroImage is showing up
This is a bit of a strange one and I think it's a basic syntax error, but I cannot seem to pin it down.
I have successfully got my controller in Sails (NodeJS) sending some JSON through to the view (an EJS file). It's an object called "Profile" (pulled from a DB, which I have connected & working).
The JSON my page is receiving looks like this:
[{
"personal_photo_url": "bing.jpg",
"show_profile": false,
"id": 1
}]
The relevant code snippet on my .ejs file (view) looks like this:
<h3>Personal photo: {{profile.personal_photo_url}}</h3>
<h3>Show profile to others?: {{ profile.show_profile }}</h3>
<h3>User ID:{{ profile }}</h3>
When the page loads, I'm not seeing any text against "welcome sound" or the "show profile to others?" line, however when I just show "profile" without referencing the fields in the "User ID" line, I receive the following HTML displayed on the page:
Personal photo:
Show profile to others?:
User ID: [ { "personal_photo_url": "bing.jpg", "show_profile": false, "id": 1 } ]
It's worth pointing out that when I do some querying all the fields are listed as "undefined", even though they are showing per above.
So my question is pretty simple - how do I get the values from these fields showing without all the JSON formatting?
Ok, after a bit more trial and error I realised what had happened is that I was sending in an array to the page.
When I adjusted my search result from the database to use the .findOne() method instead of .find() the data was presented as I needed it (ie just one record), and my code above worked perfectly.
I'm building a static site with Jekyll (no blog), just with pages.
I want to find a way to generate (automatically or with a menu.yml file) a menu (like this website, on the footer).
I define title and chapter properties in the pages' YAML:
---
layout: page
title: Title of the page
chapter: Title of the chapter
permalink: /title-of-the-chapter/title-of-the-chapter/
order: 3250
published: true
---
I want to get a menu like that:
<ul>
<li>Title of the chapter</li>
<ul>
<li>Title of the page</li>
</ul>
</ul>
By the way my files are organised in folders like that :
01-chapter-one
01-subchapter-one
index.md
02-subchapter-two
index.md
02-chapter-one
01-subchapter-one
index.md
Is there a solution (perhaps with no plugin) to do this automatically (I have a lot of pages) ?
Full automation is possible only with a plugin, i.e. vanilla Jekyll is not able to automatically loop your folder and generate a hierarchical list of your files.
So if you want a solution without plugins, you need to maintain data file with your menu hierarchy: each time you add a page, you need to modify the data file as well.
There are different approaches how to generate the menu out of the data file, depending on the complexity you want:
Simple: Accessing _data in Jekyll (loop in loop)
Complex (with "dynamic" menu): Excluding page from Jekyll navigation bar
That should be enough to get you started. If you run into problems, please ask a more specific question.
Grouping data is the trick here, to do this you will need a secondary processor. The most convenient place to put this post processing is in javascript, but that means you need to leave yourself some data.
The following code embeds an array of all the pages in your as an array. That can then be post processed by in page javascript.
<script>
let menu = [
{% for p in site.pages %}
{
'chapter':'{{ p.chapter }}',
'title':'{{ p.title }}',
'url':'{{ p.url }}',
}
{% endfor %}
].filter(function(d){
return d.title != '';
})
.reduce(function(a,d){
a[d.chapter] = a[d.chapter] || [];
a[d.chapter].push(d);
},{});
menu = Object
.keys(menu)
.map(function(key){
let html = menu[key].map(function(d){
return "<li>"+d.title+"</li>";
})
.join('');
html = '<li>' + key + '<ol>'+html+'</ol></li>';
return html.join('');
})
;
menu.push('</ol>');
menu.unshift('<ol>');
document.write(menu.join(''));
</script>
I'm fairly certain that sorting is not enforced correctly, but that seems roughly correct.
A nice thing about this solution would be that you could actually embed the "chapters" as folders. You could generate nesting based on common folder structure, and use 'index' pages as markers for the 'chapter' titles.
I am in the process of learning Node.js/Express.js, and as an experiment I am attempting to build a small blog application.
I render the page, passing the articles:
response.render('index.jade', {
title: 'Blog'
, locals: {
articles: articles
}
});
Here's my Jade template for that:
h1= title
section
h1 Articles
ul
each article in articles
li
a(href='/article/' + article.slug)= article.title
span at #{article.created_at}
This displays a list of articles with the title and date. However, I need a way of formatting the date into a more readable format. I have discovered libraries that allow you to do this, but my real question is how I should go about integrating this into my template? I can either pass the moment module to the template and format the date inline there, or I can format it in the route and add it onto the article object. How would you do this?
I have the following helpers in my application:
date: function (date) {
return moment(date).format('YYYY/MM/DD HH:mm:ss');
},
fromNow: function(date) {
return moment(date).fromNow();
}
This could depend on your application but I didn't see the need of using different date formats all over my site.
I would go with adding to the template if you want less and clean code. If you want performance, format it in the route itself.
I'm working on project with heavy usage of ExtJS lib and so far as i'm not really good in pure CSS crossbrowser layout developing, i decide to use ExtJS layouts for robust markup prototyping. There is only one problem -- i can't figure out how to make my pages scrollable, like in traditional sites. ExtJS just clips any content overflowing browser viewport, "autoScroll: true" makes no effect.
Based on the first ExtJS4 release and is no longer valid for newer versions
It depends on your layout... A viewport should only contain one element and will also ignore scrollable settings. That's because the viewport use the fit layout by default. Give the scrollable setting to one item of the viewport that will contain all your content and remember, this one cannot be of the layout type fit.
{
xtype: 'viewport',
items: [{
autoScoll: true // will be of xtype panel by default
items: // you content
}]
}