Attribute Images

[james.helms80]

I created a function that will allow you the ability to add images, remove images, and replace images for attributes. If you want to do this for multiple attributes you will have to replicate the code, or you will have to know how to write code to customize it to work with multiple strings:

// Add image field to the custom taxonomy
function add_taxonomy_image_field() {
    ?>
    <div class="form-field term-group">
        <label for="taxonomy-image"><?php _e('Image', 'text-domain'); ?></label>
        <input type="hidden" id="taxonomy-image" name="taxonomy-image" class="custom_media_url" value="">
        <div id="taxonomy-image-preview"></div>
        <p>
            <input type="button" class="button button-secondary taxonomy-image-upload" value="<?php _e('Upload/Add Image', 'text-domain'); ?>">
            <input type="button" class="button button-secondary taxonomy-image-remove" value="<?php _e('Remove Image', 'text-domain'); ?>">
        </p>
    </div>
    <script>
    jQuery(document).ready(function($) {
        // Upload image
        var mediaUploader;
        $('.taxonomy-image-upload').click(function(e) {
            e.preventDefault();
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            mediaUploader = wp.media.frames.file_frame = wp.media({
                title: '<?php _e('Choose Image', 'text-domain'); ?>',
                button: {
                    text: '<?php _e('Select', 'text-domain'); ?>'
                },
                multiple: false
            });
            mediaUploader.on('select', function() {
                attachment = mediaUploader.state().get('selection').first().toJSON();
                $('.custom_media_url').val(attachment.url);
                $('#taxonomy-image-preview').html('<img src="' + attachment.url + '" style="max-width:150px;"/>');
            });
            mediaUploader.open();
        });

        // Remove image
        $('.taxonomy-image-remove').click(function(e) {
            e.preventDefault();
            $('.custom_media_url').val('');
            $('#taxonomy-image-preview').html('');
        });
    });
    </script>
    <?php
}
add_action('your_taxonomy_add_form_fields', 'add_taxonomy_image_field', 10, 2);

// Save image field
function save_taxonomy_image_field($term_id, $tt_id) {
    if (isset($_POST['taxonomy-image'])) {
        update_term_meta($term_id, 'taxonomy_image', esc_attr($_POST['taxonomy-image']));
    }
}
add_action('created_your_taxonomy', 'save_taxonomy_image_field', 10, 2);
add_action('edited_your_taxonomy', 'save_taxonomy_image_field', 10, 2);

// Edit image field
function edit_taxonomy_image_field($term, $taxonomy) {
    $image = get_term_meta($term->term_id, 'taxonomy_image', true);
    ?>
    <tr class="form-field term-group-wrap">
        <th scope="row">
            <label for="taxonomy-image"><?php _e('Image', 'text-domain'); ?></label>
        </th>
        <td>
            <input type="hidden" id="taxonomy-image" name="taxonomy-image" class="custom_media_url" value="<?php echo esc_attr($image); ?>">
            <div id="taxonomy-image-preview">
                <?php if ($image) : ?>
                    <img src="<?php echo esc_url($image); ?>" style="max-width:150px;">
                <?php endif; ?>
            </div>
            <p>
                <input type="button" class="button button-secondary taxonomy-image-upload" value="<?php _e('Upload/Add Image', 'text-domain'); ?>">
                <input type="button" class="button button-secondary taxonomy-image-remove" value="<?php _e('Remove Image', 'text-domain'); ?>">
            </p>
        </td>
    </tr>
    <script>
    jQuery(document).ready(function($) {
        // Upload image
        var mediaUploader;
        $('.taxonomy-image-upload').click(function(e) {
            e.preventDefault();
            if (mediaUploader) {
                mediaUploader.open();
                return;
            }
            mediaUploader = wp.media.frames.file_frame = wp.media({
                title: '<?php _e('Choose Image', 'text-domain'); ?>',
                button: {
                    text: '<?php _e('Select', 'text-domain'); ?>'
                },
                multiple: false
            });
            mediaUploader.on('select', function() {
                attachment = mediaUploader.state().get('selection').first().toJSON();
                $('.custom_media_url').val(attachment.url);
                $('#taxonomy-image-preview').html('<img src="' + attachment.url + '" style="max-width:150px;"/>');
            });
            mediaUploader.open();
        });

        // Remove image
        $('.taxonomy-image-remove').click(function(e) {
            e.preventDefault();
            $('.custom_media_url').val('');
            $('#taxonomy-image-preview').html('');
        });
    });
    </script>
    <?php
}
add_action('your_taxonomy_edit_form_fields', 'edit_taxonomy_image_field', 10, 2);

// Update image field
function update_taxonomy_image_field($term_id, $tt_id) {
    if (isset($_POST['taxonomy-image'])) {
        update_term_meta($term_id, 'taxonomy_image', esc_attr($_POST['taxonomy-image']));
    } else {
        delete_term_meta($term_id, 'taxonomy_image');
    }
}
add_action('edited_your_taxonomy', 'update_taxonomy_image_field', 10, 2);

Make sure to replace 'your_taxonomy' with the slug of your custom taxonomy. This code adds an image field to the “Add New” and “Edit” screens of your custom taxonomy. The selected image URL is stored as term meta using the key 'taxonomy_image'. You can retrieve and use the image URL wherever you need it in your theme or plugin.

Remember to add this code to your theme’s functions.php file or in a custom plugin.

[andrii]

Hi,

Thank you for sharing. I think this code will be useful for the community.

[james.helms80]

No problem.

I am working on the other half which is displaying the images on the frontend. When I have my code I’ll share it as well, but it will probably be very specific to my use case.