How can I add an image inside a shortcode

Question

I have an image displayed in the following manner:

<img src="<?php bloginfo('template_directory')?>/images/logo/logo.png">

Now, however, I want to create a shortcode that has an attribute and uses that same image inside it. So I tried the following:

add_shortcode('scrollTop', function(){ echo "<a href='#content' class='content'>"; echo "<img src='bloginfo('"template_directory"')/images/logo/logo.png'">; echo "skipping content"; echo "</a>"; });

Its a syntax error I assume, but am struggling to find a way around.

How can I add the image inside the shortcode?

Tom · Accepted Answer · 2019-06-06 10:50:04Z

Use the concatenation operator and correct single quotes inside the bloginfo function.

add_shortcode('scrollTop', function(){ echo "<a href='#content' class='content'>"; echo "<img src='" . bloginfo('template_directory') . "/images/logo/logo.png'>"; echo "skipping content"; echo "</a>"; });

Also make sure to not use echo inside your shortcode to display something. Use return instead. See this question for more information.

add_shortcode('scrollTop', function(){ return "<a href='#content' class='content'> <img src='" . bloginfo('template_directory') . "/images/logo/logo.png'> skipping content </a>"; });

For some reason the image does not show. First I noticed that the url comes out wrong so I tried to manually adding in the source but the image does not print. src='dev.example/sites/wordpress-staging/05/images/logo/logo.png'
The shortcode return a broken image as if such does not exist in the directory
I will upvote the question because the answer is correct. The issue am facing has to do with the url configuration. So am now having to the the full staging url in like: my.example.com/sites/wp-staging/05/wp-content/themes/themename/…

Collectives™ on Stack Overflow

How can I add an image inside a shortcode

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related