function fpo_image($width = '100%', $height = '200px', $type = 'none', $color = '#000', $styles = '', $classes = '')
{
if ($width == 'bg' || $width == 'background') {
$height = $height == '200px' ? 'none' : $height;
//$height is type in this case
$type = $type == 'none' ? '#000' : $type;
//$type is color in this case.
return fpo_bg_image($height, $type);
}
if (is_int($width)) {
$width .= 'px';
}
if (is_int($height)) {
$height .= 'px';
}
$imgsrc = '';
if ($type == 'unsplash' || $type == 'photo' || $width == 'unsplash' || $width == 'photo') {
$imgsrc = unsplash_it(800, 600, 1);
} elseif (strpos($type, '#') !== false) {
$color = $type;
}
if (!isset($color) || $color == '') {
$color = '#000';
}
$return = '<div class="nebula-fpo-image ' . $classes . '" style="background: url(' . $imgsrc . ') no-repeat; background-size: 100% 100%; width: ' . $width . '; height: ' . $height . '; ' . $styles . '">';
if ($imgsrc == '') {
$return .= '<svg x="0px" y="0px" width="100%" height="100%" style="border: 1px solid ' . $color . ';">
<line fill="none" stroke="' . $color . '" stroke-miterlimit="10" x1="0" y1="0" x2="100%" y2="100%"/>
<line fill="none" stroke="' . $color . '" stroke-miterlimit="10" x1="100%" y1="0" x2="0" y2="100%"/>
</svg>';
}
$return .= '</div>';
echo $return;
}
<ul class="bxslider exampleslider"> <li><img src="<?php echo unsplash_it(800, 400); ?> " /></li> <li><img src="<?php echo unsplash_it(800, 400); ?> " /></li> <li><img src="<?php echo unsplash_it(800, 400); ?> " /></li> <li><img src="<?php echo unsplash_it(800, 400); ?> " /></li> <li><img src="<?php echo unsplash_it(800, 400); ?> " /></li> </ul>
<div class="row">
<div class="sixteen columns">
<img src="<?php
echo unsplash_it('650', '400');
?>
" /><br/><br/>
<img src="<?php
echo unsplash_it('650', '400');
?>
" /><br/><br/>
<img src="<?php
echo unsplash_it('650', '400');
?>
" /><br/><br/>
<img src="<?php
echo unsplash_it('650', '400', false, 303);
//Broken image example
?>
" /><br/><br/>
</div><!--/columns-->
</div><!--/row-->
<p class="line2">sed ullamcorper magna volutpat sed.</p>
<a class="nebulaframe anchored-right" href="#" onclick="return false;">Nullam egestas faucibus</a>
</div>
<img class="random-unsplash" src="<?php
echo unsplash_it(1600, 500);
?>
" alt="Slide 4" />
</li>
<li>
<div>
<p class="line1">Aenean euismod justo</p>
<p class="line2">in augue cursus, ac bibendum ante vestibulum.</p>
<a class="nebulaframe anchored-right" href="#" onclick="return false;">Vivamus faucibus eget</a>
</div>
<img class="random-unsplash" src="<?php
echo unsplash_it(1600, 500);
?>
" alt="Slide 5" />
</li>
</ul>
<div class="nebulashadow inner-bottom bulging" style="z-index: 2;"></div>
</div><!-- /heroslider -->
<hr style="margin-bottom: 15px;"/>
</div><!--/container-->
<script>
jQuery(window).on('load', function() {
setTimeout(function(){
jQuery('#heroslider').removeClass('closed');
}, 1000);
}); //End Window Load
<style>
.parallax {height: 300px; background-image: url('<?php
echo unsplash_it('1600', '1200', 1);
?>
'); outline: 1px solid grey;}
</style>
<div class="row">
<div class="sixteen columns">
<p>The following...</p>
</div>
</div><!--/row-->
<div class="row">
<div class="sixteen columns">
<div class="parallax" gumby-parallax="0.5"></div>
</div>
</div><!--/row-->
<div class="row">
<div class="sixteen columns">
<img src="<?php
echo unsplash_it('650', '400');
?>
" />
</div><!--/columns-->
</div><!--/row-->
