Visual Composer erstellt eigene Shortcodes mit vc_map (), um ein einfaches Image zurückzugeben

Ich verwende das Plugin Visual Composer mit einem neuen Theme, das ich entwickle. Meine Frage bezieht sich auf die Zuordnung von Shortcodes zu Visual Composer-Arrays.

Das Problem, das ich erhalte, wenn ich versuche, ein benutzerdefiniertes Element für ein Bild zu erstellen. Also hier ist was ich getan habe:

Ich habe eine PHP-Datei vc_shortcodes.php für meine params-Arrays erstellt. Die passenden Shortcodes sind in functions.php .

Für den Array-Typ textarea_html funktioniert alles textarea_html und ich kann mir den Text so ansehen wie er am Frontend vermutet wird.

Jetzt versuche ich ein Array mit dem Typ attach_image . Es ist das Folgende:

 /Bild add_action( 'vc_before_init', 'webnuts_bild' ); function webnuts_bild() { vc_map( array( "name" => __( "Bild", "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" => __( "Content", "my-text-domain"), "params" => array( array( "type" => "attach_image", "holder" => "img", "class" => "", "heading" => __( "Hintergrundbild", "my-text-domain" ), "param_name" => "image_url", "value" => __( "", "my-text-domain" ), "description" => __( "Bitte wähle hier ein Bild aus oder lade eins hoch", "my-text-domain" ) ) ) ) ); } 

Es funktioniert soweit, dass ich das Element im Backend auswählen und ein Bild anhängen kann. Aber ich denke, ich mache etwas falsch in der functions.php

Ich bin mir sicher, dass ich in functions.php etwas falsch mache … Dort verwende ich folgendes:

 add_shortcode( 'image_url', 'bild_func' ); function bild_func( $atts ) { extract( shortcode_atts( array( 'image_url' => 'Bild wird nicht richtig angezeigt' ), $atts ) ); return "
"; }

Dies wird im Browser zurückgegeben:

 

Was muss ich ändern, damit das Bild im Browser angezeigt wird?

Solutions Collecting From Web of "Visual Composer erstellt eigene Shortcodes mit vc_map (), um ein einfaches Image zurückzugeben"

Visual Composer fügt dem generierten Shortcode die Image-ID hinzu. Dies gibt Ihnen mehr Flexibilität bei den Bildgrößen. Du kannst es so benutzen:

 $imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); if( $imageSrc ) { echo ''; } 

Der thumbnail Parameter könnte durch ein medium oder eine andere gültige Bildgröße ersetzt werden. Die if Klausel soll sicherstellen, dass das Bild wirklich da ist (nicht gelöscht).

param_name image_id Sie den param_name in image_id damit Sie bei der späteren Verwendung des Codes nicht verwirrt werden.

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

Verwenden Sie Ihre Bild-URL mit Ihrer bereits angezeigten Anhangs-ID. Verwenden Sie also wp_get_attachment_image_src , um die Anhangs-URL zu erhalten. mögen:

 add_shortcode( 'image_url', 'bild_func' ); function bild_func( $atts ) { extract( shortcode_atts( array( 'image_url' => '' ), $atts ) ); /* Let's get the URL from that image */ if(isset($a['image_url'])) { $image_url = wp_get_attachment_image_src( $a['image_url'], 'full' );; } else { $image_url = ''; // default image or something if you want. } return "
"; }

Hoffe es ergibt Sinn!

Visual Composer macht das Richtige mit der Bereitstellung der Image-ID, da Sie das Image in der für Ihre Anforderungen optimalen Größe erhalten. Du könntest es so machen:

 // Replace 'thumbnail' with any valid wordpress image size. $imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail'); // Check if the image is still there if( $imageSrc ) { echo ''; } 

Sie könnten auch den Parameter ‘param_name’ in ‘vc_map’ in ‘image_id’ umbenennen, damit Sie den Code später verstehen.