Below, you’ll find a detailed guide on how to add the Responsive Filterable Portfolio Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Responsive Filterable Portfolio Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Responsive Filterable Portfolio Plugin and the shortcodes it provides:
"Responsive Filterable Portfolio is a WordPress plugin that allows users to create stunning, fully responsive portfolios. It includes filter options for easy categorization and navigation."
- [print_responsive_portfolio_plus_lightbox]
Responsive Filterable Portfolio [print_responsive_portfolio_plus_lightbox] Shortcode
The Responsive Filterable Portfolio shortcode is used to display a responsive and filterable portfolio on a WordPress site. It allows users to add a portfolio with a lightbox feature, which can display images, videos, or links. The plugin pulls media files from the WordPress database, applies filters, and presents them in an organized grid layout. The portfolio is highly customizable with options to adjust image sizes, margins, and background colors. It also includes a sorting feature for easy navigation. Shortcode: [rfp_print_responsive_portfolio_plus_lightbox_func] The portfolio items can be opened in a lightbox, a separate tab, or embedded video players, depending on the media type. The shortcode also generates unique identifiers for each portfolio to avoid conflicts when multiple portfolios are used on the same page.
Shortcode: [print_responsive_portfolio_plus_lightbox]
Examples and Usage
Basic example – Displaying a responsive portfolio with lightbox using the shortcode.
[print_responsive_portfolio_plus_lightbox]Advanced examples
Displaying a responsive portfolio with custom attributes. This example shows how you can use the ‘filterMediank’ and ‘filterMediank-lbox’ styles to customize the portfolio display.
[print_responsive_portfolio_plus_lightbox style='filterMediank' lbox_style='filterMediank-lbox']Using the shortcode to display a responsive portfolio with lightbox and custom jQuery scripts. This example shows how you can enqueue custom jQuery scripts ‘filterMediank’ and ‘filterMediank-lbox-js’ for your portfolio.
[print_responsive_portfolio_plus_lightbox script='filterMediank' lbox_script='filterMediank-lbox-js']Using the shortcode to display a responsive portfolio with lightbox and a custom loading background color. This example shows how you can set a custom loading background color for your portfolio lightbox.
[print_responsive_portfolio_plus_lightbox loading_bg_color='#ffffff']PHP Function Code
In case you have difficulties debugging what causing issues with [print_responsive_portfolio_plus_lightbox] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('print_responsive_portfolio_plus_lightbox', 'rfp_print_responsive_portfolio_plus_lightbox_func');Shortcode PHP function:
function rfp_print_responsive_portfolio_plus_lightbox_func($atts) {
global $wpdb;
wp_enqueue_style('filterMediank');
wp_enqueue_style('filterMediank-lbox');
wp_enqueue_script('jquery');
wp_enqueue_script('filterMediank');
wp_enqueue_script('filterMediank-lbox-js');
ob_start();
global $wpdb;
$settings = get_option('best_portfolio_grid_settings');
$rand_Numb = uniqid('thumnail_slider');
$rand_Num_td = uniqid('divSliderMain');
$rand_var_name = uniqid('rand_');
$wpcurrentdir = dirname(__FILE__);
$wpcurrentdir = str_replace('\\', '/', $wpcurrentdir);
// $settings=get_option('thumbnail_slider_settings');
$uploads = wp_upload_dir();
$baseDir = $uploads ['basedir'];
$baseDir = str_replace('\\', '/', $baseDir);
$pathToImagesFolder = $baseDir . '/wp-best-portfolio';
$baseurl = $uploads ['baseurl'];
$baseurl .= '/wp-best-portfolio/';
$wpcurrentdir = dirname(__FILE__);
$wpcurrentdir = str_replace('\\', '/', $wpcurrentdir);
$randOmeAlbName = uniqid('alb_');
$randOmeRel = uniqid('rel_');
$randOmVlBox = uniqid('video_lbox_');
$vNonce = wp_create_nonce('vNonce');
$url = plugin_dir_url(__FILE__);
$loaderImg = $url . 'images/bx_loader.gif';
$LoadingBackColor = $settings ['BackgroundColor'];
if (strtolower($LoadingBackColor) == 'none') {
$LoadingBackColor = '#ffffff';
}
if (is_array($settings)) {
?>
<?php
if (!isset($settings['resize_images'])) {
$settings['resize_images'] = 1;
}
?>
<!-- print_responsive_filterable_portfolio_func --><div style="clear: both;"></div>
<?php $url = plugin_dir_url(__FILE__); ?>
<div class="container_">
<div class="gallery_" id="<?php echo $rand_var_name; ?>" style="visibility:hidden">
<div id="<?php echo $rand_var_name; ?>_overlay_grid" class="overlay_grid" style="background: <?php echo $LoadingBackColor; ?> url('<?php echo $loaderImg; ?>') no-repeat scroll 50% 50%;" ></div>
<div id="<?php echo $rand_Num_td; ?>">
<?php if ($settings['show_filters']) : ?>
<div id="FilerTab" class="fil">
<div class="shield_cli" id="shield_<?php echo $rand_var_name; ?>" ></div>
<?php
$query = 'SET SESSION group_concat_max_len=150000';
$wpdb->query($query);
$filerValsQuery = 'select GROUP_CONCAT(mtag) as filters from
(SELECT mtag from ' . $wpdb->prefix . 'e_portfolio order by createdon,id desc ) a';
$filters = $wpdb->get_var($filerValsQuery);
$filtersArr = explode(',', $filters);
$filtersArr = array_unique($filtersArr);
sort($filtersArr);
?>
<a href="#" class="sortLink selected" data-category="all"><?php echo $settings['AllKeywordTranslate']; ?></a>
<?php foreach ($filtersArr as $val) : ?>
<?php if (trim($val) != '') : ?>
<?php
$val = stripslashes_deep($val);
$val = preg_replace('/\\\\/', '', $val);
?>
<a href="#" class="sortLink" data-category="<?php echo $val; ?>"><?php echo $val; ?></a>
<?php endif; ?>
<?php endforeach; ?>
<div class="clear_floats"></div>
</div>
<?php endif; ?>
<div class="photos">
<div class="thumbnail_wrap_">
<?php
$imageheight = $settings ['imageheight'];
$imagewidth = $settings ['imagewidth'];
$query = 'SELECT * FROM ' . $wpdb->prefix . 'e_portfolio order by createdon,id desc ';
$firstChild = 'firstimg';
$rows = $wpdb->get_results($query, 'ARRAY_A');
if (count($rows) > 0) {
foreach ($rows as $row) {
$imagename = $row ['image_name'];
$video_url = $row ['videourl'];
$imageUploadTo = $pathToImagesFolder . '/' . $imagename;
$imageUploadTo = str_replace('\\', '/', $imageUploadTo);
$pathinfo = pathinfo($imageUploadTo);
$filenamewithoutextension = $pathinfo ['filename'];
$outputimg = '';
$outputimgmain = $baseurl . $row ['image_name'];
if ($settings['resize_images'] == 0) {
$outputimg = $baseurl . $row ['image_name'];
} else {
$imagetoCheck = $pathToImagesFolder . '/' . $filenamewithoutextension . '_' . $imageheight . '_' . $imagewidth . '.' . $pathinfo ['extension'];
if (file_exists($imagetoCheck)) {
$outputimg = $baseurl . $filenamewithoutextension . '_' . $imageheight . '_' . $imagewidth . '.' . $pathinfo ['extension'];
} else {
if (function_exists('wp_get_image_editor')) {
$image = wp_get_image_editor($pathToImagesFolder . '/' . $row ['image_name']);
if (!is_wp_error($image)) {
$image->resize($imagewidth, $imageheight, true);
$image->save($imagetoCheck);
$outputimg = $baseurl . $filenamewithoutextension . '_' . $imageheight . '_' . $imagewidth . '.' . $pathinfo ['extension'];
} else {
$outputimg = $baseurl . $row ['image_name'];
}
} else if (function_exists('image_resize')) {
$return = image_resize($pathToImagesFolder . '/' . $row ['image_name'], $imagewidth, $imageheight);
if (!is_wp_error($return)) {
$isrenamed = rename($return, $imagetoCheck);
if ($isrenamed) {
$outputimg = $baseurl . $filenamewithoutextension . '_' . $imageheight . '_' . $imagewidth . '.' . $pathinfo ['extension'];
} else {
$outputimg = $baseurl . $row ['image_name'];
}
} else {
$outputimg = $baseurl . $row ['image_name'];
}
} else {
$outputimg = $baseurl . $row ['image_name'];
}
// $url = plugin_dir_url(__FILE__)."imagestoscroll/".$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
}
}
$media_type = $row['media_type'];
$hoverClass = '';
if ($media_type == 'link') {
$hoverClass = 'playbtnCss_link';
} else if ($media_type == 'video') {
$hoverClass = 'playbtnCss_video';
} else if ($media_type == 'image') {
$hoverClass = 'playbtnCss_zoom';
}
$title = '';
$rowTitle = $row['title'];
$rowTitle = str_replace("'", '’', $rowTitle);
$rowTitle = str_replace('"', '”', $rowTitle);
$open_link_in = $row['open_link_in'];
$openImageInNewTab = '_self';
$embed_url = $row['embed_url'];
if ($media_type == 'video') {
if (trim($row['title']) != '' && trim($row['videourl']) != '') {
$title = "<a class='Imglink' target='$openImageInNewTab' href='{$row['murl']}'>{$rowTitle}</a>";
} else if (trim($row['title']) != '' && trim($row['videourl']) == '') {
$title = "<a class='Imglink' >{$rowTitle}</a>";
}
} else if ($media_type == 'image') {
if (trim($row['title']) != '' && trim($row['murl']) != '') {
$title = "<a class='Imglink' target='$openImageInNewTab' href='{$row['murl']}'>{$rowTitle}</a>";
} else if (trim($row['title']) != '' && trim($row['murl']) == '') {
$title = "<a class='Imglink' >{$rowTitle}</a>";
}
}
$title = htmlentities($title);
?>
<?php if ($media_type == 'image' or $media_type == 'video') : ?>
<?php if ($open_link_in == 1) : ?>
<a data-rel="<?php echo $randOmeRel; ?>" data-type="<?php echo $media_type; ?>" data-overlay="1" data-title="<?php echo $title; ?>" class="thumbnail_ <?php echo $randOmVlBox; ?> <?php
if ($media_type == 'video') :
?>
iframe <?php endif; ?>" data-categories="<?php echo $row['mtag']; ?>" href="
<?php
if ($media_type == 'video') :
?>
<?php echo $embed_url; ?> <?php
else :
?>
<?php echo $outputimgmain; ?><?php endif; ?>" >
<div class="thum_div figure"
<?php
if ($settings['resize_images'] == 0) :
?>
style="width:<?php echo $imagewidth; ?>px;height: <?php echo $imageheight; ?>px" <?php endif; ?>>
<img
<?php
if ($settings['resize_images'] == 0) :
?>
class="fit_img" <?php endif; ?> src="<?php echo $outputimg; ?>" alt="<?php echo $rowTitle; ?>" title="<?php echo $rowTitle; ?>" />
<div class="<?php echo $hoverClass; ?>"></div>
</div>
</a>
<?php else : ?>
<a data-type="<?php echo $media_type; ?>" data-title="<?php echo $title; ?>" class="thumbnail_ " data-categories="<?php echo $row['mtag']; ?>" href="
<?php
if ($media_type == 'video') :
?>
<?php echo $embed_url; ?> <?php
else :
?>
<?php echo $outputimgmain; ?><?php endif; ?>" >
<div class="thum_div figure"
<?php
if ($settings['resize_images'] == 0) :
?>
style="width:<?php echo $imagewidth; ?>px;height: <?php echo $imageheight; ?>px" <?php endif; ?>>
<img
<?php
if ($settings['resize_images'] == 0) :
?>
class="fit_img" <?php endif; ?> src="<?php echo $outputimg; ?>" alt="<?php echo $rowTitle; ?>" title="<?php echo $rowTitle; ?>" />
<div class="<?php echo $hoverClass; ?>"></div>
</div>
</a>
<?php endif; ?>
<?php else : ?>
<a data-type="<?php echo $media_type; ?>" class="thumbnail_ " data-categories="<?php echo $row['mtag']; ?>" href="<?php echo $row['murl']; ?>" >
<div class="thum_div figure"
<?php
if ($settings['resize_images'] == 0) :
?>
style="width:<?php echo $imagewidth; ?>px;height: <?php echo $imageheight; ?>px" <?php endif; ?>>
<img
<?php
if ($settings['resize_images'] == 0) :
?>
class="fit_img" <?php endif; ?> src="<?php echo $outputimg; ?>" alt="<?php echo $rowTitle; ?>" title="<?php echo $rowTitle; ?>" />
<div class="<?php echo $hoverClass; ?>"></div>
</div>
</a>
<?php endif; ?>
<?php } ?>
<?php } ?>
</div><!-- .thumbnail_wrap end -->
</div>
</div>
<script>
<?php $intval = uniqid('interval_'); ?>
var <?php echo $intval; ?> = setInterval(function () {
if (document.readyState === 'complete') {
clearInterval(<?php echo $intval; ?>);
<?php $uniqId = uniqid(); ?>
var uniqObj<?php echo $uniqId; ?> = jQuery("a[data-rel='<?php echo $randOmeRel; ?>']");
var func = jQuery('#<?php echo $rand_Num_td; ?>').filterMediank({
thumbWidth: <?php echo $settings['imagewidth']; ?>,
thumbHeight: <?php echo $settings['imageheight']; ?>,
thumbsSpacing:<?php echo $settings['imageMargin']; ?>,
galleryId: "<?php echo $rand_var_name; ?>",
backgroundColor: "<?php echo $settings['BackgroundColor']; ?>",
uniqueObjId: "uniqObj<?php echo $uniqId; ?>",
});
jQuery('#<?php echo $rand_var_name; ?>').css('visibility', 'visible')
var globalTimer = null;
jQuery(window).resize(function () {
clearTimeout(globalTimer);
globalTimer = setTimeout(doneResize, 500);
});
function doneResize() {
func.resizeWin('<?php echo $rand_var_name; ?>');
}
jQuery(".<?php echo $randOmVlBox; ?>").fancybox_fp({
'overlayColor': '#000000',
'padding': 3,
'margin': 20,
'autoScale': true,
'autoDimensions': true,
'uniqObj': uniqObj<?php echo $uniqId; ?>,
'uniqRel': '<?php echo $randOmeRel; ?>',
'transitionIn': 'fade',
'transitionOut': 'fade',
'titlePosition': 'outside',
'cyclic': true,
'hideOnContentClick': false,
'width': 650,
'height': 400,
'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
var currtElem = jQuery('#<?php echo $rand_Num_td; ?> a[href="' + currentOpts.href + '"]');
var isoverlay = jQuery(currtElem).attr('data-overlay')
if (isoverlay == "1" && jQuery.trim(title) != "") {
return '<span id="fancybox_fp-title-over">' + title + '</span>';
} else {
return '';
}
}
});
}
}, 100);
</script>
</div>
</div>
<?php } ?>
<div class="clear"></div><!-- end print_responsive_filterable_portfolio_func -->
<?php
$output = ob_get_clean();
return $output;
}
Code file location:
responsive-filterable-portfolio/responsive-filterable-portfolio/wp-best-portfolio.phpConclusion
Now that you’ve learned how to embed the Responsive Filterable Portfolio Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply