Создание собственных шорткодов в Visual Composer с vc_map() для вывода изображения

Question

Создание собственных шорткодов в Visual Composer с vc_map() для вывода изображения

19 июл. 2015 г., 19:18:42

Просмотры: 17.1K

Голосов: 0

Я использую плагин Visual Composer в новой теме, которую разрабатываю. Мой вопрос касается маппинга шорткодов в массивы Visual Composer.

Проблема возникает при попытке создать пользовательский элемент для изображения. Вот что я сделал:

Я создал php-файл vc_shortcodes.php для массивов параметров. Соответствующие шорткоды находятся в functions.php.

Для типа массива textarea_html все работает отлично, и мой текст корректно отображается на фронтенде.

Теперь я пытаюсь использовать массив с типом attach_image. Вот его код:

// Изображение
add_action( 'vc_before_init', 'webnuts_bild' );
function webnuts_bild() {
    vc_map( array(
        "name" => __( "Изображение", "my-text-domain" ),
        "base" => "image_url",
        "icon" => "icon-webnuts",
        'admin_enqueue_css' => array('/wp-content/themes/devdmbootstrap3-child/framework/css/admin-wn.css' ),
        "class" => "wn-bild",
        "category" => __( "Контент", "my-text-domain"),
        "params" => array(
            array(
                "type" => "attach_image",
                "holder" => "img",
                "class" => "",
                "heading" => __( "Фоновое изображение", "my-text-domain" ),
                "param_name" => "image_url",
                "value" => __( "", "my-text-domain" ),
                "description" => __( "Пожалуйста, выберите изображение или загрузите новое", "my-text-domain" )
            )
        )
    ) );
}

Это работает в том смысле, что я могу выбрать элемент в админке и прикрепить к нему изображение. Но, вероятно, я делаю что-то не так в functions.php.

Я уверен, что ошибка в functions.php... Вот что я использую:

add_shortcode( 'image_url', 'bild_func' );
function bild_func( $atts ) {
    extract( shortcode_atts( array(
        'image_url' => 'Изображение отображается некорректно'
    ), $atts ) );

    return "<div class='bild-wrapper'><img src='" . "{$image_url}" . "'/></div>";
}

В браузере возвращается следующее:

<div class="bild-wrapper">
    <img src="9">
</div>

Что мне нужно изменить, чтобы изображение корректно отображалось в браузере?

webnuts.io

11

функции изображения шорткод

Все ответы на вопрос

Комментарии

Пожалуйста, добавьте объяснение, почему это решает проблему - спасибо.

Nicolai Grossherr

24 сент. 2015 г. 15:06:01

Хорошо, это кажется простым! Я попробую.

webnuts.io

25 сент. 2015 г. 14:51:29

Raffael Lima 21 · Answer 1 · 2015-09-24T14:02:27Z

Visual Composer добавляет ID изображения в генерируемый шорткод. Это дает вам больше гибкости в работе с размерами изображений. Вы можете использовать это следующим образом:

$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail');
if( $imageSrc ) {
    echo '<img src="' . $imageSrc[0] . '" />';
}

Параметр thumbnail может быть заменен на medium или другой допустимый размер изображения. Условие if используется для проверки, что изображение действительно существует (не было удалено).

Совет: Переименуйте param_name в image_id, чтобы избежать путаницы при дальнейшем использовании кода.

Источник: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

mlimon 400 · Answer 2 · 2016-09-30T19:08:46Z

Используйте URL изображения по его ID вложения, которое уже отображается. Просто используйте функцию wp_get_attachment_image_src, чтобы получить URL вложения. Например:

add_shortcode( 'image_url', 'bild_func' );
function bild_func( $atts ) {
    extract( shortcode_atts( array(
        'image_url' => ''
    ), $atts ) );

    /* Получаем URL изображения */
    if(isset($a['image_url'])) {
       $image_url = wp_get_attachment_image_src( $a['image_url'], 'full' );;
     } else {
       $image_url = ''; // изображение по умолчанию или что-то еще, если нужно.
     }

    return "<div class='bild-wrapper'><img src='" . "{$image_url[0]}" . "'/></div>";
}

Надеюсь, это понятно!

Philipp Schreiber 1 · Answer 3 · 2016-12-13T14:07:47Z

Visual Composer правильно работает, предоставляя ID изображения, так как вы можете получить изображение в оптимальном размере для ваших нужд. Вы можете сделать это следующим образом:

// Замените 'thumbnail' на любой допустимый размер изображения WordPress.
$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 
// Проверяем, существует ли изображение
if( $imageSrc ) {
    echo '<img src="' . $imageSrc[0] . '" />';
}

Вы также можете переименовать 'param_name' в 'vc_map' на 'image_id', чтобы в дальнейшем было понятнее, что означает этот параметр.