I have been trying to incorporate the image editing feature onto my site and have used the following plugin:
http://rithychhen.com/jquery/imageEditor
All the features provided in this plugin works fine. But I am hung up while saving the image to the server.
As directed in the above provided website, I have specified the "remote URL" and set the "remoteSave" to true. But I have no clue on how to work on the PHP side(as I have no clue of the header variable set by the image editor which is sent in Ajax call).
Related
so I started using tinymce for my blog posts and there is this problem with imagetools, they work while images are being edited, but after the article is posted, only this BIG url is showing. I think the problem is that, the blob image which is created while editing is not saved and I need to save it, right?
By the way I am using laravel.
When you edit images using the image tools they will always be turned into a Base64 or BLOB encoded image - the image tools function in the browser and know nothing (directly) of the application in use (e.g. Laravel). As such its up to the application to determine what to do with these images:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
I would assume Laravel has some APIs such as the Filesystem API that you could use to store the images appropriately.
Regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.
The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
In order to upload images to my server I need to post to a specific URL so that I can handle it on the back end. TinyMCE seems to provide support for such functionality, but it's not entirely clear or explicit about it.
I tried using JustBoil.Me to upload the image, but the way it's set up does not play nicely with my Laravel and URL setup.
Have any of you had to do this before?
I found this resource to be very helpful, but the lack of literature on this topic is shocking:
Direct Image Uploads in TinyMCE 4 (it would be amazing to see a PHP/Laravel server side code snippet on how to return something that TinyMCE can process)
I'm rather new to PyroCMS and I have run into a problem on a project I'm working on. I have a custom image field for my blog posts which I'm trying to use for my featured image. In the admin section I create posts and upload images successfully, but after saving the post my image does not display anymore both on the front and back end.
By inspecting element on the front end (with Google Chrome) I can see the URL for the image to be displayed, but opening that URL in a new tab just outputs a lot of gibberish code. Any ideas?
This has me confused because I tried out the same setup locally on my computer using XAMPP and everything works perfectly. Contacting my web host for technical assistance resulted to me being advised to employ the services of an experienced PyroCMS developer.
Thanks.
I'm trying to figure out the logistics for a new site that I'm creating, and one of the main issues is to get verification working correctly. One of the verification methods i'd like to incorporate is for a specific image (created via gdlib on the fly) to only work on a web page that is specified in a database field. If the image is shown on the EXACT page that is specified, then it shows the correct image, and if the link is incorrect, then it shows a different image (set by admin). The fields will be created on the admin side, and I'm trying to figure out how to get multiple instances of this working correctly. I'm using PHP and using a tag like [img src="something_here.php"] to show my images. Any suggestions on how to set the coding to verify the site that the image is embedded into?
Update So I got it working, but the request_URI command only works for the extension "ex. login.php", as opposed to adding in the absolute domain also. Any suggestions on how to make it factor in the whole domain address?
If you create an image with gd, you can put any PHP code on the page. for example: if ($_SERVER['REQUEST_URI'] == '/specialWebPage.php') { ... }.
How should i create a preview of image to be uploaded before it is actually submitted using AJAX in PHP?
Without uploading the image, this is going to be impossible in JavaScript as far as I can see, because security limitations are going to prevent you from determining the selected file in the file upload, and embedding that file in an img tag (as it used to be possible five years ago.)
You will be more lucky with Flash-based uploaders. I have seen some that offer the kind of functionality you want.
Update: Here's one that offers a preview function. From what I can see, it base64 encodes the local image and serves it to the surrounding HTML page as a inline data <img> tag. This is great because it might integrate well into your site. It does not work with any version of Internet Explorer, though.
Here's a fully Flash based solution that does previews in all browsers.
you first have to upload the document to server. Than you can show like.
<img src="uploads/file1_12224.jpg" />
The "file" input type doesn't expose the local file location of the file to be uploaded. It does "appear" to because as a user you can see the location, but the web page never knows this value. Without the local file address, you can't show a preview of the image on the web page using plain HTML or JavaScript.