I have been recently exploring Contentful CMS and I have been trying to display Cloudinary images/videos that I already placed in Contentful Content Model (JSON field with Cloudinary app applied) into Next.js 13 (I'm using their starter guide: https://www.contentful.com/nextjs-starter-guide/), but I'm pretty new to this so I get stuck lots of times. I have tried to watch their video on how to integrate Cloudinary from Contentful and Next.js but I get confused on how and where they got their GraphQL queries.
My code is basically the same with their example here: https://github.com/vercel/next.js/tree/canary/examples/cms-contentful. Its just a matter on how to connect a content JSON to display the Cloudinary app I installed in Contentful. I don't see lots of examples to display Cloudinary assets to Next.js, unless you can tell me otherwise...
If you have any resources or advice you can point me too, I would be happy to hear them out.
To fetch the data from the Cloudinary app, you will have to modify the GraphQL query. In my example, I added the Cloudinary app and connected it with the Cloudinary App JSON field as shown in the screenshot below.
Now, to fetch the data from that field, I just had to add cloudinaryApp in my GraphQL query. So now my query looks like:
const POST_GRAPHQL_FIELDS = `
slug
title
cloudinaryApp
date
author {
name
picture {
url
}
}
excerpt
content {
json
links {
assets {
block {
sys {
id
}
url
description
}
}
}
}
`
I hope this helps :)
Related
I'm working on an app using Express.js and Handlebars. I want to have a page where you can enter text into a search bar, and the view will update to display the results of your search. The backend part of this is already working - the data is being retrieved just fine - but I'm not sure how to best go about updating the view.
I'm using express-handlebars for this app, so the views are formatted as .handlebars files, and being sent to the client via the res.render method. I have seen examples of, for instance, using a button to fill out a Handlebars template, but these examples use a static HTML file with a template in a script tag; I don't know how to translate that to what I'm working with.
I have made an app in Nativescript Angular, this app has a section to take/upload pictures(into Fire-base) of garments
I am trying to add reviews on those pictures pulling them from the firebase. Like commenting on them
I wanted to use the nativescript-comments code but that is in Nativescript Core XML code, and it won't fit on the nativescript angular HTML files.
I'd like to know if there's anything else i can use.
Send comments to firebase with pictureid and commentid or what would you like.. you only need to set a relationship between pictures and comments
Following the example here https://github.com/firebase/functions-samples/blob/master/generate-thumbnail/functions/index.js
How do I notify the client when the image is processed?
I want to have a form upload a photo and resize it to multiple sizes. How do I let the client know when the the cloud function is finished?
I'm using firebase/storage to upload the image client side, then I have a could function listening for files to be uploaded functions.storage.object().onFinalize and processing/resize the images. Is there a callback to the client when the cloud function is finished or to I need to setup pub/sub?
Your ultimate new images (the small ones - or whatever they are), would have some URL, let's say storageCompany.net/123123123123.jpg
So in your realtime Firebase, you will have some location that gives these URLs.
So maybe something like ..
user/NNNN/photos/thumbnails
so to be clear, you might have
user/NNNN/photos/thumbnails/726376733677.jpg
user/NNNN/photos/thumbnails/808080188180.jpg
user/NNNN/photos/thumbnails/363636636636.jpg
and now you're adding
user/NNNN/photos/thumbnails/123123123123.jpg
So indeed, your apps would simply watch for new items (ie, strings - the URLs) appearing in that location!
Just to be clear, let's say you have an ios or droid app that shows "any sort of images", and this is a Firebase project.
So, in your example is "thumbnail images" which are "created by a server".
But it just doesn't matter what sort of images you are showing.
In a
Firebase project, which
"Shows images"
The basic idea is simply what I explain above - you just have, one way or another, a Firebase location which has "the URLs of the images"
It's that simple!
Once the image is "ready" - no matter how that happens - upload, image being generated by 3D software .. whatever ..
That's how you make a Firebase project "with images". iOS, droid or www.
Of course there are many variations. In this example ..
we have a big folder with many "images". each "image" has many fields, including various actual image URLs (thumbnails, big thumbnails, videos, etc etc)
Precisely as you ask, the "thumbnail" (say) URL only appears when that image has been created and upload to some storage URL!
Enjoy
You will have to arrange for an exchange point between the client and your function. Typically, that will be some known location in the database where the function will write the result, and the client can listen for changes to know when the work is complete.
The example you're using will need to be modified to allow the client and server to agree on a unique location ahead of time.
There are two problems with Firebase image resizing - (1) it's tricky to notify the client once the image resizing is complete, and (2) you never know which exact size the client-side app may need (assuming you're building a responsive app).
These two issues can be solved by using a dynamic image resizing approach. The client app can upload images directly to Google Storage (via signed URLs and PUT requests), once the upload is complete it can request the resized image(s) right away. For example:
https://i.kriasoft.com/sample.jpg - original image
https://i.kriasoft.com/w_200,h_100/sample.jpg - dynamically resized image
The resized images can be cached in both the Google Storage bucket and at CDN.
$ npm install image-resizing --save
const { createHandler } = require("image-resizing");
module.exports.img = createHandler({
// Where the source images are located.
// E.g. gs://s.example.com/image.jpg
sourceBucket: "s.example.com",
// Where the transformed images need to be stored.
// E.g. gs://c.example.com/w_80,h_60/image.jpg
cacheBucket: "c.example.com",
});
https://github.com/kriasoft/image-resizing
I have an issue that seems like a very common requirement, but I'm unable to find any help. Let's say I have an authenticated user uploading private photos to non browsable folder on my server. Each user has their own folder in a large file store, like...
/FileStore/{UserId}/Photos/my_cute_cat.jpg
The file is uploaded and I save a thumbnail of the photo like...
/FileStore/{UserId}/Photos/Thumbs/my_cute_cat_thumb.jpg
That user wants to download their photo. No problem...
User sends a request to download
I authorize the user and make sure they own that particular photo
I serve the file
I need display the thumbnail in a plain old img tag on the user's dashboard. The /Thumbs/ folder is not set up to serve static images. I don't want the /thumbs/ folder to be able to serve static images because they should only be visible to authorized users. What am I supposed to do?
If its just a small thumb nail, consider using embedded base64 image with more details here:
How to display Base64 images in HTML?
You can pass base64 down to the View by encoding the file into a base 64 format as a string explained here:
http://www.devcurry.com/2009/01/convert-string-to-base64-and-base64-to.html
Using this approach or even using a FileActionResult to serve the file through a controller has the big disadvantage of not being able to use a CDN to deliver the cached content. What you can do to help with this is still serve the images statically but give them obscenely long random names which is unguessable. When someone requests the image from you, then you simply provide them with the unguessable url.
First and foremost, if a static file should not be available to the whole world, then your web server should not serve the directory it is in at all. Nothing else will do on that front. If the directory is served, then the image can leak.
That then presents the problem of how to allow the user to access it. The simple answer there is that you need an authorized action that returns the image(s). Basically, that's going to look something like:
[Authorize]
public async IActionResult Image(string image)
{
var file = $"/FileStore/{User.Identity.GetUserId()}/Photos/{image}";
if (!File.Exists(file))
return NotFound();
return File(file);
}
Now, obviously, I don't know about your "FileStore", so the exact code here may need to change. The general idea is that you simply see if this file exists under the user's directory. If it does, they can have it. If not, they don't own it. You also should probably add in a bit more security, such as restricting the image param to only image types, so someone can't try to pull just any arbitrary file. They'd still have to somehow manage to get some aberrant file there, in the first place, but just in case it's better to not take chances.
The return methodology may need to change as well. Right now, I'm assuming a file on the filesystem of the server, so I just return a FileResult with the path. If you're pulling it from some sort of storage account in Azure, AWS, etc. then you'd use HttpClient to make the request, and then you should stream the response from that directly to a FileStreamResult.
I've not tested on linux, but if you make a folder where you have you pictures, you can actually just create a controller method that returns a file. Now, even if you are using a view served from another method, you can still call this file method from this razor view and display the image.
in controller called App I serve the image from a folder called Documents:
public IActionResult File(string id)
{
if (String.IsNullOrEmpty(id))
{
return PhysicalFile(Path.Combine(_env.ContentRootPath, "Documents", "Wrong.png"), "image/jpg");
}
return PhysicalFile(Path.Combine(_env.ContentRootPath, "Documents", id), "image/jpg");
}
in razor (using a bit bootstrap):
<img src="~/App/File/#profilePicture" class="img-fluid" />
use the location of your method that serves the file.
I built a watson conversation service and I connected it to Slack using the provided wizard in Bluemix.
This is not connected to an application yet (such as Java, etc), it was built using the bluemix dialog tool.
My question is: How can I show images or pdf files as a response?
Within the dialog tool itself you will not be able to view any other type of media other than text. The output in the test panel will simply show the output from the node.
When deployed to an application such as a web application the output node would look something like this containing HTML markup:
{
"output": {
"text": {
"values": [
"Hello world Click here"
],
"selection_policy": "sequential"
}
}
}
In this case to display an image you would simply replace the link tag with that of an HTML image etc.
An example starter kit can be found here https://github.com/watson-developer-cloud/conversation-simple
You will need an orchestration layer to handle the encoding to the desired platform format e.g FB messenger requires an object to be passed such as
"buttons":[
{
"type":"web_url",
"url":"https://petersfancyapparel.com/criteria_selector",
"title":"Select Criteria",
"webview_height_ratio": "full",
"messenger_extensions": true,
"fallback_url": "https://petersfancyapparel.com/fallback"
}
]
An example orchestration layer such as Botmaster can be used alongside its extension fulfill that will allow you to creatr these objects and in the Watson dialog simply just add custom XML tags. E.g www.google.com this will then be passed to the orchestration layer which will send the relevant object. A code example using this method can be found here with some other Facebook actions.
Conversation is text only. So you would return the markup, or a context variable. The UI / application layer would then handle the loading and rendering of the PDF.
You could provide the response as a URL link to the pdf or image.
For example you could save your image in a storage place such as google drive and for the response you could provide the link to the image/pdf.