Okay
  Public Ticket #1967013
Link to filtered portfolio category (query)
Closed

Comments

  • Joeyzo started the conversation

    Hi NeuronThemes,

    I'm setting up a portfolio page and want to link a button to a specific category on the portfolio page. 

    Example; the portfolio has three category's + the ALL functionality. How would it be possible to link to a specific category instead of the default ALL setting?

    Kind regards,
    Joey

  •  675
    Neuron replied

    Hi Joey,

    So you want to make these clickable instead of the filtering directly to your website, is that right?

    Feel free to ask for anything you need.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Joeyzo replied

    Hi Neuron,

    No it's not what I meant. What I would like to do is to link to a specific portfolio category. For example; I have a Home, Portfolio and Contact page. If I would want to link for example a title, which is on my homepage, and would like to link to www.example.com/portfolio/, but also want a specific category to be active when I open the page, how would I do this?

    When I have five category's; category 1, category 2, category 3, category 4 & category 5. I want to be able to link from the homepage to say category 4. I still want to display all 5 category's, but like to have category 4 to be active when the page opens. I guess it will look something like this; www.example.com/portfolio#category4

    The url of the example www.example.com/portfolio#category4 doens't work, but I can imagine there is a solution to acccomplish this, but I can't figure it out myself.

    Hope this clarifies the issue.

    Thanks in advance!

    Kind Regards,
    Joey


  •  675
    Neuron replied

    Hey Joey,

    Well that requires a bit of extra work, further customization is not covered by support. you can check the following example, it explains how to implement url hashing in your website.

    - https://isotope.metafizzy.co/filtering.html#url-hash

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Joeyzo replied

    Hey Neuron,

    Thanks for the quick reply.

    Could you also tell me where to add the code?

    Kind regards,
    Joey

  •  675
    Neuron replied

    Hi Joe,

    You're welcome anytime.

    The code needs to be added as Custom JavaScript, but it needs to match also our selectors which is for the holder '.masonry' and for the selector: '.selector'

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Joeyzo replied

    Hi Neuron,

    So when I add the code from below to a specific page (in my case the portfolio (-> projecten) page), I can link to the portfolio category's?

    function getHashFilter() {
      var hash = location.hash;
      // get filter=filterName
      var matches = location.hash.match( /filter=([^&]+)/i );
      var hashFilter = matches && matches[1];
      return hashFilter && decodeURIComponent( hashFilter );
    }
    $( function() {
      var $grid = $('.isotope');
      // bind filter button click
      var $filters = $('#filters').on( 'click', 'button', function() {
        var filterAttr = $( this ).attr('data-filter');
        // set filter in hash
        location.hash = 'filter=' + encodeURIComponent( filterAttr );
      });
      var isIsotopeInit = false;
      function onHashchange() {
        var hashFilter = getHashFilter();
        if ( !hashFilter && isIsotopeInit ) {
          return;
        }
        isIsotopeInit = true;
        // filter isotope
        $grid.isotope({
          itemSelector: '.selector',                                                                <---- (.selector?)
          filter: hashFilter
        });
        // set selected class on button
        if ( hashFilter ) {
          $filters.find('.masonry').removeClass('is-checked');                                      <---- (.masonry?)
      $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
        }
      }
      $(window).on( 'hashchange', onHashchange );
      // trigger event handler to init Isotope
      onHashchange();
    });

    I changed the selector and the hashFilter to .selector and .masonry, is this correct?

    Hope to hear from you, thanks in advance!

    Kind regards,
    Joey




  •   Neuron replied privately
  •   Joeyzo replied privately
  •  675
    Neuron replied

    Hey Joey,

    I have added the snippet in the JavaScript, I will attach it here also, incase you need it.

    You can filter now with URL, like the following link:

    https://joepvanlinder.nl/projecten/#filter=.murals

    Feel free to ask for anything you need.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Joeyzo replied

    Hey Neuron,

    Thanks for looking into it, really appreciated! The only thing is, I would also like the category to be active when I acces the url. How would I accomplish this?

    Also, I'm still wondering how to change the url of the individual portfolio pages. I would like to change the url from portfolio to "projecten", because the "projecten" page is the page I display the portfolio on.

    Kind regards,
    Joey

  •  675
    Neuron replied

    Hi,

    1) I fixed the active issue, now the filter that is on URL will be active.

    2) Please go to the Appearance > Customize > Portfolio > Functionality and change the prefix. http://prntscr.com/nd5ns7

    Do not forget to click save changes in Settings > Permalinks, after you change it.

    Feel free to ask for anything you need.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.

  • Joeyzo replied

    Hi Neuron,

    Thanks, I can see it's working now. There is one more thing, I wrote more than 150 lines of css, which are deleted by the plugin you added. Can you please get these back? It took me a lot of work...

    In addition to your reply on the portfolio settings page where I can modify the url of the portfolio page; this is not working. Because when I update the url to something diffrent than portfolio, it returns a 404 error. See the screenshot 'portfolio-url.jpg' in the attachment. When I change the permalink settings afterwards it does work, but then the projecten page itself is totally broken, see second screenshot 'projecten-page.jpg'. Also the elementor builder can't acces the page anymore and returns an error as well for the projecten page, see screenshot 'elementor-error.jpg'.

    Hope to hear from you asap.

    Kind regards,
    Joey

  •   Neuron replied privately
  • Joeyzo replied

    Hi Neuron,

    I changed the functions.php and it is now possible to log in again. Could you please look into one more time? The projecten/portfolio issue is still there.

    I'm also not able to link to the specific (active) portfolio category anymore.

    Hope to hear from you soon.

    Regards,
    Joey

  •  675
    Neuron replied

    Hey,

    I had to flush the permalinks(click save changes on Settings > Permalinks), everything seems to be working alright now.

    There's an option in the posts to change the hover and active. http://prntscr.com/nehjh9

    It will be available from the URL and by clicks.

    - https://joepvanlinder.nl/projecten/#filter=.murals

    Feel free to ask for anything you need.

    Kind Regards


    Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.