Perfect Resizing Background Image in Widgetkit

Usually images in Widgetkit get re-sized with the browser - but they scale relative to the width which makes the image get smaller height-wise too. Sometimes we want the image to keep it's height but still re-size nicely with the browser. This is called a "Perfect Re-size".

The way we do this is to set a background image on a slide and use CSS3 to do it's magic and resize it correctly.

Firstly, we need to make a new slideshow template - navigate to /media/widgetkit/widgets/slideshow/styles and copy your default folder to your computer. Rename the folder to whatever your template name will be and re-upload it to the styles folder. We'll name ours pixeltopaper. Open the folder and find and open template.php. Replace default on line 17 with whatever the name of your template will be - for this tutorial we'll use pixeltopaper. So we're changing: class="wk-slideshow wk-slideshow-default" to class="wk-slideshow wk-slideshow-pixeltopaper".

Also open your style.css and find and replace (ctrl + F) default with pixeltopaper. This is important because we just changed the class of the slideshow so we need to change the styles to apply to the new class.

Next, open config.xml and you should be able to see the available fields on line 4. We want to add a new field to add the background image into. Copy and paste one of the HTML fields underneath the others (or where ever you want it ordered) - and name it like this:

<field type="html" name="bgimage" label="Background" description=""></field>

It is important that you use the same terms as listed here. If you now open your slideshow in Joomla (Components > Widgetkit > Slideshow), you should be able to change the template to the new one. Once the page reloads, you should see an additional HTML field called Background, where you can add an image into. At the moment, although the image is saved, it won't actually display anywhere because we haven't told this field to render yet.

Open up the template.php again and on line 13, add this: $bgimage = '';. This is telling the php that as default, there is nothing as the background image.

Next, add this inside <ul class="slides">:

<?php 
	//Get the img src
	$dom = new domDocument;
	/*** load the html into the object ***/
	$dom->loadHTML($item["bgimage"]);				
	/*** discard white space ***/
	$dom->preserveWhiteSpace = false;				
	$images = $dom->getElementsByTagName('img');				
	foreach($images as $img){
			$imgurl = $img->getAttribute('src');       
	}
?>

This is getting the source of the image set in bgimage - the Background field in your slideshow. Now that we have the image in the php, we need to output it as a background image - to do this, we'll add another div inside the slides and add the image to it. Add this inside the <li>:

<div class="backgroundbg" style="background-image: url('/<?php echo $imgurl; ?>'); background-position:50% 0;"></div>

This is getting the image URL from the first block of code we copied into the <ul> and hard-coding it onto the div.

Now you should see your image on the front-end of the website as a background image to the slideshow. It won't work properly yet as we haven't added the CSS in. Copy the following into your CSS stylesheet.

.backgroundbg { 
  background-repeat: no-repeat;
  background-position:center center;
  background-attachment:fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

These rules will work for any background image you want to use the perfect re-size for so don't be shy at using them elsewhere.

Below is a before and after of what your code should look like - or similar to.

Before

<?php 
/**
* @package   Widgetkit
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

	$widget_id  = $widget->id.'-'.uniqid();
	$settings   = $widget->settings;
	$navigation = array();
	$captions   = array();

	$i = 0;
?>

<div id="slideshow-<?php echo $widget_id; ?>" class="wk-slideshow wk-slideshow-default" data-widgetkit="slideshow" data-options='<?php echo json_encode($settings); ?>'>
	<div>
		<ul class="slides">

			<?php foreach ($widget->items as $key => $item) : ?>
			<?php
				$navigation[] = '<li><span></span></li>';
				$captions[]   = '<li>'.(isset($item['caption']) ? $item['caption']:"").'</li>';
			
				/* Lazy Loading */
				$item["content"] = ($i==$settings['index']) ? $item["content"] : $this['image']->prepareLazyload($item["content"]);
			?>
			<li>
				<article class="wk-content clearfix"><?php echo $item['content']; ?></article>
			</li>
			<?php $i=$i+1;?>
			<?php endforeach; ?>
		</ul>
		<?php if ($settings['buttons']): ?><div class="next"></div><div class="prev"></div><?php endif; ?>
		<div class="caption"></div><ul class="captions"><?php echo implode('', $captions);?></ul>
	</div>
	<?php echo ($settings['navigation'] && count($navigation)) ? '<ul class="nav">'.implode('', $navigation).'</ul>' : '';?>
</div>

After

<?php 
/**
* @package   Widgetkit
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   YOOtheme Proprietary Use License (http://www.yootheme.com/license)
*/

	$widget_id  = $widget->id.'-'.uniqid();
	$settings   = $widget->settings;
	$navigation = array();
	$captions   = array();
	$bgimage = '';

	$i = 0;
?>

<div id="slideshow-<?php echo $widget_id; ?>" class="wk-slideshow wk-slideshow-stromlo" data-widgetkit="slideshow" data-options='<?php echo json_encode($settings); ?>'>

	<div>
		<ul class="slides">

			<?php foreach ($widget->items as $key => $item) :?>
            <?php 
				//Get the img src
				$dom = new domDocument;
				/*** load the html into the object ***/
				$dom->loadHTML($item["bgimage"]);				
				/*** discard white space ***/
				$dom->preserveWhiteSpace = false;				
				$images = $dom->getElementsByTagName('img');				
				foreach($images as $img){
						$imgurl = $img->getAttribute('src');       
				}
			?>
           
			<?php
				$navigation[] = '<li class="nav-'.$i.'"><span class="slidetitle">'.$item["title"].'</span></li>';
				$captions[]   = '<li>'.(isset($item['caption']) ? $item['caption']:"").'</li>';
			
				/* Lazy Loading */
				$item["content"] = ($i==$settings['index']) ? $item["content"] : $this['image']->prepareLazyload($item["content"]);
			?>
            <li class="slide">
                <div class="backgroundbg" style="background-image: url('/<?php echo $imgurl; ?>'); background-position:50% 0;"></div>
                
				<article class="wk-content clearfix"><?php echo $item['content']; ?></article>
			</li>
			<?php $i=$i+1;?>
			<?php endforeach; ?>
		</ul>
		<?php if ($settings['buttons']): ?><div class="next"></div><div class="prev"></div><?php endif; ?>
		<div class="caption"></div><ul class="captions"><?php echo implode('', $captions);?></ul>
	</div>
	<?php echo ($settings['navigation'] && count($navigation)) ? '<div class="nav-container"><ul class="nav">'.implode('', $navigation).'</ul></div>' : '';?>

</div>

If you don't want to do the perfect re-size with CSS3, there are other ways to do it (CSS, JQuery) which you can check out here