WordPress Change Post Templates,but not drop down, but Image selection

I browsed WordPress Codex, and I find something like this →

function is_page_template( $template="" ) {
    $page_template = get_page_template_slug( get_queried_object_id() );


if ( empty( $template ) )
    return (bool) $page_template;

if ( $template == $page_template )
    return true;

if ( is_array( $template ) ) {
    if ( ( in_array( 'default', $template, true ) && ! $page_template )
        || in_array( $page_template, $template, true )
    ) {
        return true;
    }
}

return ( 'default' === $template && ! $page_template );
}

I think If we paste the above in our functions.php then we will have posts template options, Right?

but what if we want template selection of post type with images like this → This is an image from genesis post page backend.

Does WordPress provide such arrangements? I am a beginner so could not understand How can I accomplish this?

Although the logic is clear to me →

Step 1: Create Meta in the backend that will have some selection options like this →

** Step 2 **→
we have to connect our option selected in this meta somehow to print a class.
For example, let u assume the images are in order then if second selected (second image) then echo “sidebar-wrap2”, which is a class.

Currently, this is the HTML →

<aside class="main-sidebar col">
    <?php dynamic_sidebar( 'sidebar1' ); ?>
</aside>





<aside class="main-sidebar col <?php If certain condition true {echo "sidebar-wrap2"} ?> ">
    <?php dynamic_sidebar( 'sidebar1' ); ?>
</aside>

Although I do not know what this certain condition will be, and how to write that.

I am a novice in coding so please do forgive meIf I am unable to present my question correctly. Thanks!

This is a in-depth feature you are trying to achieve but I have listed some information below that will help you on your way to work on adding this feature.

1. Build a custom meta_box with your options for post type create a meta box is a good starting point you will be able to google more for other samples
2. Creating an image radio buttonRadio button images
3. You would need to pull this option in your post display area and check what option was saved to display the correct layout you desire

You will need to include some sort of code like below where your returning your post/s if in single.php so on but I would add this page as a child theme if your not the theme author for future updates.

// Get our option for post ID from the options meta box change "$field_name" to your option name you use in the meta box
$post_id = get_post_meta(get_the_ID(),$field_name,true);

// Check our option and change the display to what option is set

if($post_id == 'sidebar1'){
  dynamic_sidebar( 'sidebar1' );
}
if($post_id == 'sidebar2'){
  dynamic_sidebar( 'sidebar2' );
}
else{
 // Added for when an option is not set
}

UPDATE 2:

Here is a plugin code that will create the meta box and add the image radio button set and save the data it also set the border red on the selected option if there is one fully working. You will also want to do some of the below for using this on a live site.

1. Save the code in a php file and add into a folder ready for uploading to a site
2. Edit the plugin details and also default code such as custom_meta_box_markup
3. Enque the css into a separate file and also use image folder and then link to your own images

The code:

<?php
    /**
    * Plugin Name: Post options panel
    * Plugin URI: url to plugin
    * Description: Adds posts options layout
    * Version: 1.0
    * Author: My name
    * Author URI: My url
    * License: A "Slug" license name e.g. GPL12
    */

    // Dont call me direct!
    if ( ! defined( 'ABSPATH' ) ) exit;




    // Create content
    function custom_meta_box_markup($object)
    {
        wp_nonce_field(basename(__FILE__), "meta-box-nonce");

        ?>

    <style>
    label > input{ /* HIDE RADIO */
      visibility: hidden; /* Makes input not-clickable */
      position: absolute; /* Remove input from document flow */
    }
    label > input + img{ /* IMAGE STYLES */
      cursor:pointer;
      border:2px solid transparent;
    }
    label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
      border:2px solid #f00;
    }
    </style>



            <div>

                <h4>Radio options</h4>
                <?php
                    // U need to use this to set the checked="checked"
                    $checkbox_value = get_post_meta($object->ID, "meta-box-radio", true);
                ?>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar1"<?php if($checkbox_value == 'sidebar1'){echo 'checked =\"checked\"';} ?> /><img src="https://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar2" <?php if($checkbox_value == 'sidebar2'){echo 'checked =\"checked\"';} ?>/><img src="https://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>
                           <label>
                           <input type="radio" name="meta-box-radio" value="sidebar3" <?php if($checkbox_value == 'sidebar3'){echo 'checked =\"checked\"';} ?>/><img src="https://3.bp.blogspot.com/-J7zDitJOPZs/VhysC9I9n7I/AAAAAAAAERk/fAMHsC2fiGI/s1600/grey_new_seo-18-512.png" style="height: 20px; width: 20px;"></label>

            </div>
    <?
    }


    // Saving data
    function save_custom_meta_box($post_id, $post, $update)
    {
        if (!isset($_POST["meta-box-nonce"]) || !wp_verify_nonce($_POST["meta-box-nonce"], basename(__FILE__)))
            return $post_id;

        if(!current_user_can("edit_post", $post_id))
            return $post_id;

        if(defined("DOING_AUTOSAVE") && DOING_AUTOSAVE)
            return $post_id;

        $slug = "post";
        if($slug != $post->post_type)
            return $post_id;



        if(isset($_POST["meta-box-radio"]))
        {
            $meta_box_value = $_POST["meta-box-radio"];
        }
        update_post_meta($post_id, "meta-box-radio", $meta_box_value);

    }

    add_action("save_post", "save_custom_meta_box", 10, 3);


    function add_custom_meta_box()
    {
        add_meta_box("demo-meta-box", "Custom Meta Box", "custom_meta_box_markup", "post", "normal", "high", null);
    }

    add_action("add_meta_boxes", "add_custom_meta_box");

Here is the code that you can use to get the option saved

// Get our option for post ID from the options meta box change "$field_name" to your option name you use in the meta box
$post_option = get_post_meta(get_the_ID(),"meta-box-radio",true);

// Check our option and change the display to what option is set

    if($post_option == 'sidebar1'){
      dynamic_sidebar( 'sidebar1' );
    }
    if($post_option == 'sidebar2'){
      dynamic_sidebar( 'sidebar2' );
    }
    else{
     // Added for when an option is not set
    }