Portfolio widget settings

I have multiple projects created and categories. 1) can I specify a default view selection instead of show all. When the page is loaded it shows all pictures 2) can I create a little space between the picture columns? Right now they are all against each other. www.new.ironbearmartialarts.com/home
Thank you
Also, does displaying meta data in sidebars help SEO?

Hello there,

To add spaces between project images, you can add this extra CSS code to Appearance > Customize > Additional CSS from dashboard.


@media only screen and (min-width:480px) {
  
  .roll-project .project-item .project-inner {
    padding: 10px;
  }
  
  .roll-project .project-item .project-pop {
    width: calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    height: calc(100% - 20px);
    height: -moz-calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
  } 
  
}

> Also, does displaying meta data in sidebars help SEO?

I am not sure as don’t have any expertise on SEO. I can only recommend that you should ask about it in this forum.

Regards,
Kharis

Hello,

Thank you very much for the CSS. Its funny I got to looking at it and realized it was ok. I will try it out and see which view I like. Thank you very much.

Is there a way to choose the default view or selection on that widget. Unfortunately, it defaults to Show All and displays 30-40 pictures to scroll through. I’d like to be able to choose one Category with 4 or 5 pics in it. Thanks

Wow, I tried it and it looks awesome. Thank you Kharis

I thought I might post the other question I asked in the previous reply. Thanks again.

Is there a way to choose the default view or selection on that widget. Unfortunately, it defaults to Show All and displays 30-40 pictures to scroll through. I’d like to be able to choose one Category with 4 or 5 pics in it. Thanks

To display default projects that are associated to certain category, try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin

  2. Go To Appearance > Custom JavaScript

  3. Paste the following code into the provided box

    jQuery(function($) {

    if ( $(’.project-wrap’).length ) {

     $('.project-wrap').each(function() {
    
       var self       = $(this);
       var filterNav  = self.find('.project-filter').find('a');
    
       var projectIsotope = function($selector){
    
         $selector.isotope({
           filter: '.science', // Default filter
           itemSelector: '.project-item',
           percentPosition: true,
           animationOptions: {
               duration: 750,
               easing: 'liniar',
               queue: false,
           }
         });
    
       }
    
       self.children().find('.isotope-container').imagesLoaded( function() {
         projectIsotope(self.children().find('.isotope-container'));
       });
    
       $(window).load(function(){
         projectIsotope(self.children().find('.isotope-container'));
       });
    
       filterNav.click(function(){
           var selector = $(this).attr('data-filter');
           filterNav.removeClass('active');
           $(this).addClass('active');
    
           self.find('.isotope-container').isotope({
               filter: selector,
               animationOptions: {
                   duration: 750,
                   easing: 'liniar',
                   queue: false,
               }
           });
    
           return false;
    
       });
    
     });
    

    }

    });

Specify your default category slug in this line:

filter: '.science', // Default filter

4 . Update.

If site cache enabled, you should flush it. Otherwise, the code addition won’t take any effect to your site.

Regards,
Kharis

Hello,

I haven’t run the TC Javascript yet. I noticed after 1) installing the CSS or 2) I updated to the latest version of 2.0 that on my mobile phone the header seemed to change responsiveness. The type on the header seemed huge. I flushed the WP Cache. I removed the CSS and the cache deleted and it didn’t fix on mobile view. It was perfect before. So right now I will wait to here from you before I retype the CSS for the pics. Please advise. Thank you

Kharis, I thought of something else. On the mobile view besides the header type being large the header now blocks most of the 2-5 pictures on the header slider. Again, I removed the CSS and cleared the cache and still the issue. The only other thing I upgraded from Pro 2.0 to the latest version of 2.0. Maybe you can look at www.new.ironbearmartialarts.com on a mobile phone to see. Everything else looks good. Probably tomorrow the site will go live at www.ironbearmartialarts.com . Thanks

Hello there,

I am sorry for the long delay.

Sydney Pro 2.0 has major design change, including site title, description, and slide text. To control the font size of site title and description, you can go to Appearance > Customize > Fonts > Font sizes; and set your size for Site title (try 32) and Site description (try 16).

To control the font size site title on mobile screen you can use CSS media query, for example:

/**  
 * Fix slider header title font size 
 * on mobile screen 
 */ 

@media only screen and (max-width:639px) {
  
  .text-slider .maintitle {
    font-size: 24px; 
  } 
  
}

Regards,
Kharis

Hi Kharis,

Does this jQuery function work in the last version of the Sydney Pro theme? I want to have one category filtered by default, so I tried this code but didn’t worked.

Thanks,

Hello there,

Please try this code:

jQuery(function($) {

  if ( $('.project-wrap').length ) {

    $('.project-wrap').each(function() {

      var self       = $(this);
      var filterNav  = self.find('.project-filter').find('a');

      var projectIsotope = function($selector){

        $selector.isotope({
          filter: '.landscapes', // Default filter
          itemSelector: '.project-item',
          percentPosition: true,
          animationOptions: {
              duration: 750,
              easing: 'liniar',
              queue: false,
          }
        });

      }

      self.children().find('.isotope-container').imagesLoaded( function() {
        projectIsotope(self.children().find('.isotope-container'));
      });

      $(window).load(function(){
        projectIsotope(self.children().find('.isotope-container'));
      });

      filterNav.click(function(){
          var selector = $(this).attr('data-filter');
          filterNav.removeClass('active');
          $(this).addClass('active');

          self.find('.isotope-container').isotope({
              filter: selector,
              animationOptions: {
                  duration: 750,
                  easing: 'liniar',
                  queue: false,
              }
          });

          return false;

      });

    });

  }


}); 

Don’t forget to set default project category class name in this line:

  filter: '.landscapes', // Default filter

Regards,
Kharis

Thanks Kharis, it works now.

Just two additional questions:

  • How could I do this only on some pages, instead of in all the website portfolio widgets?

  • Right now, when loaded for first time the projects are filtered, but the category (in the navigation filter menu) is not highlighted as it happens when you select it once (by default, it highlights the category in red).
    Is there any way of highlighting the pre-filtered category (.landscapes) in the navigation menu, as it would have been clicked on?

Hello there,

To run the code on specific page, specify the page ID class name in this line of code:

if ( $('.project-wrap').length ) {

Page ID class name reads like this .page-id-{PAGE ID NUMBER}. Replace {PAGE ID NUMBER} with your page ID, which can be found with this plugin.

So a line of code above will look like this:

if ( $('.page-id-1030 .project-wrap').length ) {

To highlight the initially active project category filter, add this jQuery code:

    jQuery(function($) {

      if ( $('.page-id-1030 .project-wrap').length ) {
        $('.project-filter a[data-filter=".landscapes"]').addClass('active');
      }

    }); 

Adjust the page ID number with yours.

Your complete code will look something like below:

jQuery(function($) {

  if ( $('.page-id-1030 .project-wrap').length ) {

    $('.project-wrap').each(function() {

      var self       = $(this);
      var filterNav  = self.find('.project-filter').find('a');

      var projectIsotope = function($selector){

        $selector.isotope({
          filter: '.landscapes', // Default filter
          itemSelector: '.project-item',
          percentPosition: true,
          animationOptions: {
              duration: 750,
              easing: 'liniar',
              queue: false,
          }
        });

      }

      self.children().find('.isotope-container').imagesLoaded( function() {
        projectIsotope(self.children().find('.isotope-container'));
      });

      $(window).load(function(){
        projectIsotope(self.children().find('.isotope-container'));
      });

      filterNav.click(function(){
          var selector = $(this).attr('data-filter');
          filterNav.removeClass('active');
          $(this).addClass('active');

          self.find('.isotope-container').isotope({
              filter: selector,
              animationOptions: {
                  duration: 750,
                  easing: 'liniar',
                  queue: false,
              }
          });

          return false;

      });

    });

  }


});


jQuery(function($) {

  if ( $('.page-id-1030 .project-wrap').length ) {
    $('.project-filter a[data-filter=".landscapes"]').addClass('active');
  }

}); 

Regards,
Kharis