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
Related
I'm using a stencil theme in Big Commerce and am having an issue with the pagination buttons. When I click on the page number or next button, the site prefix is not adding an additional / to the end of the url.
The url should read as follows:
https://example.com/learn-more/?page=2
but clicking the buttons only links back to the main blog page:
https://example.com/learn-more/
I went through the "Store Front > Blog > {...} (settings) > About This Blog" and made sure the blog url was set to the correct format ( i.e.- /blog/ }, but that is not having the correct effect.
I'm gettting familiar with the stencil themes, but I'm lost on how to correct urls in this format, as the normal react fixes are not there...
Please Help
Yeah, same issue here. After playing with the blog settings like you did, I ended up applying a workaround by correcting the URLs via script just to fix it quickly.
const isBlogPostsPage = $('.blogPosts').length > 0;
if (isBlogPostsPage) {
$('.pagination-link').each(function() {
let link = $(this).attr('href');
link = link.replace('/articles?', '/articles/?');
$(this).attr('href', link);
});
}
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've copied the hello world example into a VueJS app, things work as expected.
I then changed added:
router: { name: 'manhattan' },
to the link constructor. when I move the nodes around I get the link rendering as in the attached screen shot.
Has anyone else ever encountered this and have a fix?
mc.
most likely you've forgotten to include the join.css stylesheet
I am doing a small project which takes user information like name, age, location etc and display it on the Google map on click of that location.
I have completed the first part i.e., taking user information using node js, express and Mongo db.
I am not understanding how to go to next part and display that information on Google maps on click of that location.
Any tutorial or pointers would be helpful on how to go forward. Thanks.
If you are asking how to display markers on webpage you might want to check google documentation:
To create a marker on map documentation is here, also if you
want to add a custom marker image sample is here.
To display the information on the google maps on marker sample
here.
I'm assuming you are storing the marker information in your DB, so you can retrieve it from there, just create a schema for marker and markerinfo.
Way to add a marker to map with onClick event:
map.addListener('click', function(e) {
placeMarker(e.latLng, map);
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position, // {lat: -100.000, lng: 100.000};
map: map
});
map.panTo(position);
}
Getting marker from express api with jQuery:
$.getJSON("/api/marker/1", function(json) {
placeMarker(json,map);
});
Ping me if you have questions;
Good luck;
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.)