/**
 * Process the CSS needed for the grid
 *
 * @access   public
 * @since    1.0.0
 * @param    $css_output          String - The incoming CSS output coming from other things using this filter
 * @param    $post_id             Int - The post ID of the brick
 * @param    $first_content_type  String - The first content type chosen for this brick
 * @param    $second_content_type String - The second content type chosen for this brick
 * @return   $html_output         String - A string holding the css the brick
 */
function mp_stacks_brick_content_output_css_postgrid($css_output, $post_id, $first_content_type, $second_content_type)
{
    if ($first_content_type != 'postgrid' && $second_content_type != 'postgrid') {
        return $css_output;
    }
    //Download per row
    $postgrid_per_row = mp_core_get_post_meta($post_id, 'postgrid_per_row', '3');
    //Post Spacing (padding)
    $postgrid_post_spacing = mp_core_get_post_meta($post_id, 'postgrid_post_spacing', '20');
    //Post Inner Margin (padding)
    $postgrid_post_inner_margin = mp_core_get_post_meta($post_id, 'postgrid_post_inner_margin', '0');
    //Padding inside the featured images
    $postgrid_featured_images_inner_margin = mp_core_get_post_meta($post_id, 'postgrid_featured_images_inner_margin', '10');
    //Image Overlay Color and Opacity
    $postgrid_images_overlay_color = mp_core_get_post_meta($post_id, 'postgrid_images_overlay_color', '#FFF');
    $postgrid_images_overlay_opacity = mp_core_get_post_meta($post_id, 'postgrid_images_overlay_opacity', '0');
    //Max Image Width
    $postgrid_feat_img_max_width = mp_core_get_post_meta($post_id, 'postgrid_feat_img_max_width', '0');
    $img_max_width_css = empty($postgrid_feat_img_max_width) ? NULL : '#mp-brick-' . $post_id . ' .mp-stacks-grid-item-image-holder{ max-width: ' . $postgrid_feat_img_max_width . 'px;}';
    //Use the Excerpt's Color as the default fallback for all text in the grid
    $default_text_color = mp_core_get_post_meta($post_id, 'postgrid_excerpt_color');
    //Padding for items directly under the image
    $postgrid_post_below_image_area_inner_margin = mp_core_get_post_meta($post_id, 'postgrid_post_below_image_area_inner_margin', '0');
    //Get CSS Output
    $css_output .= '
	#mp-brick-' . $post_id . ' .mp-stacks-grid-item{' . mp_core_css_line('color', $default_text_color) . mp_core_css_line('width', round(100 / $postgrid_per_row, 1), '%') . mp_core_css_line('padding', $postgrid_post_spacing, 'px') . '}
	#mp-brick-' . $post_id . ' .mp-stacks-grid-item-inner{' . mp_core_css_line('padding', $postgrid_post_inner_margin, 'px') . '
	}' . $img_max_width_css . '
	#mp-brick-' . $post_id . ' .mp-stacks-grid-item-inner .mp-stacks-grid-item-below-image-holder{' . mp_core_css_line('padding', $postgrid_post_below_image_area_inner_margin, 'px') . '
	}
	/*Below image, remove the padding-top (spacing) from the first text item*/
	#mp-brick-' . $post_id . ' .mp-stacks-grid-item-inner .mp-stacks-grid-item-below-image-holder [class*="link"]:first-child [class*="holder"]{
		' . ($postgrid_post_below_image_area_inner_margin != '0' ? 'padding-top:0px!important;' : NULL) . '	
	}
	/*Over image, remove the padding-top (spacing) from the first text item*/
	#mp-brick-' . $post_id . ' .mp-stacks-grid .mp-stacks-grid-item .mp-stacks-grid-item-inner .mp-stacks-grid-over-image-text-container-table-cell [class*="holder"]:first-child{
		padding-top:0px;
	}';
    $css_output .= apply_filters('mp_stacks_postgrid_css', $css_output, $post_id);
    $css_output .= '
	#mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container,
	#mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container-top,
	#mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container-middle,
	#mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container-bottom{' . mp_core_css_line('padding', $postgrid_featured_images_inner_margin, 'px') . '}';
    //Get the css output the the isotope button navigation
    $css_output .= mp_stacks_grid_isotope_nav_btns_css($post_id, 'postgrid');
    //Get the css output for the image overlay for mobile
    $css_output .= mp_stacks_grid_overlay_mobile_css($post_id, 'postgrid_image_overlay_animation_keyframes');
    //Get the bg color for each post
    $css_output .= mp_stacks_grid_bg_color_css($post_id, mp_core_get_post_meta($post_id, 'postgrid_taxonomy_terms', array()), 'taxonomy_bg_color');
    return $css_output;
}
Example #2
0
    /**
     * Create the CSS for the Load More Button and hook it to the grid css
     *
     * @access   public
     * @since    1.0.0
     * @param    Void
     * @param    $post_id Int - The ID of the Brick
     * @return   Array - All of the placement optons needed for Excerpt
     */
    function mp_stacks_grid_load_more_css_output($css_output, $post_id)
    {
        //Load More Meta Info
        $load_more_float = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_float', 'center');
        $load_more_button_color = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_color', 'NULL');
        $load_more_button_text_color = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_text_color', 'NULL');
        $load_more_button_color_mouse_over = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_color_mouse_over', 'NULL');
        $load_more_button_text_color_mouse_over = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_text_color_mouse_over', 'NULL');
        $css_output .= '
		#mp-brick-' . $post_id . ' .mp-stacks-grid-load-more-container{' . mp_core_css_line('text-align', $load_more_float) . '}
		#mp-brick-' . $post_id . ' .mp-stacks-grid-load-more-button{' . mp_core_css_line('color', $load_more_button_text_color) . mp_core_css_line('background-color', $load_more_button_color) . '}
		#mp-brick-' . $post_id . ' .mp-stacks-grid-load-more-button:hover{' . mp_core_css_line('color', $load_more_button_text_color_mouse_over) . mp_core_css_line('background-color', $load_more_button_color_mouse_over) . '}';
        return $css_output;
    }
/**
 * Process and return the CSS needed for Isotope Navigation Buttons. The function decides if the buttons have a background, text, and an icon. 
 * It also processes CSS for the icon size and alignment as well as colors for all button elements.
 *
 * @access   public
 * @since    1.0.0
 * @param    $css_output          String - The incoming CSS output coming from other things using this filter
 * @param    $post_id             Int - The post ID of the brick
 * @param    $meta_prefix  		  String - The prefix to put before each meta key when get_post_meta-ing
 * @return   $css_output          String - The CSS needed to properly style the isotope navigation buttons
 */
function mp_stacks_grid_isotope_nav_btns_css($post_id, $meta_prefix)
{
    $css_output = NULL;
    //Get isotope settings
    $isotope_filtering_on = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope', false);
    //If Isotope sorting is ON
    if ($isotope_filtering_on) {
        //Post Spacing (padding) - we match the post spacing for isotope buttons/dropdowns
        $post_spacing = mp_core_get_post_meta($post_id, $meta_prefix . '_post_spacing', '20');
        $button_text_size = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_text_size', 20);
        //Isotope Nav Container
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-container{';
        $isotope_nav_alignment = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_navigation_align', 'center');
        $css_output .= mp_core_css_line('text-align', $isotope_nav_alignment);
        if ($isotope_nav_alignment == 'left') {
            $css_output .= mp_core_css_line('margin-left', $post_spacing, 'px');
        }
        if ($isotope_nav_alignment == 'right') {
            $css_output .= mp_core_css_line('margin-right', $post_spacing, 'px');
        }
        //Line height for the container
        $css_output .= mp_core_css_line('line-height', $button_text_size * 3.5, 'px');
        $css_output .= '}';
        //Isotope Button BACKGROUND
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select{';
        //Button Background
        $enable_button_background = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_bg', true);
        if ($enable_button_background) {
            $button_bg_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_bg_color');
            $css_output .= mp_core_css_line('background-color', $button_bg_color);
        } else {
            $css_output .= 'background:transparent;';
            $css_output .= 'padding:0px;';
        }
        $css_output .= '}';
        //LAST Isotope Button with a BACKGROUND
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button:last-child, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select:last-child, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select:last-child{';
        //Remove the margin on the right
        $css_output .= 'margin-right: 0px';
        $css_output .= '}';
        //Isotope Button BACKGROUND Hover
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button:hover, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select:hover, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select:hover{';
        //If the button should have a background
        if ($enable_button_background) {
            //Set the background color upon hover
            $button_bg_color_hover = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_bg_color_hover');
            $css_output .= mp_core_css_line('background-color', $button_bg_color_hover);
        } else {
            $css_output .= 'background:transparent;';
        }
        $css_output .= '}';
        //Isotope Button TEXT
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button .mp-stacks-grid-isotope-btn-text, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select{';
        //If the button text should be shown
        $enable_button_text = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_text', true);
        if ($enable_button_text) {
            $button_text_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_text_color');
            $css_output .= mp_core_css_line('color', $button_text_color);
            $css_output .= mp_core_css_line('font-size', $button_text_size, 'px');
        } else {
            $css_output .= mp_core_css_line('text-indent', '-99999999px');
            $css_output .= mp_core_css_line('overflow', 'hidden');
        }
        $css_output .= '}';
        //Isotope Button TEXT HOVER
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button:hover .mp-stacks-grid-isotope-btn-text, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select:hover .mp-stacks-grid-isotope-btn-text, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select:hover .mp-stacks-grid-isotope-btn-text{';
        //If the button text should be shown
        if ($enable_button_text) {
            //Text hover color
            $button_text_color_hover = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_text_color_hover');
            $css_output .= mp_core_css_line('color', $button_text_color_hover);
        }
        $css_output .= '}';
        //Isotope Button ICONS
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon{';
        //If the button icons should be shown
        $enable_button_icons = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_icons', true);
        if ($enable_button_icons) {
            //Isotope Icon Alignment on the button - how should the icon sit in relation to the text?
            $button_icon_alignment = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_icons_alignment', 'left');
            //If the icon should be on the left, put a margin on the right
            if ($button_icon_alignment == 'left' && $enable_button_text) {
                $css_output .= 'margin-right:10px;';
            } else {
                if ($button_icon_alignment == 'right' && $enable_button_text) {
                    $css_output .= 'margin-left:10px;';
                }
            }
            //Icon Color
            $button_icon_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_icons_color', '#fff');
            $css_output .= mp_core_css_line('color', $button_icon_color);
            //Icon Size
            $button_icon_size = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_icons_size', 14);
            $css_output .= mp_core_css_line('font-size', $button_icon_size, 'px');
            //Icon Width and height
            $css_output .= mp_core_css_line('width', $button_icon_size, 'px');
            $css_output .= mp_core_css_line('height', $button_icon_size, 'px');
        }
        $css_output .= '}';
        //Isotope "All" Icon styling
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all{';
        //If the button icons should be shown
        if ($enable_button_icons) {
            //Icon Size
            $css_output .= mp_core_css_line('width', $button_icon_size, 'px');
            $css_output .= mp_core_css_line('height', $button_icon_size, 'px');
        }
        $css_output .= '}';
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-1,';
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-2,';
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-3,';
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-4{';
        //If the button icons should be shown
        if ($enable_button_icons) {
            $css_output .= mp_core_css_line('background-color', $button_icon_color);
        }
        $css_output .= '}';
        //"Filter By" Color and Font Size
        $filter_by_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_filter_by_color');
        $filter_by_size = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_filter_by_textsize', 15);
        $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-filterby-text{';
        $css_output .= mp_core_css_line('color', $filter_by_color);
        $css_output .= mp_core_css_line('font-size', $filter_by_size, 'px');
        $css_output .= '}';
        return $css_output;
    }
}