Custom images with Low Variables
If you need to give your users the ability to change the header or masthead image of their site, then Low Variables for ExpressionEngine comes in handy once again. And as an added bonus, if you throw in the Low Random plugin, creating rotating headers or mastheads is a piece of cake.
Custom header image
In this example, we’ve defined the default header image in a CSS file. We’ll override that by adding a <style> block to our templates. But first, we need to create a variable with type ‘Select Files’. Let’s name the variable {my_custom_header}. Select the upload destination(s) that the user can choose images from and check the ‘Allow uploads’ checkbox.
Then, just add this code to your templates:
<style type="text/css">
#header {background-image:url({my_custom_header})}
</style>Random masthead image
For a random image, create a similar variable, for example {my_custom_masthead}. Enable early parsing and allow for multiple files to be selected. We need early parsing to be enabled, because we’re using the variable as input for the Low Random plugin.
Here’s how it would look in our templates:
<img src="{exp:low_random:items}{my_custom_masthead}{/exp:low_random:items}" alt="" />That’s all there is to it; custom and random images with Low Variables.
