2

I am using wp.media modal attachment API to import images to customizer. Along with the images, I have imported their meta data as well ( Title, Description, Alt Text etc.). These are in the form of input fields in the Customizer. You can check out the Customizer Screenshot here.

Now, I want to the user to be able to make changes and save the attachment details fields using the 'Publish' button. Since I am working in a jQuery environment, I am trying to enable the 'Publish' Button using the trigger('change') mechanism but I am not able to do it. This is the code for triggering the change event-

jQuery('.container input').on( 'input', function() {
        jQuery(this).trigger('change');
    });

Here, I am binding the trigger event to the change in the input field.

On PHP Side, I had to make 2 Custom Fields for Slide URL and CTA Button while the Title and Description were already present. Here is the function filtered through attachment_fields_to_edit. Obviously, the corresponding filter to save the values was also used.

To show it on the Customizer, I created a Custom Control. Here is the render part of the code for that. $id is a string containing IDs of various attachments separated by a comma.

I know on some level that the approach to the whole saving attachment details things is wrong but am not able to pinpoint the exact error. Any help will be appreciated.

Also, if this is not the method of saving attachment details in Customizer, any help towards the right direction is welcome.

  • if the input field is generated by the API, you don't need to trigger this event. how do you create this field PHP side ? – mmm Jul 11 '18 at 16:54
  • Made the changes to the question, made custom fields using 'attachment_fields_to_edit' filter hook and render in customizer using custom control. – Divjot Singh Jul 11 '18 at 17:50
1

To use a custom control, you need a field with special attributes to be linked to the "publish" button.

if you don't want to display this field, you can generate a hidden field like that :

class WP_Test_2_Customize_Control extends WP_Customize_Control
{

    public function render_content()
    {

        ?>

            <input
                id="<?php echo htmlspecialchars("_customize-input-{$this->id}");?>"
                type="hidden"

                <?php $this->input_attrs();?>

                <?php if (!isset($this->input_attrs["value"])) {?>
                    value="<?php echo htmlspecialchars($this->value());?>"
                <?php }?>

                <?php $this->link();?>
            />

        <?php

    }


}

then, when you modify values in the other fields, you put values in this field with JavaScript and then trigger the change event on this hidden field.

  • But the input hidden field is already linked with other settings...here is the complete code. The hidden field is used to get the IDs of attachments but the details of attachments... how do I save them? – Divjot Singh Jul 12 '18 at 13:25
  • you can save all details in the value. e.g. on a JSON format. – mmm Jul 12 '18 at 14:31
  • May seem stupid but I have literally no knowledge of JSON, didn't need it till now. Can you please point me in the right direction about how to go about saving multiple attachment IDs along with their details? – Divjot Singh Jul 12 '18 at 18:11
  • you can use that developer.mozilla.org/en/docs/Web/JavaScript/Reference/… – mmm Jul 12 '18 at 19:16
  • Looked into JSON and it feels like I might get somewhere now. Thanks! – Divjot Singh Jul 13 '18 at 4:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.