Insert image in step

Hi @brovreizh ,
Thank you for using the Simple Tour Guide plugin. At this point, you can only store text in the plugin settings, however, it is absolutely possible to add any type of html code to a specific step with just a little bit of javaScript. Here is a quick example of what you can do:
1. Go to the plugin’s settings page and assign a custom classname to the step you want to target, let’s call the step “append-html-to-step”.

Image One: Add custom class to the step

2. Install the Simple Custom CSS and JS plugin. It will empower you to easily add js code.

3. Add the following js code (use the plugin that we have just installed):

jQuery(document).ready(function( $ ){
  setTimeout( function(){
      	$( ".shepherd-button" ).click(function() {
        $( ".append-html-to-step .shepherd-text" ).append( "<p>Html code.</p>" );
	});
  }, 300);
});

Image Two: Add js code in the plugin

Now, when you fire the tour again, you should be able to see the appended html code in the description of the step that we targeted. You can do something very similar to append an image. Please also check this thread how to append an image with javaScript: https://stackoverflow.com/questions/941206/jquery-add-image-inside-of-div-tag

P.S: Do not forget to add the correct url of the image in the src tag. You can simply upload an image in the Media tab, copy the full url, paste it in the src tag and you are good to go!

Hope this helps!

For those of you who might be looking for a less tech-savy solution – since version 1.1.0 there is no need to follow the last comment and add any code – you can now use the WordPress HTML editor directly in the step creation process. The only thing that you need to do is to enable it via the options tab: Image One: Option to Use TinyMCE / WYSIWYG HTML Editor After that, you will be able to easily upload an image or format the text from a friendly user admin interface. Image 2: Use the HTML Editor to upload images or format the text.If you want, you can now also add custom html directly to the step description, even without using the above option. Finally, if you would like to keep things as they were and do not want to mess with html editors – this is also fine, the good old simple screen will contuinue to work just fine. Cheers!

• This reply was modified 2 years, 11 months ago by Atanas Yonkov.
• This reply was modified 2 years, 11 months ago by Yui.