Need an image from url shortcode WordPress
- SOLVED
I need a shortcode that allows me to pull in an image from a certain url.
I already know that code such as this:
function og_img($atts, $content = null) {
extract(shortcode_atts(array("src" => ''), $atts));
return '<img src="' . $src . '" alt="'. do_shortcode($content) .'" />';
}
add_shortcode('img', 'og_img');
Will let me do a shortcode like this:
[img src="https://outergain.com/images/whatever.jpg"] this is alt text [/img]
But I don't want it that way. I want to specify only the short code on the page. So something like this:
[og_image]
Would place the entire <img src="..." alt="..."> line in there.
Hopefully that makes sense.
Answers (7)
Cesar Contreras answers:
What will be the source of your image, where will it be taken, will it be taken from the highlighted image of the post or page?
Dario Ferrer answers:
Hello. Let's suppose this is you image URL:
http://www.my-website.com/wp-content/themes/my-themes/images/image.jpg
And you only want the shortcode [og_image] to show that image.
Copy the following code in your theme's funtions.php file. Be sure to point right the image URL (into the variable $path):
add_shortcode( 'og_image' , 'the_og_img' );
function the_og_img() {
$imgurl = trailingslashit( get_stylesheet_directory_uri() ) . 'images/image.jpg';
return '<img src="'. $imgurl .'" alt="Image" />';
}
$path also can be a static url. When you update the URL, be sure to check the wrapper quotes, like this:
$path = 'http://www.my-website.com/wp-content/themes/my-themes/images/image.jpg';
kyler boudreau comments:
Thanks! This is what worked based on your answer:
add_shortcode( 'og_image' , 'the_og_img' );
function the_og_img() {
$imgurl = 'http://www.my-website.com/wp-content/themes/my-themes/images/image.jpg';
return '<img src="'. $imgurl .'" alt="Image" />';
}
Dario Ferrer comments:
Excellent Mr. Kyler, you're welcome. Glad to help. If you have an issue just let me know.
Cesar Contreras comments:
Good. You wanted to show a static image.
Tip: You can omit the variable and enter the url directly in the "SRC"
return '<img src="http://www.my-website.com/wp-content/themes/my-themes/images/image.jpg" alt="Image" />';
it will not affect the operation at all, simply because it is a line of code less and because it is not necessary to use variables.
Dario Ferrer comments:
Hi Cesar:
1) Thinking that "is a line of code less" is better for programming, is not a good practice. That's a WordPress image URL, maybe Kyler will find better ways soon for print it.
2) Also the variable is for comfort, especially if the URL needs to be written in a dynamic way, so for him it's better to do this...
$imgurl = 'http://www.my-website.com/wp-content/themes/my-themes/images/image.jpg';
// Then...
return '<img src="'. $imgurl .'" alt="Image" />';
... than this
return '<img src="'. trailingslashit( get_stylesheet_directory_uri() ) .'images/image.jpg" alt="Image" />';
// or...
return '<img src="http://www.my-website.com/wp-content/themes/my-themes/images/image.jpg" alt="Image" />';
Shrinking the long version of code is a good practice.
Farid answers:
So "Kyler Boudreau" the question is solved? Or let us know if you still need an improvement in it?
kyler boudreau comments:
yes it was solved - I marked the 3 stars by the winner. is there something else i need to do?
Rempty answers:
Hello
But what image is going to show if your shortcode don't have a url parameter?
If the url will not change you can use
function og_image_func( $atts ){
return '<img src="here_the_src" alt="here_the_alt" >';
}
add_shortcode( 'og_image', 'og_image_func' );
isp_charlie answers:
you can use featured image for this:
function og_img($atts, $content = null) {
extract(shortcode_atts(array("src" => '','featured'='no'), $atts));
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
if(featured=='yes'){
$src = $image[0];
}
return '<img src="' . $src . '" alt="'. do_shortcode($content) .'" />';
}
add_shortcode('img', 'og_img');
// use:
[og_image featured='yes' ] or [og_image src ='url_custom_image' ]
Echeverri answers:
Congratulations, excellent solution, other option is:
return '<img src="'. trailingslashit( get_stylesheet_directory_uri() ) .'images/image.jpg" alt="Image" />';
// or...
return '<img src="http://www.my-website.com/wp-content/themes/my-themes/images/image.jpg" alt="Image" />';