Displaying Redux framework slider options in frontpage

I code above to display my slides on header,but its 100% with and height now,so i want to add to redux option panel option to rezise my slider images to size i need.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <?php global $ro_settings;?>
                    <?php $i = 0; ?>
                    <?php foreach( $ro_settings['slides'] as $slide )  : ?>
                    <?php if ( $i == 0 ) : ?>
                    <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>" class="active"></li>
                <?php else : ?>
                <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>"></li>
            <?php endif; ?>
            <?php $i++; ?>
        <?php endforeach; ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <?php $i = 0; ?>
        <?php foreach( $ro_settings['slides'] as $slide ) : ?>
        <?php if ( $i == 0 ) : ?>
        <div class="item active">
        <?php else : ?>
        <div class="item">
        <?php endif; ?>

        <img src="<?php echo $slide['image']; ?>" alt=""/>
        <div class="carousel-caption">
            <h1><?php echo $slide['title']; ?></h1>
            <p><?php echo $slide['description']; ?></p>
        </div>
    </div>
    <?php $i++; ?>
<?php endforeach; ?>

and on options panel code

    /* Slider */
$this->sections[] = array(
            'icon'      => 'el el-picture',
            'title'     => __('Slider', 'wpdf'),
            'fields'    => array(
        array(
            'id'        => 'slides',
            'type'      => 'slides',
            'title'     => __('Slider Options', 'wpdf'),
            'subtitle'  => __('Add slider images.', 'wpdf'),
            'desc'      => __('Note: Allowed extensions are .jpg, .png and .gif', 'wpdf'),
            'placeholder'   => array(
            'title'         => __('This is a title', 'wpdf'),
            'description'   => __('Description Here', 'wpdf'),
            'url'           => __('Give us a link!', 'wpdf'),
            ), 
        ), 
             array(
            'id'        =>'slider_width',
            'type'      => 'slider',       
            'title'     => __('Slider Width', 'wpdf'), 
            'subtitle'  => __('Specify your slider width.', 'wpdf'),
            'validate'  => 'numeric',
            "min"       => "50",
            "step"      => "1",
            "max"       => "1200",
            'default'   => "1200"          
            ),
        array(
            'id'        =>'slider_height',
            'type'      => 'slider',       
            'title'     => __('Slider Height', 'wpdf'), 
            'subtitle'  => __('Specify your slider height.', 'wpdf'),
            'validate'  => 'numeric',
            "min"       => "300",
            "step"      => "1",
            "max"       => "600",
            'default'   => "500"          
            ),

        ),
     );

how can i get with and height values for my slides

i tried

<?php $i = 0; ?>
            <?php foreach( $ro_settings['slides'] as $slide ) : ?>
            <?php $slider_width = ro_get_option( 'slider_width', '1200' ); $slider_width = ro_get_option( 'slider_width', '1200' ); ?>
            <?php $slider_slider_height = ro_get_option( 'slider_height', '500' ); $slider_height = ro_get_option( 'slider_height', '500' ); ?>
            <?php if ( $i == 0 ) : ?>
            <div class="item active">
            <?php else : ?>
            <div class="item">
            <?php endif; ?>

            <img src="<?php echo $slide['image']; ?>" alt=""/>
            <div class="carousel-caption">
                <h1><?php echo $slide['title']; ?></h1>
                <p><?php echo $slide['description']; ?></p>
            </div>
        </div>
        <?php $i++; ?>
    <?php endforeach; ?>

but this wont get me nothing,slide size wont change

Solution

maybe the following solution works for you - I DID NOT test it (please tell me if it works):

Informational: Redux Slides are using the standard Wordpress Media Upload, that's a big effort, and we're going to use it!
Now we start coding: First of all get it done responsive - drop the following code to your functions.php

add_image_size( 'small', 640, 9999 ); // I am using it @media only screen and (max-width: 40em) { } max-width 640px, mobile-only styles

set_post_thumbnail_size(640, 9999); add_image_size( 'medium', 1024, 9999 ); // I am using it @media only screen and (min-width: 40.063em) and (max-width: 64em) { } min-width 641px and max-width 1024px

set_post_thumbnail_size(1024, 9999); add_image_size( 'large', 1440, 9999 ); // I am using it @media only screen and (min-width: 64.063em) and (max-width: 90em) { } min-width 1025px and max-width 1440px

set_post_thumbnail_size(1440, 9999); add_image_size( 'xlarge', 1920, 9999 ); // I am using it @media only screen and (min-width: 90.063em) and (max-width: 120em) { } min-width 1441px and max-width 1920px set_post_thumbnail_size(1920, 9999);

Wordpress will now, when you upload an image, create multiple images at once with the screensices you definded above. The "9999" means that i only want the width (fe 640px) and the height should be dynamic. So this means, you upload a suuuuuper large image and wordpress resizes (not cropping!) it to be only 640px width.

You can now access your images with the regarding string, so for example use the following php hook:

wp_get_attachment_image_src($image, 'medium') // Medium is the name of the image set we created with a width of 1024px - look at the code above;

Thats it. To wrap up: You can add a custom image size to wordpress using the add_image_size & the set_post_thumbnail_size You can access the new width by calling it as an argument.

Hope this helps, I tried to be so detailed as possible. Tell me if you have further problems!