I'm using Gatsby and graphql with headless WordPress for a website.
I want to use a gatsby-image plugin to get srcSet and blurring effect for images that are coming from WordPress, but it throws an error in graphiQL playground. I want to explain below the whole process step by step for the best understanding.
The gatsby-image plugin has two types of responsive image fixed and fluid:
To decide between the two, ask yourself: “do I know the exact size this image will be?” If yes, it’s the first type. If no and its width and/or height need to vary depending on the size of the screen, then it’s the second type.
so, I need the second one - fluid.
It also has two image components Static and Dynamic.
If you are using an image that will be the same each time the component is used, such as a logo or front page hero image, you can use the StaticImage component.
If you need to have dynamic images (such as if they are coming from a CMS), you can load them via GraphQL and display them using the GatsbyImage component.
I'm using WordPress (which is CMS). So, I need the second one - Dynamic
Before writing a query, I must see how to make the right query for the files coming from the WordPress scheme.
For this reason, I found that Gatsby has a gatsby-source-wordpress plugin to pull images from WordPress.
I've installed and configured all the required packages such as gatsby-plugin-image,gatsby-plugin-sharp, gatsby-transformer-sharp, etc. I did Everything as exactly as the official docs say.
At that time everything was prepared to make a query, so I try the first example that they have in docs - pulling images from wordpress and IT WORKED.
So it's time to FINALLY GET WHAT I WANTED and try the second example (fluid), but IT FAILED with an error message Cannot return null for non-nullable field ImageSharpFluid.srcSet.
It also FAILS when I try to get gatsbyImageData
How could I fix this problem?
Thanks in advance.
The documentation you mention for gatsby-source-wordpress is outdated. Checkout this one: https://www.gatsbyjs.com/plugins/gatsby-source-wordpress/
Your query looks like the old one. I'm not sure what plugin versions you are running, but if you are running the latest ones your query should look something like this:
query MyQuery {
allWpPost {
nodes {
featuredImage {
node {
localFile {
childrenImageSharp {
gatsbyImageData(width: 200, placeholder: BLURRED, formats: [AVIF, WEBP, JPG])
}
}
}
}
}
}
}
Also the gatsby-image plugin is deprecated in favor of gatsby-plugin-image.
If you want an example of how the setup is put together you can search the starters for CMS:WordPress and v3 to find one to start with. Gatsby Starters
Hope this gets you started :)
If You have used caching in your plugin options like the code below, Try deleting the .cache folder in your workspace and restart the server.
{
resolve: `gatsby-source-wordpress`,
options: {
production: {
hardCacheMediaFiles: true,
},
},
},
Probably It would take time fetching the images and then your page should load without any errors.
Related
I am still new to Gatsby and Graphql and am trying to go through tutorials of using gatsby-transformer-sharp, gatsby-plugin-sharp, and gatsby-plugin-image to retrieve images from Contentful using graphql and map over those images. In all of the tutorials I have read and watched, they have the option of "child image sharp" in their playground and I do not have that.
This is what graphql looks like
This is what my plugins look like
Would someone be able to help or walk me through how my query should look and how to map over that data in the query to retrieve those images?
Thank you so much!
It depends on when are those tutorials done or recorded. Gatsby image has suffered a lot of breaking changes since its creation (see migration Gatsby 2 to 3) changing from gatsby-image to gatsby-plugin-image.
As you can see in gatsby-source-contentful docs you don't always need childImageSharp. It depends on the node you are quyering:
{
allContentfulCaseStudy {
edges {
node {
id
slug
title
subtitle
body {
body
}
heroImage {
title
description
gatsbyImageData(layout: CONSTRAINED)
# Further below in this doc you can learn how to use these response images
}
}
}
}
}
Source: gatsby-source-contentful docs
As long as your GraphQL contains gatsbyImage and gatsbyImageData means that the transformers (gatsby-transformer-sharp) and sharps (gatsby-plugin-sharp) are doing their job.
Your query will rely on your data structure, check the tutorials to understand better, keeping in mind that your data will be under props.data.allContentfulCarousel of the page, but it looks that Images is an array of images, hence you will need to make another loop through it in order to render the GatsbyImage component passing each image.
I tried all day long to find a way to get all assets which filename contains a given string via API. Unfortunately without any luck.
I use Pimcore 6.9.6 and the Data-Hub in Version 1.0.8.
It seems like the samples in the data hub docs are not really working. I can't use getAssets and getAssetListing seems to be pretty pointless, since it only returns an empty result.
I hope someone here can point me into the right direction. Thanks in advance for any help.
{
getAssetListing(filter: "{\"filename\": {\"$like\" :\"%1%\"}}") {
edges {
node {
__typename
... on asset {
fullpath
}
}
}
}
}
This GraphQL query should do the trick, but unfortunately I can't get it working. What am I missing?
In my case I missed to fill in the root path for assets in the security tab of the Pimcore Data Hub configuration.
I have a results page and I am trying to work out how to auto update the page when an external database field is updated. I have seen quite a few examples but they seem to relate to PHP. I have a test that calls various APIs that can take up to an hour to complete. Once the test has completed, it will enter a success or failed message in a database field.
I already have my results page being rendered by django using template tags. I have a table and I have the field I would like to update. There are multiple fields that need update which correspond to each API test.
I have seen this site.. is this the kind of stuff to use? http://www.dajaxproject.com/ Is this an easy task to do? Does anyone have any ideas on how to do this?
Sorry but I don't know where to start on this one.
Cheers - Oli
I decided not to be so bold and just use the old classic page update for this purpose using javascript..
window.onload = setupRefresh;
function setupRefresh() {
setTimeout("refreshPage();", 30000); // milliseconds
}
function refreshPage() {
window.location = location.href;
}
Still open for options however I'm rather inexperienced in django and maybe this was too much to bite off too quickly..
I want to load single posts into an index page using Ajax for a WPML based site that I'm working on. Not sure what I'm missing but there seems to be a catch when using multiple languages and fetching the correct posts.
Here's the code I wrote -
function loadProject(reference) {
console.log(window.location.origin + '/references/' + reference);
// Displays "http://mysite.com/references/example-post/", which exists
$('#content').load(window.location.origin + '/references/' + reference, function() {
console.log('Load was performed.');
});
}
I don't reach the JS log after load() but I don't receive any error message either (e.g. "File not found").
"References" is a custom post type that I've created using the Types plugin, and has a file of it's own called single-references.php. I'm not entirely sure how CPTs work with WPML, and that's probably where the problem lies. I have two languages, Swedish and English, and the CPT only has one slug for its kind ("references").
[Solved]
Used the .get() method instead to retrieve the post and now it works.
Well, no console error, no network query :
it is not a WPML issue
did you check #content really exists ?
In chrome dev tool, go to Network, and trigger your function. You'll see what you receive.
I'm working on an AIR application which generates a dynamic client presentation, pulling all necessary data from a PHP framework API. In the process, I download a large number of images and store them locally in the user's app-storage (air.File.applicationStorageDirectory).
Side note: the HTML view I am dynamically populating is located in an IFRAME sandbox.
I have a parsing script which attempts to take JSON data and populate the page with the necessary fields. Many of these fields are images that I need to locally reference. I thought I might be able to simply generate the URL using <img src="app-storage:/path/to/img.jpg"> but it doesn't seem to actually load the image. My guess is AIR doesn't handle app-storage: url references dynamically. Is there a work-around for this? Could I perhaps use jQuery and load()?
Here is the current code I am using which is not working:
var pos = filename.lastIndexOf(".");
if (pos != -1) {
ext = filename.substr(pos + 1, filename.length);
switch (ext) {
case 'gif':
case 'jpg':
case 'jpeg':
case 'png':
default:
// update the source value
$field.attr('src', 'app-storage:' + filename);
break;
}
}
I thought I might be on the right track because the return result of
air.File.applicationStorageDirectory('test')
was app-storage:/test
Any help would be greatly appreciated!
The solution ended up being that I had to properly set the IFRAME to have Application security level access, granting it privileges to use handle app-storage urls properly. For those interested in knowing how you can go about doing this, the first step is to simply have the IFRAME file you wish to load directly in the application's main directory:
<iframe id="childFrame" src="child.html" documentRoot="app:/" allowcrossDomainxhr="true" width="100%" height="100%"></iframe>
The key difference in this sandbox is that it doesn't have the parameter sandboxRoot.
It's worth noting that I never once experienced any security errors during any of my testing. It seemed as though the app-storage URL was just not properly being handled by AIR itself.
people talking than you need to allow security policy there.