Visual Composer creazione di shortcode personalizzati con vc_map() per restituire una semplice immagine

Question

Visual Composer creazione di shortcode personalizzati con vc_map() per restituire una semplice immagine

19 lug 2015, 19:18:42

Visualizzazioni: 17.1K

Voti: 0

Sto utilizzando il plugin Visual Composer in un nuovo tema che sto sviluppando. La mia domanda riguarda il mapping degli shortcode agli array di Visual Composer.

Il problema che sto riscontrando è quando provo a creare un elemento personalizzato per un'immagine. Ecco cosa ho fatto:

Ho creato un file PHP vc_shortcodes.php per i miei array di parametri. Gli shortcode corrispondenti si trovano in functions.php.

Per il tipo di array textarea_html tutto funziona correttamente e posso vedere il mio testo come previsto nel front-end.

Ora sto provando a usare un array con tipo attach_image. Ecco il codice:

// Immagine
add_action( 'vc_before_init', 'webnuts_bild' );
function webnuts_bild() {
    vc_map( array(
        "name" => __( "Immagine", "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" => __( "Contenuto", "my-text-domain"),
        "params" => array(
            array(
                "type" => "attach_image",
                "holder" => "img",
                "class" => "",
                "heading" => __( "Immagine di sfondo", "my-text-domain" ),
                "param_name" => "image_url",
                "value" => __( "", "my-text-domain" ),
                "description" => __( "Seleziona un'immagine qui o caricala", "my-text-domain" )
            )
        )
    ) );
}

Funziona fin qui, posso selezionare l'elemento nel backend e allegare un'immagine. Ma credo di fare qualcosa di sbagliato in functions.php...

Ecco il codice che sto usando in functions.php:

add_shortcode( 'image_url', 'bild_func' );
function bild_func( $atts ) {
    extract( shortcode_atts( array(
        'image_url' => "L'immagine non viene visualizzata correttamente"
    ), $atts ) );

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

Questo è ciò che viene restituito nel browser:

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

Cosa devo modificare per far sì che l'immagine venga visualizzata correttamente nel browser?

webnuts.io

11

funzioni immagini shortcode

Tutte le risposte alla domanda

Commenti

Aggiungi una spiegazione sul perché questa soluzione risolve il problema - grazie.

Nicolai Grossherr

24 set 2015 15:06:01

Ok sembra abbastanza semplice! Proverò a farlo.

webnuts.io

25 set 2015 14:51:29

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

Visual Composer aggiunge l'ID dell'immagine allo shortcode generato. Questo ti offre maggiore flessibilità con le dimensioni delle immagini. Puoi utilizzarlo in questo modo:

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

Il parametro thumbnail può essere sostituito con medium o un'altra dimensione valida per le immagini. La clausola if serve a verificare che l'immagine esista realmente (non sia stata cancellata).

Consiglio: Rinomina il param_name in image_id per evitare confusione quando utilizzerai il codice in seguito.

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

Raffael Lima

21

24 set 2015 14:02:27

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

Utilizza l'URL dell'immagine tramite il tuo ID di allegato già mostrato. Quindi usa semplicemente wp_get_attachment_image_src per ottenere l'URL dell'allegato. Come:

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

    /* Otteniamo l'URL da quell'immagine */
    if(isset($a['image_url'])) {
       $image_url = wp_get_attachment_image_src( $a['image_url'], 'full' );;
     } else {
       $image_url = ''; // immagine predefinita o qualcosa se lo desideri.
     }

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

Spero sia chiaro!

mlimon

400

30 set 2016 19:08:46

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

Visual Composer fa la cosa giusta fornendo l'ID dell'immagine perché puoi ottenere l'immagine nella dimensione migliore per le tue esigenze. Puoi farlo in questo modo:

// Sostituisci 'thumbnail' con qualsiasi dimensione di immagine valida di WordPress.
$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 
// Controlla se l'immagine è ancora presente
if( $imageSrc ) {
    echo '<img src="' . $imageSrc[0] . '" />';
}

Potresti anche rinominare il 'param_name' in 'vc_map' in 'image_id' per comprendere meglio il codice in seguito.

Philipp Schreiber

1

13 dic 2016 14:07:47