satwinderrathore / cmb2-radio-image

Images as radio buttons

Hi 👋, I'm Satwinder Rathore

A passionate WordPress/PHP developer from India

• 🌱 I’m currently learning React and Laravel

• 💬 Ask me about WordPress

Connect with me:

Languages and Tools:

cmb2-radio-image's Issues

Turn plugin into a OOP and avoid fatal errors

Currently if two projects have your field php throws a fatal error because plugin fuctions are redeclared, turning the plugin into a php class and checking if class_exists avoids the problem

I update your plugin at my local install with it to make it work:

<?php
/*
Plugin Name: CMB2 Radio Image
Description: https://github.com/satwinderrathore/CMB2-Radio-Image/
Version: 0.1
Author: Satwinder Rathore
Author URI: http://satwinderrathore.wordpress.com
License: GPL-2.0+
*/

// Exit if accessed directly
if( !defined( 'ABSPATH' ) ) exit;

if( !class_exists( 'CMB2_Radio_Image' ) ) {
    /**
     * Class CMB2_Radio_Image
     */
    class CMB2_Radio_Image {

        public function __construct() {
            add_action( 'cmb2_render_radio_image', array( $this, 'callback' ), 10, 5 );
            add_filter( 'cmb2_list_input_attributes', array( $this, 'attributes' ), 10, 4 );
            add_action( 'admin_head', array( $this, 'admin_head' ) );
        }

        public function callback($field, $escaped_value, $object_id, $object_type, $field_type_object) {
            echo $field_type_object->radio();
        }


        public function attributes($args, $defaults, $field, $cmb) {
            if ($field->args['type'] == 'radio_image' && isset($field->args['images'])) {
                foreach ($field->args['images'] as $field_id => $image) {
                    if ($field_id == $args['value']) {
                        $image = trailingslashit($field->args['images_path']) . $image;
                        $args['label'] = '<img src="' . $image . '" alt="' . $args['value'] . '" title="' . $args['label'] . '" />';
                    }
                }
            }
            return $args;
        }


        public function admin_head() {
            ?>
            <style>
                .cmb-type-radio-image .cmb2-radio-list {
                    display: block;
                    clear: both;
                    overflow: hidden;
                }

                .cmb-type-radio-image .cmb2-radio-list input[type="radio"] {
                    display: none;
                }

                .cmb-type-radio-image .cmb2-radio-list li {
                    display: inline-block;
                    margin-bottom: 0;
                }

                .cmb-type-radio-image .cmb2-radio-list input[type="radio"] + label {
                    border: 3px solid #eee;
                    display: block;
                }

                .cmb-type-radio-image .cmb2-radio-list input[type="radio"] + label:hover,
                .cmb-type-radio-image .cmb2-radio-list input[type="radio"]:checked + label {
                    border-color: #ccc;
                }

                .cmb-type-radio-image .cmb2-radio-list li label img {
                    display: block;
                }
            </style>
            <?php
        }
    }

    $cmb2_radio_image = new CMB2_Radio_Image();
}

If your are ok with this changes I can PR them or you can commit them directly

step in Please

can you please stepinto this →
CMB2/CMB2#1029 (comment)

Function and arrays on CMB2-radio-image

Hello, I am Brazilian and not dominate the English, I apologize for the bad writing. I have a function with arrays that use the Redux Framework, see below.

function my_get_sidebar_layouts( $inherit = false) {

        $layouts = array();

        if ( $inherit ) {
            $layouts['inherit'] = array( 'title' => __( 'Inherit', THEME_SLUG ), 'img' => IMG_URI . '/images/inherit.png' );
        }

        $layouts['none'] = array( 'title' => __( 'No sidebar (full width)', THEME_SLUG ), 'img' => IMG_URI . '/images/none.png', 'images_path'      => get_template_directory_uri(),);
        $layouts['left'] = array( 'title' => __( 'Left sidebar', THEME_SLUG ), 'img' => IMG_URI . '/images/left.png' );
        $layouts['right'] = array( 'title' => __( 'Right sidebar', THEME_SLUG ), 'img' => IMG_URI . '/images/right.png' );

        return $layouts;
    }

I use this way in redux:

  array(
                'id'        => 'archive_sidebar',
                'type'      => 'image_select',
                'title'     => __( 'Sidebar layout', THEME_SLUG ),
                'subtitle'  => __( 'Choose sidebar layout for archive templates', THEME_SLUG ),
                'options'   => ny_get_sidebar_layouts(),
                'default'   => 'right'
            ),

it works perfect…
A few days ago I’m trying to use it the same way in CMB2 with CMB2-radio-image-master. But I can not. Only the value goes, but the image and the title does not. can anybody help me?

How do I use this function in CMB2 fields in the same way that I use in Redux?

 $cmb_demo->add_field( array(
        'name'             => __( 'Test Radio Image', 'cmb2' ),
        'desc'             => __( 'field description (optional)', 'cmb2' ),
        'id'               => $prefix . 'radioimg',
        'type'             => 'radio_image',
        'options'          => array(
            'full-width'    => __('Full Width', 'cmb2'),
            'sidebar-left'  => __('Left Sidebar', 'cmb2'),
            'sidebar-right' => __('Right Sidebar', 'cmb2'),
        ),
        'images_path'      => get_template_directory_uri(),
        'images'           => array(
            'full-width'    => 'images/content_no_sid.png',
            'sidebar-left'  => 'images/content_sid_left.png',
            'sidebar-right' => 'images/content_sid_right.png',
        )
    ) );

Add to composer repository

Please add your add-on in composer