Home Forums Porto Template Portfolio Filter defaults

This topic contains 7 replies, has 2 voices, and was last updated by  Support2 1 month ago. This post has been viewed 101 times

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10029047

    Attila
    Participant

    Hello

    I am using the Portfolio Template on a website (with Combination Filters). Now I would like to set the filter to a certain value, so that after the loading process not all pictures are shown but only a part. Is this possible?

    Example: On this page (https://trauerkartendruck.ch/2019/traueranzeigen.lasso) the filter “1. Kartenform” should be active at the top of “1-seitige Traueranzeigen”.

    Greeting
    Dave


    #10029053

    Support2
    Keymaster

    Hello Dave,

    With some custom code this is possible. Please follow the steps below:

    1) Change the html tag to:

    <html class="disable-onload-scroll">

    2) Change the code of combination filters at js/examples/examples.portfolio.js to this new:

    /*
    Combination Filters
    */
    if($('#combinationFilters').get(0)) {
    
    	$(window).on('load', function() {
    
    		setTimeout(function() {
    
    			var $grid = $('.portfolio-list').isotope({
    				itemSelector: '.isotope-item',
    				layoutMode: 'masonry',
    				filter: '*',
    				hiddenStyle: {
    					opacity: 0
    				},
    				visibleStyle: {
    					opacity: 1
    				},
    				stagger: 30,
    				isOriginLeft: ($('html').attr('dir') == 'rtl' ? false : true)
    			});
    
    			var filters = {},
    				$loader = $('.sort-destination-loader');
    
    			$('.filters').on('click', 'a', function(e) {
    				
    				e.preventDefault();
    				
    				var $this = $(this);
    
    				var $buttonGroup = $this.parents('.portfolio-filter-group');
    				var filterGroup = $buttonGroup.attr('data-filter-group');
    				
    				filters[filterGroup] = $this.parent().attr('data-option-value');
    				
    				var filterValue = concatValues(filters);
    				
    				$grid.isotope({
    					filter: filterValue
    				});
    			});
    
    			$('.portfolio-filter-group').each(function(i, buttonGroup) {
    				var $buttonGroup = $(buttonGroup);
    				$buttonGroup.on('click', 'a', function() {
    					$buttonGroup.find('.active').removeClass('active');
    					$(this).parent().addClass('active');
    					$(this).addClass('active');
    				});
    			});
    
    			var concatValues = function(obj) {
    				var value = '';
    				for (var prop in obj) {
    					value += obj[prop];
    				}
    				return value;
    			}
    
    			$(window).on('resize', function() {
    				setTimeout(function() {
    					$grid.isotope('layout');
    				}, 300);
    			});
    
    			if ($loader) {
    				$loader.removeClass('sort-destination-loader-showing');
    
    				setTimeout(function() {
    					$loader.addClass('sort-destination-loader-loaded');
    				}, 500);
    			}
    
    			if( window.location.hash ) {
    				$grid.isotope({
    					filter: window.location.hash.replace('#','')
    				});
    
    				var filters = window.location.hash.split('.');
    				filters.splice(0, 1);
    
    				$('li[data-option-value]').removeClass('active').find('> a').removeClass('active');
    				for(var i = 0; i < filters.length; i++ ) {
    					$('li[data-option-value=".' + filters[i] + '"]').addClass('active').find('> a').addClass('active');
    				}
    
    			}
    
    		}, 1000);
    
    	});
    
    }

    3) Access the page with the following URL:
    https://trauerkartendruck.ch/2019/traueranzeigen.lasso#.1seitig.Baum_Wald_Blaetter

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029058

    Attila
    Participant

    Hello Rodrigo

    I’ve changed the code as suggested. The page is loaded with the selection “1-seitig”. But after that I can’t change any filters…

    Regards,
    Dave

    Edit: I use this link: https://trauerkartendruck.ch/2019/traueranzeigen.lasso#.1seitig as I want to see all the ‘1seitig’ cards.


    • This reply was modified 1 month ago by  Attila.
    #10029061

    Support2
    Keymaster

    Hello,

    Oh right, sorry for that.
    Just change my previous hash code to this new:

    if( window.location.hash ) {
    	$grid.isotope({
    		filter: window.location.hash.replace('#','')
    	});
    
    	var URLFilters = window.location.hash.split('.');
    	URLFilters.splice(0, 1);
    
    	$('li[data-option-value]').removeClass('active').find('> a').removeClass('active');
    	for(var i = 0; i < URLFilters.length; i++ ) {
    		$('li[data-option-value=".' + URLFilters[i] + '"]').addClass('active').find('> a').addClass('active');
    	}
    
    }

    * Note that just changed the variable name for URL filters.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029062

    Attila
    Participant

    Hi

    Unfortunately, this change has not brought a lot.
    1.) As soon as the page is loaded, the item “Alle zeigen” (show all) under “2. Thema” is no longer shown as active. During the loading process the point is still displayed as active.
    2.) If you select a second filter (e.g. Engel), not only the 1-sided cards appear, but also the 4-sided ones. The top filter seems to be ignored. If I use the mouse to click on the first filter again, everything works as it should.

    Regards,
    Dave


    #10029063

    Support2
    Keymaster

    Hello Dave,

    1) To start on the page load without any filter in active class you should remove the active class on the HTML. But this can affect the page when users enters on the page from URL’s without hashtgags. In that case we recommend you user all your links for the combination filter with hastags.

    2) Please try with this new code:

    if( window.location.hash ) {
    	$grid.isotope({
    		filter: window.location.hash.replace('#','')
    	});
    
    	var URLFilters = window.location.hash.split('.');
    	URLFilters.splice(0, 1);
    
    	
    	for(var i = 0; i < URLFilters.length; i++ ) {
    		$('li[data-option-value=".' + URLFilters[i] + '"]').parent().find('> li').removeClass('active').find('> a').removeClass('active');
    		$('li[data-option-value=".' + URLFilters[i] + '"]').addClass('active').find('> a').addClass('active');
    
    		var group = $('li[data-option-value=".' + URLFilters[i] + '"]').closest('[data-filter-group]').data('filter-group'),
    			value = '.'+URLFilters[i];
    
    		filters = {}
    		filters[group] = value;
    	}
    
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029065

    Attila
    Participant

    Thank you! First test looks great! 🙂


    #10029083

    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 8 posts - 1 through 8 (of 8 total)