Adding an Image In Custom Slides that will loop

I would like to add a  Jpeg into the custom slides.  For Example,  I run announcements through custom slides at the beginning of the service.  These announcements loop, but I would like to incorporate some images (Like "Welcome to Our Service" or special Slides that are different than the theme).  Any idea on how to put an image in a loop with custom slides?   I know I can do this by using the Image tool, and firing each item manually within the service manager, but would be much easier if everything pre-service was on auto pilot for us.  Thanks, and looking forward to suggestions.


  • This is currently not possible, but it is a known feature request.
  • I just saw this.  It is possible to insert images into Custom Slides, but it's a bit of a workaround.  Remember that custom slides get rendered as HTML pages, so technically they can do everything HTML can if you're willing to put in the work.

    We added a Custom Formatting Tag (Settings -> Configure Formatting Tags).  You can give it whatever name & description you like (we named ours img).  The Start HTML part is <img src="file:///C:/Users/NCF-AV/Documents/OpenLP/Images/ and the End HTML is "/>

    To insert the image, we use something like {img}picture-name.jpg{/img} in the Custom Slide.

    Note: This is just a basic HTML command to insert an image with quotes put around the path name. We put all our OpenLP images in one folder, so the above works for us.  Your path is guaranteed to be different, so make sure to change it.  You don't have to put the full path in the custom tag, but if you don't you'll have to specify the path in the Custom Slide itself.

  • Great workaround, thank you.  I am halfway there!  I used your method and am seeing the image on the slide, but it is formatted for the Theme I am using.  Do you have a way of overriding the theme's formatting so the the particular image take up the full screen?  Thanks!
  • I haven't tried that yet, but it should be possible.

    You'll need to apply some CSS formatting to both make the image fullscreen and to position it at the top-left of the screen.  If you're unfamiliar with CSS, I highly suggest you google it and read up so that it makes sense to you and so you can tweak it as needed in the future.  Note that if you leave out the part that moves the image, the theme will position the picture where text would normally show up, and the pic would likely get pushed off the side/bottom of the screen.

    Off the top of my head - I'm not at our OpenLP computer to try it out - you'd want to use something like style="position:absolute; left:0; top:0; width:100%; height:100%;" to make it fullscreen and properly positioned.
  • edited April 2017
    @milon How would I apply the style to my tag? and when you say that custom slides are rendered in HTML does that include HTML5?

    edit: I figured out how to add the style (it ended up in the end html box). but I'm still curious about the HTML5 question

  • @tcawrse, I don't know about HTML5.  I doubt that advanced features of HTML5 would work properly in OpenLP, but the only way to know is to test it and see if it works.  I don't use any HTML5 in OpenLP (or anywhere else) so I really can't say.

    In case it helps other users, the style is added to the Custom Formatting tag similar to my first comment above.
  • @milon, I have tried your html code. It works on my openLP I'm windows 10, but does not work in my OpenLP in windows 7. The same exact code. What could be wrong?? Any ideas?
Sign In or Register to comment.