JezK

Edit File: README.md

# Clever Portfolio
## ChangeLogs
### Version 1.0.3 - May 23, 2018
- Change color picker plugin.
- Add new hook, allow add Layout for shortcode.
- Fix option `show_filter` always checked.
- Improve template and style/js.

## Hooks references

1. `clever_portfolio_shortcode_layout_options`

This hook allow you to add custom layout(s).

This hook accept one argument which is an instance of `Clever_Portfolio_Shortcode_Options_Metabox`. Use it to retrieve setting fields and values.

For example, to add fifth layout which called "mobile":

function theme_prefix_add_mobile_portfoli_layout($metabox)
    {
        $layout = $metabox->get_value('layout');

?><img class="select-img<?php if ($layout === 'mobile') echo ' selected-img' ?>" data-layout="mobile" src="<?php echo get_template_directory_uri() . '/assets/images/layouts/mobile.png' ?>" alt="mobile"><?php
    }
    add_action('clever_portfolio_shortcode_layout_options', 'theme_prefix_add_mobile_portfoli_layout');

2. `clever_portfolio_shortcode_layout_options_dependencies`

This hook allow you to add dependent options for the layout(s) added via the `clever_portfolio_shortcode_layout_options` hook.

This hook accept one argument which is also an instance of `Clever_Portfolio_Shortcode_Options_Metabox`. Use it to retrieve setting fields and values.

For example, let's say the "mobile" layout need to set an optional breakpoint:

function theme_prefix_add_mobile_portfoli_layout_breakpoint_option($metabox)
    {
        $layout = $metabox->get_value('layout');
        $display = ('mobile' === $layout) ? 'block' : 'none';
        $breakpoint = $this->get_value('mobile_breakpoint') ? : 992;

?><tr id="mobile-layout-required" style="display: <?php echo $display ?>">
            <td class="text-align-top"><label><?php _e('Breakpoint (px)', 'text-domain') ?></label></td>
            <td class="clever-img-selector">
                <select name="<?php echo $this->get_field('mobile_breakpoint') ?>">
                    <option value="576" <?php selected($breakpoint, 576) ?>>
                        <?php _e('Small (576)', 'clever-portfolio') ?>
                    </option>
                    <option value="768" <?php selected($breakpoint, 768) ?>>
                        <?php _e('Medium (768)', 'clever-portfolio') ?>
                    </option>
                    <option value="992" <?php selected($breakpoint, 992) ?>>
                        <?php _e('Large (992)', 'clever-portfolio') ?>
                    </option>
                </select>
            </td>
        </tr><?php
    }
    add_action('clever_portfolio_shortcode_layout_options_dependencies', 'theme_prefix_add_mobile_portfoli_layout_breakpoint_option');

You will have to enqueue a custom script to handle the added layout and its dependencies. Something like:

$(".select-img").click(function (e) {
        var layout = this.dataset.layout;
        $("#single-portfolio-layout").val(layout);
        $(".select-img").removeClass("selected-img");
        $(this).addClass("selected-img");
        switch (layout) {
            case 'mobile':
                $("#mobile-layout-required").show();
                break;
            default:
                $("#layout-mode").hide();
                break;
        }
    });