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;
}
<h2>Parameters</h2>
<p>
<strong>$bg</strong> (string/boolean) (required) Tells the function to return a background image. Pass as "bg", or "background". This parameter is only needed if using the <?php
echo do_shortcode('[code]fpo_image()[/code]');
?>
function! Default: <em>none</em><br />
<strong>$type</strong> (string) (optional) The type of placeholder image to use. Options include "none", "photo". Default: <em>"none"</em><br />
<strong>$color</strong> (string) (optional) The color of the placeholder image strokes. Default: <em>"#aaa"</em><br />
</p>
<h2>Examples</h2>
<?php
echo do_shortcode('[pre lang=php]<div class="row" style="<?php fpo_bg_image(); ?>">[/pre]');
?>
<div class="row" style="<?php
fpo_bg_image();
?>
">
<div class="eight columns push_eight">
<p style="text-align: center; margin: 0; padding: 25px; background: rgba(255, 0, 0, 0.75); color: #fff;">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div><!--/row-->
<br /><br /><br /><br /><br /><br />
