I'm working on a Gatsby app with Netlify CMS (and hosted on Netlify). Trying to get the metadata working so that Twitter cards display correctly with images.
The metadata is generally all right, but the images aren't showing on the Twitter validator or if I try to post to Twitter. The problem is clearly the images themselves, which are hosted on the site using Gatsby and Gatsby Image Sharp to render.
In fact, the validator seems to show no fundamental issues. Simply, the image doesn't show up:
Example relevant metadata:
<meta name="twitter:url" content="https://example.com/" data-react-helmet="true">
<meta name="twitter:image" content="https://example.com/static/12345/c5b20/blah.jpg" data-react-helmet="true">
<meta data-react-helmet="true" name="twitter:title" content="Site title">
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image">
I know the images the issue, because if I replace my image URL (which is the full image URL) with an external URL, it works fine, showing the full card with image.
Any idea what could be causing this? I'm sizing the image down so it loads quickly, and it seems to load just fine directly (eg). (I mean, is there something weird/off about that image?)
NOTE: In a previous version of this question, I referenced Cloudinary and Uploadcare, but have since removed those two in a branch to simplify the problem. (They seem to have been unecessary holdovers from the starter app I used.) You can now see an example page for that branch here and the associated image in the twitter:image tag here. I feed this pre-processed/shrunk image into the header using React Helmet (and Gatsby React Helmet) and using the following code in my GraphQL call to get the image associated with the blogpost in that particular, smaller format:
featuredimage {
childImageSharp {
fixed(width: 480, quality: 75) {
src
}
}
Second Note/thought: Should I be worried about the fact that the pages in production seem to be re-rendering on every reload? Isn't SSR supposed to ensure that doesn't happen? I tested this by including a call to Math.random(), hidden, in the page. You can see the result by running document.getElementsByClassName('document')[0].children[0].innerText, and note that it produces a different number on each page reload. This implies to me that the whole page is being re-rendered by the client. Isn't that wrong? Why would that be happening? Might that relate to some sort of client processing of the images on each request, which might be screwing up the Twitter cards?
Third update: I put together a simpler reproduction here. It's based off of this starter template, with Uploadcare/Cloudinary removed and Twitter card metadata added to the header. Other than that, and removing unnecessary pages, I didn't make any other changes. I used this starter for a repro rather than a vanilla starter app, because I'm unsure whether the issue is caused by the interaction of Netlify CMS and the Gatsby Sharp Image plugin. I might try to put together a second reproduction. For now, the code for this repo is here, and the pages that should show Twitter cards are the blog posts, such as this one.
ACTUALLY, it seems that a super basic reproduction, with Gatsby 3 and no Netlify CMS or anything, has the same issue. Here's the minimal reproduction, with the image taken from src/images using an allImageSharp query and inserted into the metadata for each page. Code here.
FINAL UPDATE
Based on Derek's answer below, I removed the #reach/router stuff, and got the site URL from Netlify build env variables. It appeared that #reach/router only gave this information when JS was running, which excluded the Twitterbot, resulting in an undefined base URL, which broke the Twitter image. Including the URL from Netlify (using process.env.URL in the Gatsby config and pulling that in through a siteMetadata query) fixed the problem!
Update:
I think I might have found the issue. When opening the minimal production with script disabled, the url for twitter:image is invalid:
<meta data-react-helmet="true" name="twitter:image" content="undefined/static/03475800ca60d2a62669c6ad87f5fda0/58026/energy.jpg">
So for some reasons, during build, the hostname is missing, but when JS kicks in, it appears (Might have something to do with the way you get the hostname). Twitter crawlers probably does not have JS enabled & couldn't fetch the image.
Make sure your opengraph images are absolute urls with https:// or http:// protocols. I checked your example link & saw that it was a relative link (/static/etc.)
For Twitter, it seems to demand social cards to be 2:1
Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels.
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
If you're using the latest Gatsby image plugin, you can use aspectRatio to crop the image.
Also note that you can skip the twitter:image tag, if your og:image has already satisfied Twitter's card requirement.
SSR does not mean to never run JS in the client, React will render your page on the client side regardless of SSR.
This was solved here: https://github.com/gatsbyjs/gatsby/discussions/32100.
"location and thus origin is not available during gatsby build and thus the generated HTML has undefined there."
I got it working by changing the way I create the image URL inside seo.js from this:
let origin = "";
if (typeof window !== "undefined") {
origin = window.location.origin;
}
const image = origin + imageSrc;
to this:
const imageSrc = thumbnail && thumbnail.childImageSharp.fixed.src;
const image = site.siteMetadata?.siteUrl + imageSrc;
You need to use siteUrl from siteMetadata.
Below is my pageQuery from inside blog-post.js:
export const pageQuery = graphql`
query BlogPostBySlug(
$id: String!
$previousPostId: String
$nextPostId: String
) {
site {
siteMetadata {
title
siteUrl
}
}
markdownRemark(id: { eq: $id }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
thumbnail {
childImageSharp {
fixed(width: 1200) {
...GatsbyImageSharpFixed
}
}
}
}
}
}
`
How to change url path of socket.io.js
my socket.io.js is located at
https://192.168.236.100/socket.io/socket.io.js
what if i want to change it like:
https://192.168.236.100/socket.conference/socket.io.js
thank you
It is not as simple as changing the this._path value or passing in the path option to the constructor because if you change that, it also affects how a socket.io client must connect to the server too, not only how the socket.io.js file is served.
The simplest way I could find to make the socket.io.js file appear to be coming from a different path and not change anything else is to just create a new route for it like this:
app.get("/socket.conference/socket.io.js", function(req, res) {
res.sendFile(path.join(__dirname, "node_modules/socket.io-client/socket.io.js"));
});
This assumes that socket.io is installed locally in the directory that your app file is running from. If it is installed somewhere differently, then you need to find where the /socket.io-client/socket.io.js path/file is and use the right path to that.
This works with this client <script> tag:
<script src="/socket.conference/socket.io.js"></script>
In visual studio virtual server this works. But when I put site on IIS it doesn't display images from content folder.
var imgPath = '/Content/Images/Icons/' + icon + '.png';
var imageContent = '#Server.MapPath(Url.Content("-1"))';
image = imageContent.replace('-1', imgPath);
I get errors in browser foreach image
http://localhost/Content/Images/Icons/carwash.png Failed to load resource: the server responded with a status of 404 (Not Found)
First thing is first, are you sure that all of your 'icons' are part of the solution and are actually being deployed to your web server? I have had a few instances where I would add a file to the solution directory and VS does not automatically include in it the solution, thus it never actually gets deployed...
If that is ok and the images are actually there, my next question would be, have you tried just using the #Url.Content helper in your view to determine if that is working as it should?
<img src="#Url.Content("~/Content/Images/Icons/SomeIcon.png")"/>
EDIT
Since you are trying to accomplish this in Javascript and the above tag works in HTML, you should be able to condense that code up there to the following code:
var image = '#Url.Content("~/Content/Images/Icons/")' + icon + '.png';
Go ahead and let MVC get the path to the Icon folder and append your file and extension to that. This should eliminate the need for string replacement and still be able to process the icon paths in JS.
var image will now be the complete relative path to the icon file you have passed to this function. You can use this string to update and img src tag or create an image or whatever.
I have multimodule project
Project
|--src
|-JavaFile.java
Web-Project
|-Web-Content
|-images
| |-logo.PNG
|-pages
|-WEB-INF
regular java module - contains src with all java files
dynamic web project module - contains all web related stuff
eventually regular java module goes as a jar file in dynamic web module in lib folder
Problem
java file after compilation looks for an image file in c:\ibm\sdp\server completepath\logo.png rather in context. File is defined in java file as below for iText:
Image logo = Image.getInstance("/images/logo.PNG");
Please suggest how can I change my java file to refer to image. I am not allowed to change my project structure.
You need to use ServletContext#getResource() or, better, getResourceAsStream() for that. It returns an URL respectively an InputStream of the resource in the web content.
InputStream input = getServletContext().getResourceAsStream("/images/logo.PNG");
// ...
This way you're not dependent on where (and how!) the webapp is been deployed. Relying on absolute disk file system paths would only end up in portability headache.
See also:
getResourceAsStream() vs FileInputStream
Update: as per the comments, you seem to be using iText (you should have clarified that a bit more in the question, I edited it). You can then use the Image#getInstance() method which takes an URL:
URL url = getServletContext().getResource("/images/logo.PNG");
Image image = Image.getInstance(url);
// ...
Update 2: as per the comments, you turn out to be sitting in the JSF context (you should have clarified that as well in the question). You should use ExternalContext#getResource() instead to get the URL:
URL url = FacesContext.getCurrentInstance().getExternalContext().getResource("/images/logo.PNG");
Image image = Image.getInstance(url);
// ...
I am not able to display images from the file system in the xhtmls using <h:graphicImage> tag. I am using Spring webflow 2.0 and Richfaces 3.3.3
Should I write a separate servlet to serve the images from the file system ?
I looked into <a4j:mediaOutput> tag . Can I use this ? since createContent requires us to specify a method that will be used for content creating. I am unsure if we can use the flow variables/beans to execute methods in the tag.
You can always fetch the images placing under Web Pages folder
<h:graphicImage url="#{facesContext.externalContext.requestContextPath}\your_img_path_under_Web_pages" id="img" />
If you use <a4j:mediaOutput> tag, then yes you should give method in createContent which will draw the image.
<a4j:mediaOutput element="img" createContent="#{serviceBean.method}" value="#{dataBean}" mimeType="image/jpg" />
public void userImage(OutputStream out, Object data) throws IOException {/*your method body*/}