¿Cómo mostrar una sola imagen de código abreviado personalizado en visual composer en wordpress?

2 minutos de lectura

Estoy tratando de mostrar archivos personalizados creados por mí en Visual Composer usando códigos cortos personalizados. Estos códigos abreviados personalizados funcionan bien cuando estoy trabajando con el encabezado y el texto area_html, pero ahora quiero agregar una sola imagen en este código de clasificación, pero como resultado no obtengo la imagen, muestra el atributo alt y en el back-end estoy mostrando mi imagen única que se almacena en el campo de código abreviado personalizado. aquí estoy incluyendo mi código.

1) código para crear shortcode personalizado

vc_map( array(
    'name' => __( 'trionn_header' ),
    'base' => 'trionn_header',
    'category' => ( 'trionn code' ),
    'params' => array(
                "type" => "attach_image",
            "holder" => "img",
            "class" => "",
            "heading" => __( "Hintergrundbild", "my-text-domain" ),
            "param_name" => "image_url",
            "value" => __( "", "my-text-domain" ),
            "description" => __( lade eins hoch", "my-text-domain" )
        )
) );

2) código en un archivo de nombre de función separado

<?php
/* Ordered List shortcode */
if (!function_exists('trionn_header')) {
    function trionn_header($atts, $content) {
           $atts = shortcode_atts(
            array(
                'image_url' => ''
            ), $atts, 'trionn_header'
        );

        $imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 

        $html="<img src="" . $imageSrc[0] .'" alt="' . $atts['title'] . '"/>';
        return $html;
        }

    add_shortcode('trionn_header', 'trionn_header');
}

  • dar más detalles sobre su pregunta

    – Avi

    10 de agosto de 2017 a las 9:27

  • Todos los detalles se proporcionan en cuestión con código.

    usuario8443350

    10 de agosto de 2017 a las 13:35


Encontré una solución para tu pregunta, prueba esto en tu código

En la etiqueta param, escriba esta matriz después del atributo principal param:

array(
                "type" => "attach_image",
                "heading" => "Image",
                "param_name" => "image",
                'admin_label' => true
            )

pegue el siguiente código en su archivo function_name:

<?php
// Trionn header custom code // 
if (!function_exists('trionn_header')) {

    function trionn_header($atts, $content = null) {
        $args = array(
            'title' => __( 'This is the custom shortcode' ),
            'title_color' => '#000000',
            'content' => 'your discrption here',
            "image"             => "",
        );

        extract(shortcode_atts($args, $atts));

        //init variables
        $html               = "";
        $image_classes      = "";
        $image_src          = $image;

        if (is_numeric($image)) {
            $image_src = wp_get_attachment_url($image);
        }


        // generate output for heading and discription
        $html="<h1 class="trionn header " . $atts['style']. '" style="color: ' . $atts['title_color'] . '">'. $atts['title'] . '</h1>'.   "<div class=content>" . $content . "</div>";

        // generate output for single image
        $html .= "<img itemprop='image' class="{$image_classes}" src="https://stackoverflow.com/questions/45606578/{$image_src}" alt="" style="{$images_styles}" />";

        return $html;
    }
    add_shortcode('trionn_header', 'trionn_header');
}

Disfruta, agradéceme más tarde

¿Ha sido útil esta solución?