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 />