Is there a way to have directus insert links to thumbnails instead of the original full-size image when using the wysiwyg editor?
Context:
We have directus configured to use S3 for file uploads. Our backend directly connects to the directus db to fetch data and return it to the client in whichever form it is needed.
Now for the wysiwyg editor all html it generates is fine. However, images inserted with it always link to the original image.
In our case the client is a mobile app. Saving bandwidth with thumbnails is important because the app is used a lot without wifi.
I'd like to avoid having to parse the src tag and replace it with a different link. Mainly because it is not a simple search and replace, as the link contains the location on s3 (uuid), not the id that directus uses for thumbnails (private hash) - so I would also need to query the database a second time.
EDIT: I'm actually doing the search, query db, and replace (Optimized a bit by collecting the links, then going to the db once in a big query, then do the replace). I haven't found an easier way of doing it.
Related
I am creating a full stack blog application but I am confused how can i render rich text editor data on the backend using express and mongoDB Just like this stackover flow text editor. Most important thig is how can find Images of text editor data and push it on cloudinary. help me out please
First, you should choose what editor you would like to use. One popular open source editor is Quill for example.
After you implement it in your frontend, you should listen to the events on the editor instance (image.added, image.removed...) and based on that you can upload or delete your images from the cloud.
There is also an option to store images encoded in the HTML so you don't have to upload them to cloud at all, but that is not the good practice since it will significantly increase the payload of the HTML.
After you are done with the article, the output HTML from the editor can be saved in the MongoDB, and later you can fetch it and display it in the client side.
I'm using the image upload script with a backend URL to rename uploaded images stored on the server. It seems to work well with both file uploads and also drag-and-drop.
Without that backend handling you can paste images directly into the editor, but they get saved as base64 with the post in the db itself which is not great for a lot of reasons.
If I use the image upload script as I am now, it seems it blocks the pasting of images directly into the editor. That's safest, I guess, but I was wondering if there was a way of allowing it, but treating the pasted image like a drag-and-drop image, for example, so we could have the convenience of pasting images but still have them saved with unique filenames on the server instead of being embedded as base64 with the rest of the source of the post?
Thanks.
I've been playing around with making a draftjs plugin that lets the user paste in mixed text&image content from websites and have images auto-uploaded to the server. I've quickly come to the realization that it's not easy, simply because of how many different sites use different kinds of counter-measures for copy/pasting images. Standard image tags in page content are no problem - easily grab the src and handle the file upload from the url. However, many sites use all kinds of trickery to make this a pain. For example, some will only serve small thumbnails, requiring a GET request on the image with a hash key in order to retrieve a larger version. Others somehow seem to corrupt the image so that it's unreadable by the time it's been retrieved. Others still play with weird embed tags to mess with draftjs' image blocks.
But then I open up a Google Docs file, and find that when I copy any images into that from a website, there's never any troubles whatsoever. All the problematic websites that I'm finding myself having to write specific methods for retrieving from seem to be handled by Google Docs with ease.
Am I using completely the wrong approach by trying to retrieve images from a url? Does Google use a far superior approach (yes, I presume) - in which case, does anyone have any idea what that approach might be?
We have a website, which allows users to upload documents (word, pdf, PPT, etc.).
We are uploading files to Amazon S3. So, all files will have it's own web URL.
For these uploaded documents, we would like to generate thumbnails. This thumbnail needs to be generated based on it's content (like Google document viewer).
Is there any Service/API, which generates thumbnails of documents by it's URL?
Thanks and Regards,
Ashish Shukla
You could roll your own solution. I'm evaluating 2JPEG and it appears to support 275 formats including Word, Excel, Publisher & Powerpoint files. fCoder recommends running 2JPEG as a scheduled background task. The command line syntax is pretty comprehensive. I don't think it has the ability to process remote AWS files, but you could retain it locally temporarily, generate the thumbnail and then delete the local source file.
Here's a sample snippet to generate a thumbnail for a specific file:
2jpeg.exe -src "c:\files\myfile.docx" -dst "c:\files" -oper Resize size:"100 200" fmode:fit_width -options pages:"1" scansf:no overwrite:yes template:"{Title}_thumb.jpg" silent:yes
You should also take a look at AWS Lambda. In fact, this presentation from the AWS re:Invent 2014 conference shows a live example of using Lambda to generate thumbnail images. This solution will be very reliable, and very cost-effective, but has the downside that you'll be responsible for maintaining the code, or debugging issues.
I need to download images from a website and display them on(?) multiple UIImageView.
Maybe I'll code a php to "read" the directory and search for images, write a XML file and use it as medium. But I'm not sure if it's the best way.
Let's see the options you have to fetch images from a website:
Fetching HTML and Parsing the HTML to find the images (on the iphone). Then downloading the images.
Writing a script (maybe PHP) that writes all image links to an XML file (or JSON), and then fetch the output of your script with all the links.
If you choose option (1) you'll need NSURLConnection to fetch data asynchronously (without blocking the UI). I would also use TFHpple to parse HTML using xpath queries, see this tutorial for help. Finally to fetch the images using their URLs you can use SDWebImage, SDWebimage also provides caching so your app will not download the same image multiple times.
The bad side of using option (1) is that any change in the Website you're getting the images from will break your app and you'll need to issue an update to the app store in order to fix it.
If you choose option (2), your app will be easier to fix if the website changes, you'll just need to modify your script.
If you go with option (2) you'll probably need NSURLConnection, NSXMLParser (or a third party XML parsing library) and to download the images I would recomend SDWebImage again. I would also advise using JSON (and NSJSONSerialization) instead of XML, just beacuse I find JSON easier to parse.
Yes, it will be very good if you write some php script to get image list (list of image urls).
After getting such urls you can asynchronously download and show them in image views. Look here for such async image view implementation