在首页显示 Redux 框架滑块选项

Question

我在上面编写代码以在页眉上显示我的幻灯片，但现在它的高度是 100%，所以我想添加到 redux 选项面板选项以将我的滑块图像重新调整为我需要的大小。

<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; ?>

以及选项面板代码

    /* 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"          
            ),

        ),
     );

如何获取幻灯片的高度值

我试过了

<?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; ?>

但这不会给我带来任何好处，幻灯片大小不会改变

Answer 1

也许以下解决方案适合您 - 我没有测试它（请告诉我它是否有效）：

信息：Redux Slides 使用标准的 Wordpress 媒体上传，这是一个很大的努力，我们将使用它！
现在我们开始编码：首先让它响应式完成 - 将以下代码放到您的 functions.php

add_image_size( 'small', 640, 9999 ); // 我正在使用它 @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 ); // 我正在使用它 @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 ); // 我正在使用它 @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 ); // 我正在使用它 @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 将使用您在上面定义的屏幕一次创建多张图片。 “9999”意味着我只想要宽度（fe 640px）并且高度应该是动态的。所以这意味着，你上传了一个 suuuuuper 大图像和 wordpress 调整大小（不是裁剪！）它只有 640px 宽度。

您现在可以使用相关字符串访问您的图像，例如使用以下 php 挂钩：

wp_get_attachment_image_src($image, 'medium') // Medium 是我们创建的图像集的名称，宽度为 1024px - 看上面的代码；

就是这样。总结：您可以使用 add_image_size 和 set_post_thumbnail_size 将自定义图像大小添加到 wordpress 您可以通过将其作为参数调用来访问新宽度。

希望这对您有所帮助，我尽量描述得尽可能详细。如果您还有其他问题，请告诉我！

在首页显示 Redux 框架滑块选项

Displaying Redux framework slider options in frontpage

redux-framework