> A useful and free SPX example template ImageLayer is a super useful utility template for displaying a full screen image over a video using the SPX Graphics Controller. --- > [!TIP] Get this item in the [SPX Store](https://spxgraphics.com/store/#product-Image-Layer). ![[Pasted image 20260302163107.png]] This is a simple template for revealing an image over a live video. Sounds simple - and it is! All the complexity is upstream, in your image editing software. Get creative and create whatever assets you need: fullscreen photos or presentation slides, titles headlines, maps. Or with transparent images there are no limits: sponsor logos, social call-to-actions, quizzes, namestraps - anything really. ![[Pasted image 20260302163118.png]] Images can be loaded from SPX's local **ASSETS/media/images/hd** -folder or from a web URL. ![[Pasted image 20260302163123.png]] ![[Pasted image 20260302163129.png]] ## Use cases The ImageLayer can be of great help in any production. - TV productions, events, presentations, streams - Sponsor logos, subscribe and other social call-to-actions are easy to use as images. - Need to present Slides? Load those as images. - If you don't have an animated template package at hand, this will get you going anyway. Create backgrounds for your graphics as images and use Texter template for texts on them. - Need a solid color, such as black or chroma green? Use an image. ![[Pasted image 20260302163134.png]] ## Package contents The template is provided as a zip file at checkout which includes all required files (html, images, fonts, css styles, etc). All source code is left editable for easy customization and adaptation. - Files delivered as a zip file at checkout for manual installation. - 2 copies of the "same" HTML template with predefined [[Layers|layers]].Layer 2 - for images "further back"Layer 19 - for images "close to the camera"Remember you can assign a different layer number in the [[Project Settings|project settings]]. These two are just starting points. - Supporting files (such as fonts, images, javascript, etc) - Example image files to ASSETS/media/images/hd -folder (PNG format) - README.pdf for installation and usage instructions - FREE LICENSE allows you to modify and redistribute the files but there are conditions. Please see the free license. ![[Pasted image 20260302163142.png]] ## Template controls ![[Pasted image 20260302163146.png]] The template can play out an image from a local media folder or SPX-GC or from a web URL. The image will be streched to fill the HD area, so optimal image size is 1920x1080 pixels. Local files must be in PNG format, URL images can be any web supported formart including PNG, GIF and JPG. URL images have higher priority, so if both image sources are set, the URL one will be loaded. Animation types provided by the template by default: - Cut - Fade in - Slide in (from top, left, bottom, right) - Wipe in (from top, left, bottom, right) Easing types provided by the template by default: - Smooth - Linear - Ease back - Bounce More animation types and easing types can be added by modifying the source code of the template. When template is played a full screen image animates in and when stopped it will quickly fade out. Template will accept images of any sizes but the optimal size is 1920x1080 pixels. Image can also have transparency for overlay effects, such as logos or call-to-action graphics etc. There are two image sources available: - local file - a drop down file selector which will show all.png images present in ASSETS/media/images/hd -folder. - web URL - a textfield for entering a url (such as https://source.unsplash.com/random/1920x1080?bokeh). To use a local file, leave this field empty. The in-animation type can be changed with the template controls. ## Animation type -options - Cut the image is shown using a hard cut. - Fade the image fades in. - Slide in from top, right, bottom or left - in which the image layer will move to the default position. - Wipe in from top, right, bottom or left - in which the image will not move, but it will be masked / wiped in from the given direction - **Blur** uses a gaussing blur filter to introduce the image. See section [customizations](https://file+.vscode-resource.vscode-cdn.net/c%3A/01_Projects/SPX-TemplateDev-SRC/SPX_Template_ImageLayer/src/README.md#customize) for more info about the animation parameters. ## Animation easing -options - Smooth - speed of movement ramps down for a smooth ending effect. The easing function used by this option is (by default) easeOutQuint. - Linear - speed of the movement keeps linear until the end. Robotic, mechanic kind of movement. - Ease Back - the movement overshoots and eases back for a rubbery, relaxed effect. The easing function used by this option is (by default) easeOutBack. - Bounce - the movement bounces at the end for a bouncy, funny effect. The easing function used by this option is (by default) easeOutBounce. ## Advanced usage The template comes in two copies, one for layer 2 and another for layer 19, but nothing stops you from using the template on even more [[Layers|layers]]. You can add the same template to your project several times and change those layers within the [[Project Settings|project settings]] to different layers. For inspiration see [https://en.wikipedia.org/wiki/Multiplane\_camera](https://en.wikipedia.org/wiki/Multiplane_camera):-) If you need to chroma key graphics you can use chroma.png as a backdrop. The image layer also works nicely with other text templates. Use a transparent image as background for your graphics and use another template for texts, such as [Texter](https://www.spxgc.com/store/Texter-p291207513). ## Template customization > [!WARNING] REMEMBER to make backup copies of original files before making any changes. Image Layer's main purpose is to show an image and therefor does not provide a lot of additional customizations. You should save your own images or backgrounds in a PNG format to \[spxgc-root\]/ASSETS/media/images/hd -directory. The optimal image size is 1920 x 1080 pixels. The speed of the fade in is defined with a FadeInDurationMs -variable in the HTML-source code. The default fade-in value is 200ms (0.2 seconds). The amount of movement is set with a MovementAmountPr -variable value, which is in range 0 (no movement) to 100 (size of screen). Default value is 50 (percent). The speed of the Slide / Wipe is set with a InMoveDurationMs -variable, which is 800ms (0.8 seconds) by default. Both movements also use fade in time with movement. Fade out is the out animation in all cases. The speed of fade out is set with a FadeOutDuratinMs -variable, which is 50ms (0.05 seconds = approx 2 frames) by default. Easing options can be modified or added within the SPXGCTemplateDefinition -object in the template. The template will need to added in to the project after changes in the definition object. For more easing functions see [https://easings.net/](https://easings.net/) --- ## Read next - [[Installing Templates]] — how to install SPX templates and extensions - [[Theme Files]] — customize template colors and fonts with CSS - [[How to use SPX with OBS Studio]] — add SPX graphics to OBS