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 Media Upload，这是一项很大的努力，我们将继续使用它！
现在我们开始编码：首先让它完成响应 - 将以下代码放到您的functions.php

add_image_size（＆＃39; small＆＃39;，640,9999）; //我正在使用@media only屏幕和（max-width：40em）{} max-width 640px，仅限移动设备风格

set_post_thumbnail_size（640,9999）; add_image_size（＆＃39; medium＆＃39;，1024,9999）; //我正在使用@media only screen和（min-width：40.063em）和（max-width：64em）{} min-width 641px和max-width 1024px

set_post_thumbnail_size（1024,9999）; add_image_size（＆＃39; large＆＃39;，1440,9999）; //我正在使用@media only screen和（min-width：64.063em）和（max-width：90em）{} min-width 1025px和max-width 1440px

set_post_thumbnail_size（1440,9999）; add_image_size（＆＃39; xlarge＆＃39;，1920,9999）; //我正在使用@media only screen和（min-width：90.063em）和（max-width：120em）{} min-width 1441px和max-width 1920px set_post_thumbnail_size（1920,9999）;

Wordpress现在，当您上传图像时，使用您在上面定义的屏幕一次创建多个图像。＆＃34; 9999＆＃34;意味着我只想要宽度（fe 640px），高度应该是动态的。所以这意味着，你上传一个suuuuuper大图像和wordpress调整大小（不裁剪！）它只有640px宽。

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

wp_get_attachment_image_src（$ image，＆＃39; medium＆＃39;）// Medium是我们创建的宽度为1024px的图像集的名称 - 请查看上面的代码;

多数民众赞成。总结：您可以使用add_image_size＆amp;添加自定义图像大小到wordpress。 set_post_thumbnail_size 您可以通过将其作为参数调用来访问新宽度。

希望这有帮助，我尽量做到尽可能详细。告诉我你是否还有其他问题！

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

1 个答案: