Cum să creezi shortcode-uri personalizate în Visual Composer cu vc_map() pentru imagini

Question

Cum să creezi shortcode-uri personalizate în Visual Composer cu vc_map() pentru imagini

19 iul. 2015, 19:18:42

Vizualizări: 17.1K

Voturi: 0

Folosesc plugin-ul Visual Composer într-o temă pe care o dezvolt. Întrebarea mea este despre maparea shortcode-urilor la array-uri în Visual Composer.

Problema apare când încerc să creez un element personalizat pentru o imagine. Iată ce am făcut:

Am creat un fișier PHP vc_shortcodes.php pentru array-urile mele de parametri. Shortcode-urile corespunzătoare sunt în functions.php.

Pentru tipul de array textarea_html totul funcționează corect și văd textul așa cum trebuie în frontend.

Acum încerc să folosesc un array cu tipul attach_image. Acesta este următorul:

// Imagine
add_action( 'vc_before_init', 'webnuts_bild' );
function webnuts_bild() {
    vc_map( array(
        "name" => __( "Imagine", "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" => __( "Conținut", "my-text-domain"),
        "params" => array(
            array(
                "type" => "attach_image",
                "holder" => "img",
                "class" => "",
                "heading" => __( "Imagine de fundal", "my-text-domain" ),
                "param_name" => "image_url",
                "value" => __( "", "my-text-domain" ),
                "description" => __( "Te rog selectează sau încarcă o imagine aici", "my-text-domain" )
            )
        )
    ) );
}

Funcționează până acum în sensul că pot selecta elementul în backend și atașa o imagine. Dar cred că fac ceva greșit în functions.php.

Sunt sigur că greșesc ceva în functions.php... Aici folosesc următoarele:

add_shortcode( 'image_url', 'bild_func' );
function bild_func( $atts ) {
    extract( shortcode_atts( array(
        'image_url' => 'Imaginea nu este afișată corect'
    ), $atts ) );

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

Iată ce este returnat în browser:

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

Ce trebuie să modific ca imaginea să fie afișată corect în browser?

webnuts.io

11

funcții imagini shortcode

Toate răspunsurile la întrebare

Comentarii

Te rog să adaugi o explicație de ce această soluție rezolvă problema - mulțumesc.

Nicolai Grossherr

24 sept. 2015 15:06:01

Ok, pare destul de simplu! O să încerc.

webnuts.io

25 sept. 2015 14:51:29

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

Visual Composer adaugă ID-ul imaginii în shortcode-ul generat. Acest lucru vă oferă mai multă flexibilitate cu dimensiunile imaginilor. Puteți folosi astfel:

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

Parametrul thumbnail poate fi înlocuit cu medium sau altă dimensiune validă a imaginii. Condiția if este acolo pentru a verifica dacă imaginea există cu adevărat (nu a fost ștearsă).

Sfat: Redenumiți param_name în image_id pentru a evita confuzia când utilizați codul mai târziu.

Sursa: 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

Folosește URL-ul imaginii prin ID-ul de atașament care este deja afișat. Deci folosește wp_get_attachment_image_src pentru a obține URL-ul atașamentului. Ca în exemplul următor:

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

    /* Obținem URL-ul din acea imagine */
    if(isset($a['image_url'])) {
       $image_url = wp_get_attachment_image_src( $a['image_url'], 'full' );;
     } else {
       $image_url = ''; // imagine implicită sau altceva dacă dorești.
     }

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

Sper că este clar!

mlimon

400

30 sept. 2016 19:08:46

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

Visual Composer face lucrurile corect prin furnizarea ID-ului imaginii, deoarece astfel poți obține imaginea în dimensiunea optimă pentru nevoile tale. Ai putea face astfel:

// Înlocuiește 'thumbnail' cu orice dimensiune validă de imagine din WordPress.
$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); 
// Verifică dacă imaginea există în continuare
if( $imageSrc ) {
    echo '<img src="' . $imageSrc[0] . '" />';
}

De asemenea, ai putea redenumi 'param_name' în 'vc_map' în 'image_id' pentru a înțelege mai ușor codul mai târziu.

Philipp Schreiber

1

13 dec. 2016 14:07:47