From 6235b0e5e3dec68a0b6ac7e303459e1c7a020532 Mon Sep 17 00:00:00 2001 From: Samuel Thomas Date: Fri, 6 Jul 2018 12:27:23 +0530 Subject: [PATCH] [#1299] - template for microstory with filters --- .../css/black-layouts/so-widgets.scss | 77 +++++++++++++--- .../themes/Akvo-responsive/css/main.css | 55 +++++++++--- .../inc/class-akvo-post-type.php | 28 +++--- .../themes/Akvo-responsive/inc/class-akvo.php | 2 +- .../themes/Akvo-responsive/inc/shortcodes.php | 87 +++---------------- .../class-akvo-shortcode-custom-posts.php | 25 ++++++ .../class-akvo-shortcode-nested-filters.php | 63 ++++++++++++++ .../inc/shortcodes/class-akvo-shortcode.php | 35 ++++++++ .../inc/shortcodes/templates/custom_posts.php | 39 +++++++++ .../shortcodes/templates/nested_filters.php | 14 +++ .../inc/templates/nested_filters.php | 79 ----------------- .../Akvo-responsive/templates/microstory.php | 22 +++++ 12 files changed, 332 insertions(+), 194 deletions(-) create mode 100644 code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-custom-posts.php create mode 100644 code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-nested-filters.php create mode 100644 code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode.php create mode 100644 code/wp-content/themes/Akvo-responsive/inc/shortcodes/templates/custom_posts.php create mode 100644 code/wp-content/themes/Akvo-responsive/inc/shortcodes/templates/nested_filters.php delete mode 100644 code/wp-content/themes/Akvo-responsive/inc/templates/nested_filters.php create mode 100644 code/wp-content/themes/Akvo-responsive/templates/microstory.php diff --git a/code/wp-content/themes/Akvo-responsive/css/black-layouts/so-widgets.scss b/code/wp-content/themes/Akvo-responsive/css/black-layouts/so-widgets.scss index c008b748..627ca841 100644 --- a/code/wp-content/themes/Akvo-responsive/css/black-layouts/so-widgets.scss +++ b/code/wp-content/themes/Akvo-responsive/css/black-layouts/so-widgets.scss @@ -45,16 +45,16 @@ width:100%!important; li{ - width: 29%; - padding: 2%; - margin:0!important; + width : 29%; + padding : 2%; + margin : 0; div.imgWrapper{ - background:#fff!important; - padding:0px!important; - width:100%!important; - max-height: 217px; - overflow: hidden; + background : #fff; + padding : 0px; + width : 100%; + max-height : 217px; + overflow : hidden; img, img:hover{ opacity: 1; @@ -71,12 +71,10 @@ width:100%!important; li { - width: 21%; - padding: 2%; - margin:0!important; - min-height:auto!important; - - div.imgWrapper {background:#fff!important;padding:0px!important;width:100%!important;max-height: 217px;overflow: hidden;} + width : 21%; + padding : 2%; + margin : 0; + min-height : auto; .staffName{text-align:center!important;} @@ -95,6 +93,42 @@ } + &.microstory{ + + a[href]{ color:inherit; } + + .imgWrapper{ + position: relative; + background-size: cover; + background-position: center center; + height: 250px; + + .excerpt{ + display: none; + box-sizing: border-box; + padding: 10px; + background: rgba(0, 0, 0, 0.7); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + text-align: center; + margin: 0; + width: 100%; + + p{ text-align: center; margin: 0;} + } + + &:hover .excerpt{ + display:block; + } + } + + + + } + } @media screen and ( max-width: 1024px ) and ( min-width: 768px ){ @@ -113,6 +147,13 @@ li:nth-child(4n+1){clear:none;} li:nth-child(3n+1){clear:left;} } + + &.microstory{ + li div.imgWrapper {max-height:350px;} + li:nth-child(3n+1){clear:none;} + li:nth-child(2n+1){clear:left;} + + } } } @media screen and ( max-width: 768px ){ @@ -132,8 +173,16 @@ li {width:46%;} li:nth-child(2n+1){clear:left;} } + + &.microstory li{ + width:96%; + div.imgWrapper {max-height:350px;} + } + } + + } @media screen and ( max-width: 400px ){ diff --git a/code/wp-content/themes/Akvo-responsive/css/main.css b/code/wp-content/themes/Akvo-responsive/css/main.css index bf98c86c..9f249eb8 100644 --- a/code/wp-content/themes/Akvo-responsive/css/main.css +++ b/code/wp-content/themes/Akvo-responsive/css/main.css @@ -7523,11 +7523,11 @@ body .gform_wrapper ul li.gfield.form-checkbox div.ginput_container_checkbox { .fullBlack .nested-filters ul.staff li { width: 29%; padding: 2%; - margin: 0 !important; } + margin: 0; } .fullBlack .nested-filters ul.staff li div.imgWrapper { - background: #fff !important; - padding: 0px !important; - width: 100% !important; + background: #fff; + padding: 0px; + width: 100%; max-height: 217px; overflow: hidden; } .fullBlack .nested-filters ul.staff li div.imgWrapper img, .fullBlack .nested-filters ul.staff li div.imgWrapper img:hover { @@ -7541,14 +7541,8 @@ body .gform_wrapper ul li.gfield.form-checkbox div.ginput_container_checkbox { .fullBlack .nested-filters ul.staff.new_partners li { width: 21%; padding: 2%; - margin: 0 !important; - min-height: auto !important; } - .fullBlack .nested-filters ul.staff.new_partners li div.imgWrapper { - background: #fff !important; - padding: 0px !important; - width: 100% !important; - max-height: 217px; - overflow: hidden; } + margin: 0; + min-height: auto; } .fullBlack .nested-filters ul.staff.new_partners li .staffName { text-align: center !important; } .fullBlack .nested-filters ul.staff.new_partners li img { @@ -7561,6 +7555,31 @@ body .gform_wrapper ul li.gfield.form-checkbox div.ginput_container_checkbox { filter: none !important; } .fullBlack .nested-filters ul.staff.new_partners li:nth-child(4n+1) { clear: left; } + .fullBlack .nested-filters ul.staff.microstory a[href] { + color: inherit; } + .fullBlack .nested-filters ul.staff.microstory .imgWrapper { + position: relative; + background-size: cover; + background-position: center center; + height: 250px; } + .fullBlack .nested-filters ul.staff.microstory .imgWrapper .excerpt { + display: none; + box-sizing: border-box; + padding: 10px; + background: rgba(0, 0, 0, 0.7); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + text-align: center; + margin: 0; + width: 100%; } + .fullBlack .nested-filters ul.staff.microstory .imgWrapper .excerpt p { + text-align: center; + margin: 0; } + .fullBlack .nested-filters ul.staff.microstory .imgWrapper:hover .excerpt { + display: block; } @media screen and (max-width: 1024px) and (min-width: 768px) { .fullBlack .nested-filters ul.staff li div.imgWrapper { max-height: 350px; } @@ -7575,6 +7594,12 @@ body .gform_wrapper ul li.gfield.form-checkbox div.ginput_container_checkbox { .fullBlack .nested-filters ul.staff.new_partners li:nth-child(4n+1) { clear: none; } .fullBlack .nested-filters ul.staff.new_partners li:nth-child(3n+1) { + clear: left; } + .fullBlack .nested-filters ul.staff.microstory li div.imgWrapper { + max-height: 350px; } + .fullBlack .nested-filters ul.staff.microstory li:nth-child(3n+1) { + clear: none; } + .fullBlack .nested-filters ul.staff.microstory li:nth-child(2n+1) { clear: left; } } @media screen and (max-width: 768px) { .fullBlack .nested-filters nav.anchorNav ul li, .fullBlack .nested-filters nav.anchorNav2 ul li { @@ -7592,7 +7617,11 @@ body .gform_wrapper ul li.gfield.form-checkbox div.ginput_container_checkbox { .fullBlack .nested-filters ul.staff.new_partners li { width: 46%; } .fullBlack .nested-filters ul.staff.new_partners li:nth-child(2n+1) { - clear: left; } } + clear: left; } + .fullBlack .nested-filters ul.staff.microstory li { + width: 96%; } + .fullBlack .nested-filters ul.staff.microstory li div.imgWrapper { + max-height: 350px; } } @media screen and (max-width: 400px) { .fullBlack .nested-filters ul.staff.new_partners li { width: 97%; } diff --git a/code/wp-content/themes/Akvo-responsive/inc/class-akvo-post-type.php b/code/wp-content/themes/Akvo-responsive/inc/class-akvo-post-type.php index ee28605e..471d7f34 100644 --- a/code/wp-content/themes/Akvo-responsive/inc/class-akvo-post-type.php +++ b/code/wp-content/themes/Akvo-responsive/inc/class-akvo-post-type.php @@ -47,8 +47,8 @@ function __construct(){ ), /* STAFF */ 'new_staffs' => array( - 'name' => 'Akvo staff', - 'singular_name' => 'Akvo staff', + 'name' => 'Akvo Staff', + 'singular_name' => 'Akvo Staff', 'supports' => array( 'title', 'thumbnail', 'revisions'), 'menu_icon' => get_bloginfo('template_url').'/images/akvoStaff_icn.png', 'has_archive' => true @@ -60,6 +60,14 @@ function __construct(){ 'supports' => array( 'title', 'thumbnail', 'revisions'), 'menu_icon' => get_bloginfo('template_url').'/images/akvoPartner_icn.png', 'has_archive' => true + ), + /* MICROSTORY */ + 'microstory' => array( + 'name' => 'Akvo Microstories', + 'singular_name' => 'Akvo Microstory', + 'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail', 'revisions'), + //'menu_icon' => get_bloginfo('template_url').'/images/akvoPartner_icn.png', + 'has_archive' => true ) ); @@ -68,25 +76,25 @@ function __construct(){ 'new_staffs_team' => array( 'post_type' => 'new_staffs', 'labels' => array( - 'name' => 'Staff team', + 'name' => 'Staff Team', 'add_new_item' => 'New Akvo team', 'new_item_name' => 'New Akvo team' ) ), 'staff_hub' => array( - 'post_type' => array( 'new_staffs', 'new_partners' ), + 'post_type' => array( 'new_staffs', 'new_partners', 'microstory' ), 'labels' => array( - 'name' => 'Staff hub', - 'add_new_item' => 'Add new staff hub', - 'new_item_name' => 'New staff hub' + 'name' => 'Staff Hub', + 'add_new_item' => 'Add New Hub', + 'new_item_name' => 'New Hub' ) ), 'new_partners_category' => array( 'post_type' => 'new_partners', 'labels' => array( - 'name' => 'Akvo partner category', - 'add_new_item' => 'Add new Akvo category', - 'new_item_name' => "New Akvo category" + 'name' => 'Akvo Partner Category', + 'add_new_item' => 'New Akvo Category', + 'new_item_name' => "New Akvo Category" ) ), ); diff --git a/code/wp-content/themes/Akvo-responsive/inc/class-akvo.php b/code/wp-content/themes/Akvo-responsive/inc/class-akvo.php index 88d49637..b89502ba 100644 --- a/code/wp-content/themes/Akvo-responsive/inc/class-akvo.php +++ b/code/wp-content/themes/Akvo-responsive/inc/class-akvo.php @@ -51,7 +51,7 @@ function assets(){ if ( is_singular() ) wp_enqueue_script('comment-reply'); //enqueue style in the head section - wp_enqueue_style('akvo-style', get_template_directory_uri().'/css/main.css', false, '2.5.4' ); + wp_enqueue_style('akvo-style', get_template_directory_uri().'/css/main.css', false, '2.5.5' ); wp_enqueue_style('akvo-fonts', '//fonts.googleapis.com/css?family=Source+Code+Pro:400,900,700,600,300,200,500|Quando|Questrial|Inconsolata|Muli:400,300italic,400italic,300|Raleway:400,900,800,700,600,500,100,200,300|Lobster|Lobster+Two:400,400italic,700,700italic|Lato:400,100,300,700,900,100italic,300italic,400italic,900italic,700italic', false, null ); wp_enqueue_style('jquery-bxslider', get_template_directory_uri().'/css/jquery.bxslider.css', false, '1.0.0' ); diff --git a/code/wp-content/themes/Akvo-responsive/inc/shortcodes.php b/code/wp-content/themes/Akvo-responsive/inc/shortcodes.php index 58c07832..e88e725e 100644 --- a/code/wp-content/themes/Akvo-responsive/inc/shortcodes.php +++ b/code/wp-content/themes/Akvo-responsive/inc/shortcodes.php @@ -1,86 +1,19 @@ shortcode, array( $this, 'plain_shortcode' ), 100 ); - } - - function plain_shortcode( $atts ){ - - } - - function get_atts( $atts ){ - $defaults_atts = apply_filters( $this->shortcode.'_atts', $this->get_default_atts() ); - return shortcode_atts( $defaults_atts, $atts, $this->shortcode ); - } - - function get_default_atts(){ - return array(); - } - } + $inc_files = array( + 'class-akvo-shortcode.php', // BASE CLASS FOR SHORTCODE WHICH NEEDS TO BE IMPORTED FIRST + 'class-akvo-shortcode-nested-filters.php', + 'class-akvo-shortcode-custom-posts.php', + ); - class AKVO_SHORTCODE_NESTED_FILTERS extends AKVO_SHORTCODE{ - - function __construct(){ - - $this->shortcode = 'akvo_nested_filters'; - - parent::__construct(); - - } - - function get_default_atts(){ - return array( - 'title' => '', - 'post_type' => '', - 'primary_filter' => '', - 'secondary_filter' => '', - 'showposts' => 100 - ); - } - - function plain_shortcode( $atts ){ - - $atts = $this->get_atts( $atts ); /* CREATE ATTS ARRAY FROM DEFAULT AND USER PARAMETERS IN THE SHORTCODE */ - - ob_start(); - - include('templates/nested_filters.php'); - - return ob_get_clean(); - } - + foreach( $inc_files as $inc_file ){ + include( 'shortcodes/' . $inc_file ); } - new AKVO_SHORTCODE_NESTED_FILTERS; - /* - add_shortcode( 'akvo_nested_filters', function( $atts ){ - - /* CREATE ATTS ARRAY FROM DEFAULT AND USER PARAMETERS IN THE SHORTCODE * - $atts = shortcode_atts( array( - 'title' => '', - 'post_type' => '', - 'primary_filter' => '', - 'secondary_filter' => '', - 'showposts' => 100 - ), - $atts, - 'akvo_nested_filters' - ); - - ob_start(); - - include('templates/nested_filters.php'); - - return ob_get_clean(); - - } ); - */ + + + add_shortcode( 'akvo_staff', function( $atts ){ diff --git a/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-custom-posts.php b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-custom-posts.php new file mode 100644 index 00000000..5c8cd607 --- /dev/null +++ b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-custom-posts.php @@ -0,0 +1,25 @@ +shortcode = 'akvo_custom_posts'; + $this->template = 'custom_posts.php'; + + parent::__construct(); + + } + + function get_default_atts(){ + return array( + 'post_type' => 'new_staffs', + 'filters' => '', + 'showposts' => 100 + ); + } + + + + } + + new AKVO_SHORTCODE_CUSTOM_POSTS; \ No newline at end of file diff --git a/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-nested-filters.php b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-nested-filters.php new file mode 100644 index 00000000..300e28de --- /dev/null +++ b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/class-akvo-shortcode-nested-filters.php @@ -0,0 +1,63 @@ +shortcode = 'akvo_nested_filters'; + $this->template = 'nested_filters.php'; + + parent::__construct(); + + } + + function get_default_atts(){ + return array( + 'title' => '', + 'post_type' => '', + 'primary_filter' => '', + 'secondary_filter' => '', + 'showposts' => 100 + ); + } + + /* GET TERMS FOR PRIMARY AND SECONDARY FILTERS */ + function get_terms( $taxonomy ){ + + $terms = array(); + if( $taxonomy ){ + $terms = get_terms( $taxonomy ); + } + + return $terms; + } + + function print_terms_list( $taxonomy, $list_class, $filter_type, $global_text = '' ){ + + $terms = $this->get_terms( $taxonomy ); + + + if( count( $terms ) ): + echo "'); \ No newline at end of file diff --git a/code/wp-content/themes/Akvo-responsive/inc/shortcodes/templates/nested_filters.php b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/templates/nested_filters.php new file mode 100644 index 00000000..3d117f9c --- /dev/null +++ b/code/wp-content/themes/Akvo-responsive/inc/shortcodes/templates/nested_filters.php @@ -0,0 +1,14 @@ +
+

+ +
+ +
+
\ No newline at end of file diff --git a/code/wp-content/themes/Akvo-responsive/inc/templates/nested_filters.php b/code/wp-content/themes/Akvo-responsive/inc/templates/nested_filters.php deleted file mode 100644 index edc9e6f0..00000000 --- a/code/wp-content/themes/Akvo-responsive/inc/templates/nested_filters.php +++ /dev/null @@ -1,79 +0,0 @@ - -
-

- -
-
- '); - $the_query = new WP_Query( array( 'post_type' => $atts['post_type'], 'showposts' => $atts['showposts'], ) ); - if( $the_query->have_posts() ): - while( $the_query->have_posts() ) : $the_query->the_post(); - - /* GET POST TERMS FROM SELECTED TAXONOMIES */ - $terms = array(); - foreach( array( $atts['primary_filter'], $atts['secondary_filter'] ) as $tax ){ - if( $tax ){ - $post_terms = get_the_terms( get_the_ID(), $tax ); - if( is_array( $post_terms ) ){ - foreach( $post_terms as $post_term ){ - $terms[ $tax ] = $post_term->term_id; - } - } - } - } - - - $data_str = "data-item='1'"; - foreach( $terms as $slug => $id ){ - $data_str .= " data-".$slug."='".$id."'"; /* ACCUMULATING DATA STRING FROM TERMS */ - } - - _e( '
  • ' ); - get_template_part( 'templates/'.$atts['post_type'] ); - _e('
    • '); - - endwhile; - endif; - wp_reset_query(); - _e(''); - ?> -
    -
    -
    \ No newline at end of file diff --git a/code/wp-content/themes/Akvo-responsive/templates/microstory.php b/code/wp-content/themes/Akvo-responsive/templates/microstory.php new file mode 100644 index 00000000..68a0bd46 --- /dev/null +++ b/code/wp-content/themes/Akvo-responsive/templates/microstory.php @@ -0,0 +1,22 @@ +ID ), 'medium' ); + if( is_array( $thumbnail ) ){ + $url = $thumbnail[0]; + } + + /* MAKE THE HTML MARKUP SIMILAR TO THE ONE IN REGIONAL PAGES, SO THAT IT CAN BE REUSED THERE ALSO */ + +?> + + +
    +
    +
    + +
    +     + +