Support » Plugin: Portfolio for Elementor » Initially filterable by URL?

  • I’ve tried to answer this myself by looking at the code, but how would I open the portfolio already displayed to a certain filter subset? Like, if my categories are Dogs, Horses, Cats and Cows, and a user comes in from my Cows forum, I want the portfolio to only show Cows right from the start.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Hello, I’ve created a fix for this feature.

    Go to /wp-content/plugins/portfolio-elementor, and change the following code to:

    custom-portfolio-elementor.js

    function remove_character(str_to_remove, str) {
        let reg = new RegExp(str_to_remove)
        return str.replace(reg, '')
    }
    
    //Use Strict Mode
    (function ($) {
    
        "use strict";
    
        var $container = $('.elpt-portfolio-content');
        var $grid = $('.elpt-portfolio-content').isotope({
            itemSelector: '.portfolio-item-wrapper'
        });
    
        function startElemenfolio(){
    
            var $container = $('.elpt-portfolio-content');
            var $grid = $('.elpt-portfolio-content').isotope({
                itemSelector: '.portfolio-item-wrapper'
            });
    
            // * Changed by Maykel 1/04/2019
            // * Verify if has # on URL
            if(window.location.hash) {
    
                var filterValueURL = remove_character('#', window.location.hash)
    
                $grid.isotope({
                    filter: '.elemenfoliocategory-' + filterValueURL
                });
    
                $('.elpt-portfolio-filter a').removeClass('item-active');
                $('.elpt-portfolio-filter a[data-filter=".elemenfoliocategory-' + filterValueURL + '"]').addClass('item-active');
    
            }
    
            $('.elpt-portfolio-filter').on('click', 'a', function () {    // * Changed by Maykel 1/04/2019
                $('.elpt-portfolio-filter a').removeClass('item-active'); // * Changed by Maykel 1/04/2019
                $(this).addClass('item-active');
                var filterValue = $(this).attr('data-filter');
                $grid.isotope({
                    filter: filterValue
                });
            });
    
            //Lightbox
            $('.elpt-portfolio-lightbox').simpleLightbox({
                captions: true,
            });     
        }
    
        //Begin - Window Load
        $(window).load(function () {    
            setTimeout(startElemenfolio, 800);   
        });
    
        $(document).on('mouseup', function(){
           setTimeout(startElemenfolio, 1200);   
        });
    
        //End - Use Strict mode
    })(jQuery);

    portfolio_shortcodes.php

    <?php
    /** ELPT
     * Shortcodes 
     *
     *
     */
    
    // Exit if accessed directly
    if ( ! defined( 'ABSPATH' ) ) {
    	exit;
    }
    
    //esc_attr( get_option("elpt_color") ).
    
    /*-----------------------------------------------------------------------------------*/
    /*	portfolio Item
    /*-----------------------------------------------------------------------------------*/
    function elpt_portfolio_shortcode($atts, $content = null) {
    	extract(shortcode_atts(array(
    		//"id" => '',
    		"postsperpage" => '',
    		"showfilter" => '',
    		"taxonomy" => '',
    		"type" => '',
    		"style" => '',
    		"columns" => '',
    		"margin" => '',
    		"linkto" => '',
    		
    	), $atts));
    	
    	////Isotope
    	//wp_enqueue_script( 'imagesloaded', plugin_dir_url( __FILE__ ) . 'js/vendor/imagesloaded.pkgd.min.js', array('jquery'), '20151215', true );
    	//wp_enqueue_script( 'isotope', plugin_dir_url( __FILE__ ) . 'js/vendor/isotope/js/isotope.pkgd.min.js', array('jquery'), '20151215', true );
    	
    	//Image Lightbox
    	//wp_enqueue_script( 'simple-lightbox-js', plugin_dir_url( __FILE__ ) .  '/js/vendor/simplelightbox/dist/simple-lightbox.min.js', array('jquery'), '20151218', true );
    	//wp_enqueue_style( 'simple-lightbox-css', plugin_dir_url( __FILE__ ) .  '/js/vendor/simplelightbox/dist/simplelightbox.min.css' );
    	
    	//Custom JS
    	//wp_enqueue_script( 'elpt-portfolio-elementor-js', plugin_dir_url( __FILE__ ) . 'js/custom-portfolio-elementor.js', array('jquery'), '20151215', true );
    
    	//Custom CSS
    	//wp_enqueue_style( 'elpt-portfolio-css', plugin_dir_url( __FILE__ ) .  '/css/elpt_portfolio_css.css' );
    	
    	$portfolio_type = $type;
    
    	if ( $portfolio_type == 'yes') {
    		$args = array(
    			'post_type' => 'elemenfolio',
    			'posts_per_page' => $postsperpage,
    			'tax_query' => array(
    				array(
    					'taxonomy' => 'elemenfoliocategory',
    					'field'    => 'id',
    					'terms'    => $taxonomy,
    					'orderby' => 'rand' // * Added by Maykel Esser
    				),
    			),		
    			//'p' => $id
    		); 	
    	} else { 
    		$args = array(
    			'post_type' => 'elemenfolio',
    			'posts_per_page' => $postsperpage,	
    			'orderby' => 'rand' // * Added by Maykel Esser
    		);			
    	}
    
    	$portfolioposts = get_posts($args);
    	
    	if(count($portfolioposts)){    
    
    		global $post;
    
    			$retour ='';	
    
    			$retour .='<div class="elpt-portfolio">';			
    
    				if ($showfilter != 'no' && $portfolio_type != 'yes') {
    					$retour .='<div class="elpt-portfolio-filter">';					
    
    						$retour .='<a class="portfolio-filter-item item-active" data-filter="*" style="background-color:' .';">'.esc_html('All', 'elemenfolio').'</a>'; // * Changed by Maykel 1/04/2019
    
    						$terms = get_terms( array(
    						    'taxonomy' => 'elemenfoliocategory',
    						    'hide_empty' => false,
    						) );
    
    						$countItem = 0; // * Added by Maykel 1/04/2019
    
    						foreach ( $terms as $term ) :
    
    							$thisterm = $term->name;
    							$thistermslug = $term->slug;
    							$retour .='<a href="#'.esc_attr($thistermslug).'" class="portfolio-filter-item" style="background-color:' .';" data-filter=".elemenfoliocategory-'.esc_attr($thistermslug).'">'.esc_html($thisterm).'</a>'; // * Changed by Maykel 1/04/2019
    
    							$countItem++; // * Added by Maykel 1/04/2019
    
    						endforeach;		 
    						
    					$retour .='</div>';
    				}				
    
    				//Portfolio style
    				if ($style == 'masonry' ) {
    					$portfoliostyle = 'elpt-portfolio-style-masonry';
    				}
    				else {
    					$portfoliostyle = 'elpt-portfolio-style-box';
    				}
    				if ($columns == '2') {
    					$portfoliocolumns = 'elpt-portfolio-columns-2';
    				}
    				else if ($columns == '3') {
    					$portfoliocolumns = 'elpt-portfolio-columns-3';
    				}
    				else {
    					$portfoliocolumns = 'elpt-portfolio-columns-4';
    				}
    				if ($margin == 'yes' ) {
    					$portfoliomargin = 'elpt-portfolio-margin';
    				}
    				else {
    					$portfoliomargin = '';
    				}
    
    				$retour .='<div class="elpt-portfolio-content '.$portfoliostyle.' '.$portfoliocolumns.' '. $portfoliomargin.'">';
    
    					foreach($portfolioposts as $post){
    
    						$postid = $post->ID;
    
    						$portfolio_image= wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );	
    
    						$portfolio_image_ready = $portfolio_image[0];
    
    						//Fancybox or link
    						$portfolio_link = get_the_permalink();
    
    						$portfolio_link_class = '';
    						$portfolio_link_rel = '';
    						if ( $linkto == 'image') {
    							$portfolio_link = $portfolio_image_ready;
    							$portfolio_link_class = 'elpt-portfolio-lightbox';
    							$portfolio_link_rel = 'rel="elpt-portfolio"';
    
    						}
    						
    						$classes = join( '  ', get_post_class($postid) ); 
    						
    						$retour .='<div class="portfolio-item-wrapper '.$classes.'">';
    							$retour .='<a href="'.esc_url($portfolio_link) .'" class="portfolio-item '.esc_attr($portfolio_link_class) .'" '.esc_attr($portfolio_link_rel) .' style="background-image: url('.esc_url($portfolio_image_ready).')" title="'.get_the_title().'">';
    							////$retour .='<a href="'.esc_url($portfolio_link) .'" class="lozad portfolio-item '.esc_attr($portfolio_link_class) .'" '.esc_attr($portfolio_link_rel) .' data-background-image="'.esc_url($portfolio_image_ready).'" title="'.get_the_title().'">';
    								$retour .='<img src="'.esc_url($portfolio_image_ready) .'" title="'.get_the_title().'" alt="'.get_the_title().'"/>';
    								////$retour .='<img class="lozad" data-src="'.esc_url($portfolio_image_ready) .'" title="'.get_the_title().'" alt="'.get_the_title().'"/>'; // * Added by Maykel Esser
    								$retour .='<div class="portfolio-item-infos-wrapper" style="background-color:' .';"><div class="portfolio-item-infos">';
    									$retour .='<div class="portfolio-item-title">'.get_the_title().'</div>';
    									$retour .='<div class="portfolio-item-category">';
    										$terms = get_the_terms( $post->ID , 'elemenfoliocategory' );
    										if (is_array($terms) || is_object($terms)) {
    										   foreach ( $terms as $term ) :
    												$thisterm = $term->name;
    												$retour .='<span class="elpt-portfolio-cat">' .esc_html($thisterm) .'</span>';
    											endforeach;
    										}									
    									$retour .='</div>';
    								$retour .='</div></div>';
    							$retour .='</a>';
    						$retour .='</div>';
    
    					}
    
    				$retour .='</div>';
    
    			$retour .='</div>';		
    		
    		return $retour;
    
    		//Reset Query
    		wp_reset_postdata();
    
    	}
    
    	
    }
    
    add_shortcode("elemenfolio", "elpt_portfolio_shortcode");

    Change the elpt_portfolio_css.css snippet to:

    .elpt-portfolio-filter .portfolio-filter-item {
      border: 0;
      background: #333;
      color: #FFF !important; /* Changed by Maykel 1/04/2019 */
      padding: 8px 12px;
      margin-right: 3px;
      margin-bottom: 3px;
      font-size: 13px;
      outline: none!important;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      cursor:pointer; /* Changed by Maykel 1/04/2019 */
    }
Viewing 1 replies (of 1 total)
  • The topic ‘Initially filterable by URL?’ is closed to new replies.