I recently learnt html, css, javascript, node js. I'm trying to create a blog website as part of the personal project. I want to know as in Wordpress, you can add a block for an image, resize the image and then post it, how to make this functionality as part of my admin page where I can chose to resize image before uploading it.I want to know how to achieve this functionality. I researched on my own and sadly couldn't get anywhere :(
The Wordpress Documentation itself tells the wordpress users that there is the plugin 'Advanced Custom Fields' for adding new meta fields to your wordpress posts, pages, taxonomies or whatever you like. There is a huge selection of available fields.
ACF Plugin : https://www.advancedcustomfields.com/
You can use ACF (advanced custom fields) to create a new image block for your post. There also is a crop image field. You can define which image size you would like to have, and on upload, it automatically opens the image crop. Here is the plugin link:
https://wordpress.org/plugins/acf-image-aspect-ratio-crop/
Before you can create your custom image size with putting something like this in your functions.php :
https://developer.wordpress.org/reference/functions/add_image_size/
So you can create your image size and add an image block to your posts or whatever which opens a crop overlay, so you can easily have your images cropped in the size you like.
If you want to get your ACF meta fields via the Rest-API, i.e. you are using a javascript framework in the frontend, you can also just add all your ACF fields to the rest api:
https://wordpress.org/plugins/acf-to-rest-api/
Hope this helps solving your issue.
Related
First of all use medium's editor thoroughly if you didn't before, I want as it is that of Editor, if user want to upload image then editor save image, video etc on its own server then provide us images videos link by img tag..
I've done this previously using TinyMCE. You need to add tinymce js link in you base html and initialize tinymce in template where user will be writing post. An example of template you can see.
This is how the post looks.
I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Based on the guides and articles I have been reading, my assumption is that I have to save the image to the server and then give the url back to the ckeditor so that it may use it to display the image.
What I can't seem to figure out is how to do that. Where in the ckeditor js code would I add my own logic so that it may pick up the uploaded image, send it to the server and then give a url back to ck editor?
I've been through a lot of documentation such as this, but I can't seem to find anything.
https://docs.ckeditor.com/ckeditor5/latest/features/image.html
https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html
I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Did you check the console? On the console, if you don't have the editor properly configured, you'd have something like this:
filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter
Now, there are two built-in upload adapters – for CKFinder's server connector and for the Easy Image service provided by CKEditor Cloud Services. Both need to be configured to work:
CKFinder adapter: https://docs.ckeditor.com/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html
Easy Image: https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html#easy-image
The role of an upload adapter is to expose a function which will send a file to the server (in whatever way it wants) and notify the editor once the upload is done (by returning a URL to this file). The editor takes care of the rest – inserting the image into the content, displaying a progress bar, etc.
Besides using the built-in adapters, you can write your own one. See:
https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src as an example of a simple upload adapter
I'm trying to figure out how to grab the image from an external site, in my case, http://bikerace.com/tracks/[levelCode]
(as an example level code, nhx874, the url would be http://www.bikerace.com/tracks/nhx874)
Users on bikeracelevels(dot com) have to input the level code THEN upload a screenshot. I'm trying to remove this requirement by automatically grabbing the image based on the code they input, since I could append their input code to the url, then somehow find the image (since the only image on the page would be the one I want)
How could I accomplish this?
Thank you very much in advance!
Get this cross-domain AJAX plugin for use with jQuery: https://github.com/padolsey/jquery.fn/tree/master/cross-domain-ajax
Use it to load the page on bikerace.com/[levelcode], then select the image from the data as you normally would with jQuery.
I have a plugin called Skitter fo WP..its a slideshow jQuery plugin.
For some reason im getting
Error loading images. One or more images were not found.
I recently transfered my website from one host to another..copying all the files. now its not working, needless to say it worked before the transfer..no files were changed in any manner what so ever..only wp-config file for db etc'..
I tried the solution offered here -
https://github.com/thiagosf/SkitterSlideshow/issues/7
But it didn't worked..
The wp settings of the plugin are the same as they were with my images attached to the plugin.
The website is
www.tranceil.fm
Any thoughts?
A quick thought gone through my mind: The error was just happened when you transfer your website. Let me explain.
I believe you uploaded the slider images using WordPress Image Uploader. So your image's address will be like this: www.youroldsite.com/wp-content/wp-uploads/2012/08/slider1.jpg
When you transfer your website to another domain, WordPress will not update these locations. So simply when the plugin checks for above address, it is unavailable.
Solution:
You need to change the slider image's URL manually or
Delete all slides and Re-upload the images again on your new host.
I'm creating an image gallery using the Galleria plugin.
I'm customised the styling of the gallery, editing css within the .js file, but there's one task that's got me stumpted:
I'm trying to replace the arrows that appear on either side of the image lightbox. They are currently created using type, but I need to replace these using images to be consistent with the rest of the site.
I've tried adding the images as I normally would using CSS, but it failed to display.
I'm not very experienced with Javascript so any tips on how to call images in CSS contained within Javascript would be gratefully received.
Here's a link to the code from the Javascript:
http://jsfiddle.net/tomperkins/TQDU7/
And here's a link to the plugin site if that helps:
http://galleria.aino.se/
Thanks in advance,
Tom Perkins
You just have to edit the "classic-map.png".. just make sure you map them in the same way ( put your button images at the same spot as the once already there )