[SOLVED] CSS Background image from Gallery Module

[beattie]

In case anyone is searching for a solution for displaying images from the Gallery Module which have been styled as background images using CSS.

Problem:

I needed to show a static image banner at the top of a web page with a large <h1> text heading on top of the banner. The background image changes randomly on each page refresh. I couldn't get the heading to sit on top of the background image (tried css styling's z-index without success).

Solution:

Create a new Gallery template.

Gallery template:

Code: Select all

{foreach from=$images item=image}
	{if !$image->isdir}
		<div class="some-class" style="background:url('{$image->thumb}') no-repeat top center;">
			<h1>{menu_text}</h1>
		</div>
	{/if}
{/foreach}

In the Gallery template settings, change the thumbnail size to suit your needs, e.g. 1600px wide x 200px high. Enter 1 in the 'Maximum number of items per page' field. Leave the 'Template JavaScript' field empty. You can style your image div in the 'Template CSS-stylesheet' field if you wish or empty this field and add the styling in your website's cms stylesheet.

Page template:

Code: Select all

{Gallery dir='galleryname' number="1" action="showrandom"}

Hope this helps someone and thanks Jos for your assistance!