Okay
  Public Ticket #1618327
Portfolio styling options
Closed

Comments

  • Sub started the conversation
    June 22, 2018 at 2:16pm

    Hey there, 

    thanks for making and maintaining this great theme, I have purchased this quite a while ago and still love it! 

    I want to ask if you can help me add one more styling option to the portfolio section which I have seen in many other recent themes on themeforest and which I think would greatly improve this theme as well. 

    So basically, right now it is only possible to either have "normal" or "big" elements in the portfolio. 

    The normal ones take one row and one column, while the big elements take two rows and two columns. 

    It would be cool to have two "half" sizes, one vertical and one horizontal.
    They would take one row and two colums or one column and two rows.


    Is there an easy way to add such a functionality by editing the css or js files? 

    I even think you should consider this functionality for a future update. I have seen it a few times on other very new themes published on themeforest and really like the effect. 

    Thanks in advance and keep up the good work!

  •  1,974
    Support replied
    June 25, 2018 at 8:01am

    Hi there.

    I'm trying to make this as short and clear as possible:

    open /js/scripts.js and go to function MasonryPortfolio()

    there you will realise that the width and height of portfolio item is calculated dynamically function of current window width and the number of columns

    var winWidth = window.innerWidth;
    var attr_col = jQuery('.portfolio').attr('data-col');

    There are several cases:

    - normal portfolio items

    - normal portfolio items with gutter (margins)

    - 'wide' portfolio items

    - 'wide' portfolio items with gutter (margins)

    That's where you can modify the code (height & width)


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied
    June 25, 2018 at 8:20am

    Hey, thanks for pointing me in the right direction! 
    I have added the following code to add the half-sizes: 

    // custom half size
     jQuery('.no-gutter .portfolio-item.vertical-half').css( { 
     width : postWidth * 2  + 'px',
     height : postWidth *0.7  + 'px' 
     });
     jQuery('.no-gutter .portfolio-item.horizontal-half').css( { 
     width : postWidth + 'px',
     height : postWidth * 1.4  + 'px' 
     });

    Now I could use jQuery to add those classes to specific portfolio items. But of course it would be better, if I could choose those new hal-sizes in the admin panel. 

    Can you also where and how I can add these sizes to the options in the admin panel? 

    Thanks!

  •  1,974
    Support replied
    June 25, 2018 at 9:32am

    Open /components/metaboxes/portfolio_options.php and modify the bolded line

    $this->select( 'portfolio_item_thumbnail_size',
    'Thumbnail Size',
    array('normal' => 'Normal', 'big' => 'Big', 'vertical-half' => 'Vertical Half', 'horizontal-half' => 'Horizontal Half'),
    'Select how thumbnail is displayed.'
                );

    This is to add the extra thumbnail sizes

    Then open /sections/portfolio_section_modern.php 

    if( get_post_meta(get_the_ID(), 'newave_portfolio_item_thumbnail_size', true) == 'big' ){

    $item_classes .= 'wide';
    }

    to

    if( get_post_meta(get_the_ID(), 'newave_portfolio_item_thumbnail_size', true) == 'big' ){ $item_classes .= 'wide';

     }

    else if( get_post_meta(get_the_ID(), 'newave_portfolio_item_thumbnail_size', true) == 'vertical-half' ){ 

    $item_classes .= 'vertical-half';

    }

    else if( get_post_meta(get_the_ID(), 'newave_portfolio_item_thumbnail_size', true) == 'horizontal-half' ){ 

    $item_classes .= 'horizontal-half';

    }


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied
    June 25, 2018 at 10:03am

    Wow, this works like a charm! 

    Now I just have one final question: Since I am using a child theme, how can I make WordPress take the "/components/metaboxes/portfolio_options.php" from the child theme instead of the parent theme? 
    Creating those directories in the child theme didn't work, only changing the file in the parent theme did..

    Thanks!

  •  1,974
    Support replied
    June 26, 2018 at 8:30am

    Being part of SMOF I admit is a bit difficult to do that...

    One possible solution is to include a modified copy of the whole directory \components\metaboxes in you child theme and include \components\metaboxes\metaboxes.php in your child's functions.php

    Rename NewaveMetaboxes class to something else

    Before doing in child's functions.php that you must remove all the actions defined in parent theme metaboxes constructor:

    add_action('add_meta_boxes', array($this, 'add_meta_boxes'));
    add_action('save_post', array($this, 'save_meta_boxes'));

    add_action('admin_enqueue_scripts', array($this, 'admin_script_loader'));

    Hope it makes sense.


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Sub replied
    June 26, 2018 at 10:26am

    Okay, thanks for the explanation. 
    I think this would be a bit too much effort.
    It will be easier to just remember that one file I edited in the parent theme since you don't release updates for this theme very often anyway. 

    Thanks again for your great help, you can close this ticket and mark it solved.

    And I do still think you should consider this feature for a future update ;)

  •  1,974
    Support replied
    June 26, 2018 at 2:22pm

    We appreciate (and consider) your suggestion

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy