Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Portfolio Filter Problem

I have problem and i cant solve am using filters for wp portfolio and i have fillter ''All'' that show me all pictures i want to remove this filter that wont show please i realy need help i will give all codes you need

User Gravatar

andydesign

Posted Nov 1 2013 1:13 UTC

$25


  • Assigned To ayublin
  • Solved
  • wordpress
  • 2086 Views

37 Replies


Hi Andy, any url we can check on?

Please clarify the problem, do you want to remove the filter category link(s) that doesn't have any result?

User Gravatar

ayublin

Posted Nov 1 2013 1:22 UTC

Portfolio filter php

        <?php get_header(); ?>

        <div class="container inner_content">
            <div class="row hidden-phone">
                <div class="span12">
                        <div id="filters" class="btn-group ">
                            <button data-filter=".1" class="btn btn-info btn-default" >Recent Works</button> <?php 
                                $categories = get_categories(array('type' => 'post', 'taxonomy' => 'portfolio-category')); 
                                foreach($categories as $category) {
                                $group = $category->slug;
User Gravatar

andydesign

Posted Nov 1 2013 1:23 UTC

i want to remove fillter recent work(all) from my site that show all pictures am putting on am using isotope filters

heres a link to check

http://art.missakterzian.com/design/4-columns-portfolio/

i just want to have filters tab by years i want to remove filter that show all picturesat start

User Gravatar

andydesign

Posted Nov 1 2013 1:25 UTC

I think you can simply remove the button:

<button data-filter=".1" class="btn btn-info btn-default" >Recent Works</button>

So that it will looks like this:

    <?php get_header(); ?>

    <div class="container inner_content">
        <div class="row hidden-phone">
            <div class="span12">
                    <div id="filters" class="btn-group ">
                        <?php 
                            $categories = get_categories(array('type' => 'post', 'taxonomy' => 'portfolio-category')); 
                            foreach($categories as $category) {
                            $group = $category->slug;
User Gravatar

ayublin

Posted Nov 1 2013 1:30 UTC

i remove it as you said and when i open link i gave you tab recent works dont show but the pictures are still on

am using http://isotope.metafizzy.co/

User Gravatar

andydesign

Posted Nov 1 2013 1:34 UTC

it says i have to change it in jQuery script

User Gravatar

andydesign

Posted Nov 1 2013 1:41 UTC

I see, we can automatically select the first button and apply the filtering for that selected button. I am currently away, I can be more detail in about 2 hours.

If you're familiar with editing javascript, you can add this to your javascript file after the initialization of isotope, I think that's at the end of this file http://art.missakterzian.com/design/wp-content/themes/Pride/assets/js/custom.js.

var btn = jQuery('#filters button:first').addClass('btn-info').removeClass('btn-inverse');

jQuery("#portfolio").isotope({
    filter: "'" + btn.data('filter') + "'",
    isAnimate: true
});
User Gravatar

ayublin

Posted Nov 1 2013 2:33 UTC

yes please i really need help by that thank you very much i will wait for you

User Gravatar

andydesign

Posted Nov 1 2013 2:41 UTC

Hi Andy,

So I assume that this feature is integrated by the WordPress theme, we need to do 2 things :

  1. Remove Recent Works button
  2. Tell Isotope to filter based on the first button after initialization

Unfortunately we need to do hard coding modification for those steps since we can't alter it via WordPress hooks or settings, it can be done fully via JavaScript, but it won't be pretty. So those changes will be lost when you update the theme, please remember to take notes on this removal to apply it again after update.

The tackle the first problem please remove the button via PHP just like you have done earlier.

As for the 2nd step, please open up your file at http://art.missakterzian.com/design/wp-content/themes/Pride/assets/js/custom.js, you should be able to find it under your current theme directory.

Try adding this line of code:

jQuery('#filters button:first').click();

At line 121, exactly under function closing });

Or you can replace all the code below this code at line 93

// PORTFOLIO FILTERING - ISOTOPE
//**********************************

With this code:

// PORTFOLIO FILTERING - ISOTOPE
//**********************************
jQuery.noConflict()(function($){
var $container = $('#portfolio');

if($container.length) {
    $container.waitForImages(function() {

        // select the first button
        var btn = jQuery('#filters button:first').addClass('btn-info').removeClass('btn-inverse');

        // initialize isotope
        $container.isotope({
          itemSelector : '.block',
          layoutMode   : 'fitRows',
          filter: "'" + btn.data('filter') + "'", // filter by the button data filter
        });

        // filter items when filter link is clicked
        $('#filters button').click(function(){
          var selector = $(this).attr('data-filter');
          $container.isotope({ filter: selector });
          $(this).removeClass('btn-inverse').addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-inverse');

          return false;
        });

    },null,true);
}});
User Gravatar

ayublin

Posted Nov 1 2013 6:35 UTC

i change all code but still openng with showing all pictures

can you see how show you

http://art.missakterzian.com/design/4-columns-portfolio/

User Gravatar

andydesign

Posted Nov 1 2013 6:54 UTC

Oh wow, there was a mistake at the code, no wonder the isotope never initialized at the beginning. I have updated the code, please re-apply, the mistake was:

$('#container').isotope({

Should be:

$container.isotope({
User Gravatar

ayublin

Posted Nov 1 2013 7:13 UTC

my god i think it work can you check?

User Gravatar

andydesign

Posted Nov 1 2013 7:26 UTC

Yes I think it's working :) and sorry to say the site is loading very slow from here. It maybe my internet connection though.

User Gravatar

ayublin

Posted Nov 1 2013 7:45 UTC

by me is opening fast maybe its connction but what can i do by that

User Gravatar

andydesign

Posted Nov 1 2013 7:46 UTC

maybe coz pic are heavy what u think

User Gravatar

andydesign

Posted Nov 1 2013 7:47 UTC

Oh it's cool then, my internet connection is sucks actually, so I can't be sure.

But for a WordPress site, using a caching plugin would help greatly in most cases, try using this:

http://wordpress.org/plugins/hyper-cache/

To analyze your page speed, and see what problems you may have, use this tool:

http://developers.google.com/speed/pagespeed/insights/

Those are outside the scope of this question, for the sake of keeping things in place, let's focus on the isotope issue :)

User Gravatar

ayublin

Posted Nov 1 2013 7:52 UTC

by testing it showing me that

http://postimg.org/image/i36i6ivmt/

what hyper cache do? does it make site better in speed

User Gravatar

andydesign

Posted Nov 1 2013 8:00 UTC

As it name implies, it cache your pages, so instead of processing the PHP code including the database queries every time visitors access it, the plugin will store the processed results and server those page with the stored caches.

User Gravatar

ayublin

Posted Nov 1 2013 8:05 UTC

aha thats gd ur blessing i swear and i have to reduce size of images for sure coz they r heavy on site

User Gravatar

andydesign

Posted Nov 1 2013 8:13 UTC

send me your details to pay you for your help i really appriciate

User Gravatar

andydesign

Posted Nov 1 2013 9:17 UTC

Ayublin i still have abit problems with filter the site be4 was testing i put this code to a site

http://missakterzian.com/4-columns-portfolio

it open with all images then jump like should be can you check?

User Gravatar

andydesign

Posted Nov 3 2013 22:38 UTC

Hi Andy,

That's because isotope starts on working after all the images has been loaded:

// custom.js
$container.waitForImages(function() {
    // initialize isotope
},null,true);

Therefore the filtering also hasn't been applied. Isotope may not be working properly if waitForImages function isn't used, since isotope needs to calculate the height and width of each image item in order to works.

What I can think of now is to remove the usage waitForImages function, but then we need to specify the height of width attribute of each images.

User Gravatar

ayublin

Posted Nov 5 2013 3:18 UTC

what if we fillter loding images as a year like (.1) thats 2013 what happend if we remove .waitForImages(function() {

User Gravatar

andydesign

Posted Nov 5 2013 5:49 UTC

Yes, the filtering already applied before, if you don't mind please test by removing those lines and see if the filter applied almost immediately and the isotope not messed up :)

User Gravatar

ayublin

Posted Nov 5 2013 6:39 UTC

if i remove this line

$container.waitForImages(function() {

then doesnt fillter so wont work

User Gravatar

andydesign

Posted Nov 5 2013 6:46 UTC

Ohh, did you give it a try?

Please note that you need to remove the closing braces as well, so it will be like this:

jQuery.noConflict()(function($){
var $container = $('#portfolio');

if($container.length) {

  // select the first button
  var btn = jQuery('#filters button:first').addClass('btn-info').removeClass('btn-inverse');

  // initialize isotope
  $container.isotope({
    itemSelector : '.block',
    layoutMode   : 'fitRows',
    filter: "'" + btn.data('filter') + "'", // filter by the button data filter
  });

  // filter items when filter link is clicked
  $('#filters button').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    $(this).removeClass('btn-inverse').addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-inverse');

    return false;
  });

}});
User Gravatar

ayublin

Posted Nov 5 2013 7:21 UTC

i change code can you try to open site and tell me how is it

User Gravatar

andydesign

Posted Nov 5 2013 7:39 UTC

The filter now applied much faster, so it is looking almost immediate and the items doesn't seems to be messed up. So it's looking good here, how about in your end?

User Gravatar

ayublin

Posted Nov 5 2013 8:05 UTC

yes it looking the same it open fast and filter 2013 quickly i think changing the code was correct

User Gravatar

andydesign

Posted Nov 5 2013 8:07 UTC

Also please add this code:

 $container.waitForImages(function() {
    $container.isotope('reLayout');
 }, null,true);

Under:

  // initialize isotope
  $container.isotope({
    itemSelector : '.block',
    layoutMode   : 'fitRows',
    filter: "'" + btn.data('filter') + "'", // filter by the button data filter
  });

To make sure the items layout not messed up.

User Gravatar

ayublin

Posted Nov 5 2013 8:34 UTC

i put the code but it make'd same as before

User Gravatar

andydesign

Posted Nov 5 2013 8:47 UTC

Hmm, that's weird, please make sure this how the code looks:

jQuery.noConflict()(function($){

  var $container = $('#portfolio');

  if($container.length) {

    // select the first button
    var btn = jQuery('#filters button:first').addClass('btn-info').removeClass('btn-inverse');

    // initialize isotope
    $container.isotope({
      itemSelector : '.block',
      layoutMode   : 'fitRows',
      filter: "'" + btn.data('filter') + "'", // filter by the button data filter
    });

    $container.waitForImages(function() {
      $container.isotope('reLayout');
    }, null,true);

    // filter items when filter link is clicked
    $('#filters button').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      $(this).removeClass('btn-inverse').addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-inverse');

      return false;
    });
  }
});
User Gravatar

ayublin

Posted Nov 5 2013 8:52 UTC

Solution

This didn't solve your task? Get your own custom solution.

ok will doo

User Gravatar

andydesign

Posted Nov 5 2013 8:57 UTC

i change see how its working b you?

User Gravatar

andydesign

Posted Nov 5 2013 9:04 UTC

Before, sometimes the images layout are messed up, but after the code added, after the images loaded, isotope reLayout will be called, therefore the images layout will be displayed correctly again. If you think the issue resolved, please mark the ticket as resolved :)

User Gravatar

ayublin

Posted Nov 5 2013 9:43 UTC

yes ok gd i will test few times and if will work gd then will mark resolved thank you

User Gravatar

andydesign

Posted Nov 5 2013 9:49 UTC

Cool, you're welcome :)

User Gravatar

ayublin

Posted Nov 5 2013 10:07 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions