I have seen countless articles about how to launch a custom version of the WP3.5 Media uploader without the sidebar but cannot for the life of me find anything that actually tells you how to launch it WITH one.
I have modified things quite a bit to allow users to sideload when they use the 'Insert From URL' option and want to enable the 'Insert from URL' option in other areas of my application.
Ideally I'd like this to appear as a third option when viewing the uploader in image mode so you have 'upload files' | 'media library' | 'insert from URL' but failing that I'd just like the side bar to show...
I am currently using this
ImageChooser = wp.media.frames.icsImageChooser = wp.media({
// Set the title of the modal.
title: 'Choose or Upload Image',
// Tell the modal to show only images.
library: {
type: 'image'
},
// Customize the submit button.
button: {
// Set the text of the button.
text: 'Use This'
}
});
Does any one know what I need to add to that to achieve either of my desired outcomes as described above?
Related
I have a Wordpress site and I am trying to add a button to the header which opens a modal/popup to a Typeform form.
I am able to achieve this button in the body of the site, however when I try to put this button in the header, instead of opening as a modal it redirects to the actual website.
Do you have any thoughts on how to implement a modal that is triggered by a button in the header? I would like to avoid using plug-ins, however if that is the best solution I am open to it.
Welcome to StackOverflow!
I believe you could use Typeform Embed SDK to achieve what you want.
Step 1: create a button and add it to the header of your site.
Step 2: Give this button a unique id
Step 3: Add this piece of code that will create a modal/popup when the button is clicked
const reference = typeformEmbed.makePopup(
'YOUR_TYPEFORM_URL', // NOTE: Replace with your typeform URL
{
mode: 'popup',
autoClose: 3000,
hideHeaders: true,
hideFooters: true,
onSubmit: function () {
console.log('Typeform successfully submitted')
}
}
)
document.getElementById("YOUR_BUTTON_ID").addEventListener('click', function(e){
reference.open()
})
Hope it helps :)
I want to add an additional checkbox next to Crop Image but I can't understand what need to write in javascript for rendering it and handling then. I couldn't find documentation with explaining that. I've tried to write code like that but it didn't work:
function addListBlockClassName (settings, name) {
if (name !== 'core/gallery') {
return settings
}
// new checkbox
settings.attributes.enableVoting = {
default: false,
type: 'boolean',
}
return settings
}
wp.hooks.addFilter(
'blocks.registerBlockType',
'my-plugin/class-names/list-block',
addListBlockClassName
)
You can add the additional checkbox on sidebar by using InspectorControls and Checkbox Control
Have a look at gallery block and learn how the are implementing things on sidebar via using InspectorControls. This can be complex so for easier implementation you can look at other core blocks of Gutenberg.
And this link can help you about how to use CheckboxControl.
In your above code you are just adding a hook which is changing the default class name of block gallery and that is not what you are asking. Please note that as per my knowledge you can't edit default core blocks (apart from very few things) unless you copy whole core block and add additional functionality into it.
Does anyone know if it is possible to have multiple buttons which depend of a specific user , and for each user he has a multiple applications ,in his space (im developping an Appviewer for a PAAS) , if i click in a button or image whatever, i will load an application that contains modules (contact , shopping...)
My json file is like this :
{"status":"ok","applications":
[{"id":"894","name":"nameApp","user_id":"256","template_id":"1","status":"3",
"icon":null,"logo":"","publish_status":"0"},
{"id":"769","name":"mymodel","user_id":"256","template_id":"4","status":"3",
"icon":null,"logo":"","publish_status":"0"}
is there an idea of how to add dynamically buttons to Carousel..the number depends of the number of id ?
You could define xtype for each type of button, including their handlers, etc. Now suppose you have the user record in a var record, when showing the container for the button you could:
container.add({
xtype: 'shopping-button',
userid: record.get('id')
});
Hope it helps-
I've been playing around with the new media manager in WordPress and had some fun with it, but have reached the point where I'm banging my head against a wall.
I have a custom meta box that I'd like to store some images in (well it's a hidden input and I'm currently storing their ID's, but could equally be the image objects), then making an AJAX call to show some thumbnails, which I have subsequently made draggable so users can reorder (not necessarily relevant just some background).
My problem is that when I open the media manager, no images are selected, so if a user wants to edit the pictures in their gallery they need to select them all again.
What I'm trying to figure out, is how do I open the media manager with the current images passed through so they are pre-selected.
So, broadly, my code looks like this
jQuery('#myButton').click(function(e) {
e.preventDefault();
frame = wp.media({
title : 'My Gallery Title',
multiple : true,
library : { type : 'image'},
button : { text : 'Insert' },
});
frame.on('close',function() {
// get selections and save to hidden input plus other AJAX stuff etc.
}
frame.open();
});
My thought is that there must be either a parameter to pass into the frame (probably a JSON object of the images, or I need to create an event for
frame.on('open', function() {
// Set selected images
}
But I have tried both ways round and am not getting anywhere.
It would appear possible, as changing the 'Featured Image' takes you to the library with the current one selected - I've just been unable to understand the core code sufficiently yet and hope someone else has !
After studying the core for a bit, the answer here is really quite straightforward.
Listen for the open event of the wp.media object, grab the state, create attachment objects with your id's and add them to the selection.
frame.on('open',function() {
var selection = frame.state().get('selection');
var ids_value = jQuery('#my_field_id').val();
if(ids_value.length > 0) {
var ids = ids_value.split(',');
ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add(attachment ? [attachment] : []);
});
}
});
This works when selecting multiple images as well as single and assumes that using the code above you have stored the values in a single text/hidden field with comma separation.
not a real answer, but somethings that I have noticed
using your code the frame.open( console.log('open') ) does trigger the console.log.
The other frame.on('open', function() { console.log('on->open')}) does not.
When looking at the post edit page. (Where a featured image is already set).
If you open the featured img window a few things happen that are interesting.
WP does 3 ajax calls, the 1st and 3rst contain the featured img id. the 2nd is the same as with your code.
when the popup is loaded the featured image is visible / loaded before the rest of the images. When those show up the featured image is put in the right order.
When looking in firebug at the dom tab I discovered that the var wp.media.model.settings.post.featuredImageId holds (wait for it) the featured image value.
Hopes this helps you in some way.
I think those guy manage to do it :
https://wordpress.stackexchange.com/questions/76125/change-the-default-view-of-media-library-in-3-5/76213#76213
But this doesn't work for me.
I ve got the jquery in the footer of my post/edit, post/new but that just don't work for me :(
I have created a facebook application for addding page tab in any facebook page.
Everything is working fine but i am not able to change the icon the tab i am adding.
I am using following code of php sdk
if($facebook->api($tabid, 'POST', array(
'custom_name' => $tabtitle,
'image_url'=>$newname,
'is_non_connection_landing_tab'=>1,
'access_token'=>$mpagetoken
))
Please tell me where i am wrong in this ?
There is no such field as image_url in page tabs.
Actually tab icon is the application icon which is icon_url field of application object, and while some of fields may be edited by issuing POST request to https://graph.facebook.com/APP_ID?PROPERTY_1=PROPERTY_VALUE this field isn't marked as editable:
Not all app properties can be edited via the API, please refer to the properties in the table above for an indication of whether a property can be edited or not.