I am creating reactjs app, from which i can generate image for different social media platforms sizes, for example facebook cover image size, user will hit click on download button and it will download an image of the desired size.
I searched lot but did nothing
Is there any way i can do this?
Related
When I read the docs of strapi v3, I found that there is an option that produces responsive images, means that when we add an image, it produces other sizes in the public/uploads address of strapi directory. That feature works in my project and when I upload for example an image called figure-1-1.png, it produces some other images with different sizes in my upload folder.
But how can I use those other images in my contents? For example suppose that I have a content that uses "rich-text". In that content when I use image icon in the editor, it inserted a link of the main image to my content like below:
So how could I benefit from other sizes? How could I use them in strapi that for example in mobile resolution the smallest size is used? Is there anything that I misunderstood?
I have an e-commerce react app, so as you know every product has at least three or four images, so to show the image of product in my website i created a folder with a name of " images " inside the public folder so everytime i want to show images of a specific product i can get and show them very simply and for Now this is very very awesome.
The Problem:
as we know each e-commerce website should have an admin where he can publish new products and upload new images, so by the time may be i will have thousands of images in my website.
Question
what is the best practice to store images of my react app ?
do i need to use third party like AWS or Firebase ?
Thank you.
Storing images in the code-base assets folder is not the best option for large number of images. Handling updates, inserts is a big problem. So you have the following options.
Options: Cloud/On Premises
You may store in the cloud like AWS S3
If you want to store on premises, you may store in MongoDB Grids
or even on the File System with file-path stored in the database.
Step Ahead
But going ahead you might need responsive images according to the image placeholder. Example for an image you might need thumbnails of different sizes lets say for listing pages, android apps, iOS apps.You might also need to compress the images in case they are heavy for web purpose.
In that case you may choose to store the images in the desired
resolutions.For this you'll have to store multiple versions on an image. For example product1/original.jpg, product1/compressed.jpg, product1/300x300.jpg etc
You may resize/crop the images on the fly. If you want to write your resizing systems you may write ImageMagick/vips/PIL etc based code.You may try to search for readymade nginx based plugins to server responsive images.
If you do not want to do this resizing stuff yourself you may use image storage services like imgix,cloudinary,akamai that provides CDN + image manipulations.Some of these provide storage+manipulation while some only manipulation.
I am working on a react project in which we generate new images by fitting uploaded image in a tv screen, or laptop screen or mobile screen. So what I want is a way in which I can place the uploaded image into this below image
In the black tv screen I want the uploaded image to fit and below there will be download option to download the uploaded image.
I searched for that and came across cloudinary react library. So I wrote this code to somehow fit an image inside this image but I can't seem to find any way to download that image.
If you have any idea of doing this please share with me.
Thank You in advance
You can overlay images on other images without having to use a particular Cloudinary SDK, as outlined here: https://cloudinary.com/documentation/image_transformations#adding_image_overlays
You can then place them more specifically using x and y coordinates in the URL as outlined here: https://cloudinary.com/documentation/image_transformations#placing_overlays
Once you have generated an image with the overlay positioned correctly (and with any other transformations you may wish to process), you can download the generated image as normal.
I want my iPhone app to share a web article to Facebook with an online image using SDK 3.1. I make it share the url of the page and it shows the image on your facebook but doesn't show the image in the share-preview. See photo. It lets me share with image if I add a UIImage, but I don't have a UIImage and I don't want to upload an image every time someone shares, it's already online. I could do all this in SDK 3.0 easily. I don't care if it shares the text of the article or not, I just want the image to show up in the preview and the post and when you click it on Facebook, go to the article page online.
Google has an option that if you click the magnifying glass next to a search result, it shows you an image of the page.
Does google store these images in their database? On their filesystem? Or are they generated dynamically?
They are actually base64 encodes of the images, rather than pointers or the image itself.