Using dropzone to save multiple images that have relation with article - javascript

I'm building a website in which the user can create articles with multiple images. Of Course that images will have relation with article.
All works good using laravel (php) and mysql. The database has the relation of images and articles.
Now I would like to add a new feature so as the user can upload or remove image from article so I thought to use dropzone library.
Now using dropzone there is one big problem. The dropzone upload the images on the server without any problem, but then when I click the submit button to save the article I would like to get again that images so I can make the relation with article.
Is there any way to do that?

Related

How can I generate an image on my website based on user text input?

The last time I asked this question it was merged with another inaccurate question. To clarify, I want to have the website generate a brand new, consolidated image. Not overlay one element on another, but actually create one cohesive .png.
The project I'm working on is a website that will generate an image based on book quotes. I have a series of input fields (Your name, Author, Book, Quote) and I want the user's input to be edited onto an image. The images are not uploaded by the user (it's randomly selected from a pre-determined list).
The next step of this project would be to automatically post the output image to social media, but I'm just trying to figure out how to process the image.
I'm new to web design, so my knowledge up to this point has been gained through Reddit and w3schools (amazing resource).
Something similar to the output I'm looking for: Example
Not exactly a direct answer, but you could look at Javascript and HTML5 Canvas to achieve this.
Example: https://chenmu10.github.io/memeGenerator/
You can also download the demo code at https://www.cssscript.com/responsive-meme-generator/ and check it out.
FYI I am not the owner of this project.

Upload Image and stay on page

I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!
I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.
Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.

Link one Portfolio Gallery URL to another by way of Custom Query in WP

I would like to link a Visual Portfolio Gallery to another gallery filter by way of querying particular custom post types. I have already tried custom queries in the lines of post_type="post, cubeportfolio" since I will be referencing all posts from the cubeportfolio gallery plugin with post type slug "cubeportfolio".
This method seems to work with other custom posts but not posts from the cubeportfolio gallery. The Portfolio Gallery i am trying to link is embedded in this page here http://tile.johnzuh.com/. Link to plugin website https://wordpress.org/plugins/visual-portfolio/ for reference purposes.
I might just need some tips on how to query filters from another plugin in wordpress or simply just link the URL of the filters directly to the visual portfolio i am using so when user clicks on them it takes them directly to a particular category and its respective gallery.
I don't have Cube Portfolio as it's a paid plugin, but I did download Visual Portfolio to check it out. Have you considered trying to filter things via the post category instead?
This way you wouldn't have to do any registering of custom post types in your functions.php file (see here). You could add categories to your items and reference them using the code below.
is_category('Category A')
You could obviously use a combination of both post_type and is_category in your query to get the desired result.

Is there a way to attach a dynamic image to a tweet?

I've got functionality on my website to share to twitter. It's just a simple Twitter Intent with some custom text. I'd now like to share an image with this text, not a link to the image, but the image itself like how they're shown in Twitter Cards. I'm at a loss of how to achieve this though.
I've got a web app that changes the data shown based on filters that the user engages. When they click the "share" button, I use PHP GD to generate an image using the current data shown. This image is saved on the server and the url is passed back to the javascript via ajax. Now I would like to open a "twitter share" dialog with my pre-filled text and this image. I have discovered that this is not possible with twitter intents because they don't allow images, only image urls (because actual images shown in tweets are pic.twitter.com images).
So I'm looking at Cards but it seems as though Cards are static. I was wondering if it's possible to make the card metadata dynamic by having a php file which has a hash (e.g. www.example.com/tweet.php?esd87fsduh) that is used to dynamically populate the twitter card meta tags? Or would this not work because it takes a long time for twitters bots to crawl the website again?
I basically want the simple functionality that the user clicks "tweet" and they are presented with the Twitter dialog showing dynamic text and the image based on the data filters they'd applied. Is this possible?
Thank you for your time.

Selected Image downloading using Javascript/jQuery

I have an application which creates custom images in the backend. Stores the link in a db table and then they are showed on a UI with checkboes attached to each of them.Now i want the user to be able to click on a download button and then all the images whose checkboxes are selected should get download (and not rendered) in one of the two ways possible
1.) create a zip file of selected and then download(future scope)
2.) download all images individually one by one.
below is my html code
<div class="span5" data-type="collage-image-structure">
<input type="checkbox" class="images_checkbox" data-url="some_url_of_image.png" checked="checked or unchecked">
<img src="some_url_of_image.png">
</div>
Now on click of a button I want download images that are checked. I have tried the iframe solution provided that i read somewhere on stackoverflow(sorry i cant find the link right now). The solution downloads the image in an empty iframe but does not show the download popup as traditional browsers. Also providing a link in the tag and using the download attribute solves things but i dont want to attach an tag to every image. All i want is to write a javascript function that will pass image_urls one by one and download them.Also i do not want to use any readymade plugins available to avoid the overhead of loading the jS file everytime with page load.Please help I need a solution quickly.

Categories