A method for inserting graphics into custom slides, or hymns

So currently OpenLP does not directly allow you to embed images within hymns or custom slides. The only method (that I'm aware of) is to create extra themes with different backgrounds, or use an external package such as powerpoint or libreOffice and run from there.

I thought I would post this to share how I have managed to add in custom graphics to slides - whether you think this is a viable method I leave up to you!

Firstly, I created a new formatting Tag via the 'Configure Formatting Tags' dialog.

Description: image

Tag: img

Start HTML <img src="

End HTML " style="float: left" />

(Note the " at the end of the start html and beginning of the end html)

The tricky part

Next I created my custom slide, where I want to embed an image. The custom image tag above will allow us to wrap around a url to an image. You can use urls which link directly to images online, but for many churches (and for speed) this is not a viable solution. What I'm proposing is hosting them locally. However, I was not able to get OpenLP to "see" my local directories, so this called for some creative thinking.

To achieve this, I installed Apache (http://httpd.apache.org) and installed the latest stable version for my operating system. Apache, is available for all platforms, and there are many blogs and posts on how to install, it also fits nicely with the open source principles of OpenLP, and is a fully featured web server for free.

Once installed, I created graphics and host them locally within Apache's htdocs folder. So for example, a picture of our minister called minister.jpg is available via my locally installed Apache server at: http://localhost/minister.jpg

with this url I could then embed it within the custom slide and wrap with my img tag like so: {img}http://localhost/minister.jpg{/img}

Hey presto! like magic, the image appears alongside my text in the custom slide.

Notes:

  • To align the image right, change style="float: right" /> in the custom tag.
  • Apache must be running for your images to appear, and the images have to be located within the htdocs folder.
  • Images must be small enough to fit within the projectors screen size, it they are too large the slide splits.

Tested in OpenLP 1.9.12 (latest at time of writing)

I hope this is of interest to fellow OpenLP users. Comments welcome and I realise this may be more effort than its worth!

Comments

  • edited September 2012

    Wow, I'm impressed with your ingenuity! A very clever solution indeed.

    I do want to caution casual users, doing something like this can mess up OpenLP's display and even create phantom bugs! We have provided the custom formatting tags for advanced users, so if you don't know what HTML is I highly recommend you do not try the above!

  • edited September 2012

    Try {img}file://localhost/minister.jpg{/img}

     

  • edited September 2012

    Try {img}file://localhost/minister.jpg{/img}

     

  • MRMR
    edited September 2012

    Hi Raoul, agreed its not the simplest solution, and some knowledge of html layout is a definite advantage. I mainly use this before a service, to show notices etc. I found that text only tended to look a bit 'samey' and adding an accompanying graphic helps to draw the congregations attention. Before this I used Powerpoint, but prefer to keep as much of the service within OpenLP as possible.

    Hi Emanuel, I did try using the file:// protocol - but with no luck (on OSX at least), hence the alternative of using a full web server. I've not tested this on windows/linux so it might be worth trying. 

  • edited September 2012

    Hello,
    I really liked this tip I use linux and me is working well:

    {img}file:///home/emanuel/icon/identity_icon.jpg{/img}

    I believe that this structure is {img}file://path/icon.jpg{/img}

  • edited September 2012

    Now if only there was a way to make it change the background like that, but I don't think that works :(  Stick with my multi-entry songs for that I guess :)

  • edited September 2012

    mhalbrook,

    You'd have to be a bit cleverer in that case. You'd need to do something like <div><img /></div><div>your lyrics</div> and apply the relevant styles in each one to layer them correctly so the text appears on top.

    You'd also have to make sure that each verse fit on a slide, otherwise all havoc might break loose if slide breaks were introduced!

    And even then there is no guarantee it'll work. I'll leave those who have more time on their hands to experiment :) 

    Also shadows and outlines may not work (depending on system) since in some cases we have to do this ourselves by laying three divs on top of each other slightly offset. If there are images inbetween, then the shadow and offset layers will not be seen.

  • edited September 2012

    It would be somewhat nicer if you just used one tag per image, so {happyface}{/happyface} would refer to <img src="file:///home/meanueloa/Pictures/happyface.jpg"></img>

    Why don't you use Inkscape and SVG to create "Custom slide" images? Endless possibilities, super crisp display and much less hacking.

  • edited November 2012

    Thanks.  file: and 3 forward slashes works well from me also.

    I started with a tag for imgL and another for imgR to float either way but then I decided to just make a HTML tag with only a beginning < and a ending > then I can put anything I want.  Then I can do like this:

    {html}img src="file:///home/mint/Documents/OpenLP Playing/church.gif" style="float:left;margin:0;padding:0;height:240px;width:320px;" /{/html}Test Text to Right

     

  • edited November 2012

    Or even something like this for a background:

     

    {html}div style="margin:auto;background-image:url('file:///home/mint/Documents/OpenLP Playing/church.gif');height:400px;width:600px;"{/html}

    {html}img src="file:///home/mint/Documents/OpenLP Playing/church.gif" style="float:left;margin:0;padding:0;height:240px;width:320px;border:5px solid white;" /{/html}Test Text to Right

    {html}/div{/html}

  • edited November 2012

    And video works for me as well but I'm not sure there would be much need for it in a custom slide.

     

    {html}video width="99%" controls="" autoplay="autoplay"><source src="file:///home/mint/Documents/OpenLP Playing/The Amazing Spiderman tablet.mp4" type="video/mp4" /></video{/html}

  • edited November 2012

    Another single img that works better:

    begin with:

    <div style="margin:auto;float:center;height:99%;width=100%;background:url('

    end with:

    ') no-repeat center;background-size:contain;" />

  • edited November 2012

    Of course, if you're gonna do this alot, keep all the images in one folder and put everything but the image file name in the custom tag, then all ya gotta do is {tag}image.name{/tag}

     

  • Thank you for these tips.  I have been experimenting a little.  Has anyone managed to get the background image to persist over slide breaks?
  • Well, in this case it isn't a background image in the sense you seem to mean. So no, it won't persist. It is an inline image.
    It is confined to the slide that contains the tag.

Sign In or Register to comment.