I'm attempting to implement an image upload tool on my website, similar to how Google has done their image upload search. This would need to be able to have images dropped into it; have urls pasted into it; or have a user upload it from their own computer.
Another related question, how does Google have the selection method change when you click 'Paste URL' or 'Upload file'?
images.google.com for idea source.
Thanks in advance.
I believe Google spent several years developing the algorithms behind searching for images with other images, so if this a website you are developing for yourself, I'd explore other options. Otherwise, tell your boss it's impractical.
As for the method change, I imagine (without looking too closely) that they overlay the camera icon on the input, and on click, displays a <div> or other container element over the input field, which can then contain alternative input methods.
When the user clicks on Paste or Upload, it replaces the content of a sub container with the relevant HTML using jQuery or whichever JavaScript library it is that they use.
Related
My webapp has functionality for uploading images, with additional information, like image title, description, tags, copyright information, etc. I use TinyMCE for editing webpages, but I don't want to allow images to be uploaded within the editor. I only want to allow the user to choose among the images already uploaded to the server.
Would it be relatively easy to change the "Insert Image"-functionality in TinyMCE to the following:
When the "Insert Image" button is pressed, a custom dialog pops up.
The contents of that dialog is a grid view of the images on the server. No upload functionality should exist here.
An image is selected via a radio-button.
When the "Insert Selected Image"-button in the dialog is pressed, instead of just the <img>-tag, some generated HTML is inserted at the editor cursor.
I have skimmed the TinyMCE documentation, and I know about the file_picker_callback. Would I use that, and write my own javascript function to open up my own dialog? How do I control what is inserted into the document?
TinyMCE has APIs to create your own toolbar buttons that open dialogs to perform whatever task you need.
One approach is to use the TinyMCE UI: https://www.tiny.cloud/docs/ui-components/dialog/
The other approach is to use a URL dialog that embeds a remote web page you create. https://www.tiny.cloud/docs/ui-components/urldialog/
In either case you would use TinyMCE APIs (e.g. insertContent()) to place the resultant HTML into the editor.
I need a quick way to get the image URL, just like I would get if I right click on an image and select "Copy Image URL". I'm thinking Applescript, though others have mentioned Javascript.
This needs to be compatible with an Automator workflow and needs to work with Google Chrome, Chromium, and Safari, at a minimum.
More specifics:
I already have an Automator workflow that this will be added to.
The workflow begins with text and images that I have selected on a webpage using the mouse.
The processing of the text is working fine.
I just need a Applescript or Javascript or Shell Script (which I assume are the only outside code that can be added to an Automator workflow) that will grab any and all image URL's within the part of the page selected in step 2.
Images are NOT downloaded. Only the image URL is needed.
The basic logic is this:
Does selected input contain images?
If yes,
get URL of image(s)
pass to the next step
else continue
Any help or ideas appreciated!
OS X Services would be your best bet. Those work with text selections and are supported in most apps (e.g. see the Safari>Services submenu). You can also assign them keyboard shortcuts, which is very handy for repetitive tasks.
Basically, you want to get the selection as web content (i.e. HTML data, not plain text) then extract the URLs from that. You can create services in Automator, which includes various actions for working with web content, so I recommend starting there.
I've been searching the internet to get some information about how i can be able to detect and show what a url is about.
Facebook has a good example of what i actually want to achieve:
If you create a update on facebook and paste in a URL, facebook will detect some information about it and show a box with some text and often the right picture.
for instance, take: http://www.ebay.com/itm/Mens-Monk-Strap-Loafers-Suede-Lined-Metal-Buckle-Slip-Casual-Dress-Shoes-New-/311170422772 . then it shows the image of the shoe and headline.
Ive found other services which does this with image services and youtube, but what i need is about getting information of products most of the time, so often urls from shops. So the user pastes in a url, and i can detect what that link is about.
any ideer how this can be done ?
Is it backend code, like c# or javascript ?
Hopefully some of you can point me in the right direction. Thanks in advance!
Facebook scrapes pages for specific metadata in the back-end and uses it to generate the snippets you see, which can either be served along with the initial page load or brought in via JavaScript (front-end). From there it's a matter of using CSS and JS to style the popup to your liking.
Depending on how inter-related your site is with the content you want to display, this can be an easy task or a difficult one.
I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.
Like an "insert" menu, by which to insert an image into the editor, using JavaScript, I've no idea what's the solution at all,
should be in 2 steps:
Let the user choose an image (this should be doable by an input type=file).
Insert the chosen image into editing context(don't know how to implement).
You won't be able to achieve this without uploading the image to your server, since the only reference you can have inside the text area is to a public website (i.e. not the users hard drive).
I'd recommend checking IMCE; that's what I use.
It allows the user to upload images. Together with a nice WYGIWYS editor such as TinyMCE it works like a charm.