Cómo crear shortcodes personalizados en Visual Composer para mostrar imágenes correctamente

Question

Cómo crear shortcodes personalizados en Visual Composer para mostrar imágenes correctamente

19 jul 2015, 19:18:42

Vistas: 17.1K

Votos: 0

Estoy usando el plugin Visual Composer en un nuevo tema que estoy desarrollando. Mi pregunta es sobre cómo mapear shortcodes a arrays de Visual Composer.

El problema que tengo ocurre cuando intento crear un elemento personalizado para una imagen. Esto es lo que he hecho:

He creado un archivo PHP vc_shortcodes.php para mis arrays de parámetros. Los shortcodes correspondientes están en functions.php.

Para el tipo de array textarea_html todo funciona correctamente y puedo ver mi texto como se espera en el front-end.

Ahora estoy intentando usar un array con tipo attach_image. Es el siguiente:

// Imagen
add_action( 'vc_before_init', 'webnuts_bild' );
function webnuts_bild() {
    vc_map( array(
        "name" => __( "Imagen", "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" => __( "Contenido", "my-text-domain"),
        "params" => array(
            array(
                "type" => "attach_image",
                "holder" => "img",
                "class" => "",
                "heading" => __( "Imagen de fondo", "my-text-domain" ),
                "param_name" => "image_url",
                "value" => __( "", "my-text-domain" ),
                "description" => __( "Por favor selecciona una imagen aquí o sube una nueva", "my-text-domain" )
            )
        )
    ) );
}

Funciona hasta el punto de que puedo seleccionar el elemento en el backend y adjuntar una imagen. Pero creo que estoy haciendo algo mal en el functions.php

Estoy seguro que estoy cometiendo un error en functions.php... Allí uso lo siguiente:

add_shortcode( 'image_url', 'bild_func' );
function bild_func( $atts ) {
    extract( shortcode_atts( array(
        'image_url' => 'La imagen no se muestra correctamente'
    ), $atts ) );

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

Esto es lo que devuelve en el navegador:

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

¿Qué debo cambiar para que la imagen se muestre correctamente en el navegador?

webnuts.io

11

funciones imágenes shortcode

Todas las respuestas a la pregunta

Comentarios

Por favor agrega una explicación de por qué esto soluciona el problema - gracias.

Nicolai Grossherr

24 sept 2015 15:06:01

¡Ok, parece ser sencillo! Voy a intentarlo.

webnuts.io

25 sept 2015 14:51:29

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

Visual Composer agrega el ID de la imagen al shortcode generado. Esto te brinda mayor flexibilidad con los tamaños de imagen. Puedes usarlo de la siguiente manera:

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

El parámetro thumbnail puede ser reemplazado por medium u otro tamaño de imagen válido. La cláusula if está ahí para verificar que la imagen realmente exista (no haya sido eliminada).

Consejo: Cambia el nombre de param_name a image_id para evitar confusiones al usar el código más adelante.

Fuente: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

Raffael Lima

21

24 sept 2015 14:02:27

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

Utiliza la URL de tu imagen mediante el ID de adjunto que ya se muestra. Así que simplemente usa wp_get_attachment_image_src para obtener la URL del adjunto. Como:

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

    /* Obtengamos la URL de esa imagen */
    if(isset($a['image_url'])) {
       $image_url = wp_get_attachment_image_src( $a['image_url'], 'full' );;
     } else {
       $image_url = ''; // imagen por defecto o algo si lo deseas.
     }

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

¡Espero que tenga sentido!

mlimon

400

30 sept 2016 19:08:46

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

Visual Composer hace lo correcto al proporcionar el ID de la imagen porque puedes obtener la imagen en el mejor tamaño para tus necesidades. Podrías hacerlo así:

// Reemplaza 'thumbnail' con cualquier tamaño de imagen válido de WordPress.
$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 
// Verifica si la imagen aún está ahí
if( $imageSrc ) {
    echo '<img src="' . $imageSrc[0] . '" />';
}

También podrías renombrar el 'param_name' en 'vc_map' a 'image_id' para que entiendas mejor el código más adelante.

Philipp Schreiber

1

13 dic 2016 14:07:47