WordPress.org
Get WordPress

Plugin Directory

Changeset 2715217


Ignore:
Timestamp:
04/27/2022 05:08:03 AM (4 years ago)
Author:
bhartlenn
Message:

Added new sort buttons to portfolio header controls that allow visitors to sort portfolio items by newest or oldest first

Location:
bw-portfolio/trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • bw-portfolio/trunk/assets/css/bw-portfolio-style.css

    r2714625 r2715217  
    77}
    88
    9 .bw_portfolio_header {
    10    
    11 }
    12 
    13 section.portfolio_filter_tags {
     9.bw_portfolio_header form {
    1410    display: flex;
    15     margin: 0.5em 0 1em;
    16 }
    17 
    18 section.portfolio_filter_tags>a.portfolio_filter_tag {
    19     margin: 0 0.5vw 0 0;
     11    padding: 0 0 1rem;
     12}
     13
     14/* portfolio filter and sort buttons */
     15.bw_portfolio_header input[type="radio"] {
     16    display: none;
     17}
     18.bw_portfolio_header label {
     19    margin: 0;
     20    background: #efefef;
     21    color: #666;
     22    border: 1px solid #ccc;
     23    border-radius: 3px;
    2024    padding: 0.5em 1em;
    21     font-size: 0.8em;
    22     text-decoration: none;
    23     background: #efefef;
    24     border: 1px solid #ccc;
    25     border-radius: 5px;
     25    font-size: 0.8rem;
     26    cursor: pointer;
     27}
     28.bw_portfolio_header input[type='radio']:checked + label {
     29    background: #fff;
     30    color: #111;
     31}
     32.bw_portfolio_header .portfolio_sort::before {
     33    content: "|";
     34    margin: 0 4px;
    2635    color: #444;
    2736}
    28 
    29 section.portfolio_filter_tags>a.portfolio_filter_tag:focus {
    30     border: none;
    31     outline: none;
    32 }
    33 section.portfolio_filter_tags>a.portfolio_filter_tag:hover {
    34     background: #fff;
    35 }
    36 
    37 section.portfolio_filter_tags>a.portfolio_filter_tag.bwbh_active_tag,
    38 section.portfolio_filter_tags>a.portfolio_filter_tag.bwbh_active_tag:link,
    39 section.portfolio_filter_tags>a.portfolio_filter_tag.bwbh_active_tag:visited,
    40 section.portfolio_filter_tags>a.portfolio_filter_tag.bwbh_active_tag:focus,
    41 section.portfolio_filter_tags>a.portfolio_filter_tag.bwbh_active_tag:active {
    42     border: none;
    43     background: #02b;
    44     color: #fff;
    45 }
    46 
    47 .bw_portfolio_heading {}
    4837
    4938.bw_portfolio_content_area {
    5039    display: grid;
    51     grid-gap: 1rem;
     40    grid-gap: 2rem;
    5241    align-items: top;
    5342    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    … …  
    8978
    9079/**
    91  * Styling cards of Portfolio Items shown in grid
     80 * Styling cards of Portfolio Item cards shown in grid
    9281 */
    9382.bw_portfolio_item {
    … …  
    121110}
    122111
    123 .bw_portfolio_item_title {}
    124 
    125 .bw_portfolio_item_content {}
    126 
    127112.bw_portfolio_tags {
    128113    margin: 1em 0 0;
    129114    font-weight: lighter;
    130     font-style: italic;
    131     font-size: 0.8em;
    132115}
    133116
    … …  
    212195    max-height: 90%;
    213196    overflow-x: auto;
    214     white-space: wrap;
     197    white-space: normal;
    215198    box-shadow: 4px 4px 6px 0px #222;
    216199}

  • bw-portfolio/trunk/assets/js/bw-portfolio-script.js

    r2714132 r2715217  
    1818        bwbh_loader_gif.setAttribute('src', bwbh_portfolio_js_vars.loader_gif_url);
    1919        bwbh_modal_el.appendChild(bwbh_loader_gif);
    20 
    2120       
    2221        // append modal to body
    2322        document.body.appendChild(bwbh_modal_el);
    2423   
    25         // flag variable used to prevent multiple clicks of relevant links
     24        // use let for flag variable used to prevent multiple clicks of relevant links and buttons
    2625        let clicked;
    2726       
    28         // detecting all clicks on document because dealing with dynamically added elements
     27        // detecting all clicks on document because often dealing with dynamically added elements
    2928        document.addEventListener('click', function(e){
    3029       
    … …  
    3938            }, 750);
    4039       
    41 
    42 
    43             /**
    44              * if clicking on portfolio item, or anyting that has portfolio item as parent, and modal_off attribute is NOT set(adds .modal_off class to .bw_portfolio_content_area)
    45              */
     40            // if clicking on portfolio item, or anyting that has portfolio item as parent, and modal_off attribute is NOT set(adds .modal_off class to .bw_portfolio_content_area)
    4641            if ( (e.target.classList.contains('bw_portfolio_item') || e.target.closest('.bw_portfolio_item') !== null) &&
    4742            !e.target.closest('.bw_portfolio_content_area').classList.contains('modal_off') ) {
    … …  
    8782                    }
    8883                   
    89                     /**
    90                      * dynamically create full view of portfolio item and then insert into modal
    91                      */
     84                    // dynamically create full view of portfolio item and then insert into modal
    9285                    const bwbh_portfolio_item_full = document.createElement("article");
    9386                    bwbh_portfolio_item_full.setAttribute('class', 'bw_portfolio_item_full');
    … …  
    155148            }
    156149       
    157 
    158 
    159             /**
    160              * if clicking on portfolio tag filter link, display portfolio items with that tag
    161              */
    162             if (e.target.classList.contains('portfolio_filter_tag')) {
    163                 e.preventDefault();
    164                
     150            // if clicking on portfolio tag filter or sort label, display portfolio items with that portfolio tag and sort order
     151            if (e.target.classList.contains('bw_portfolio_form_label')) {
     152
    165153                // initialize vars for handling portfolio filter tag click
    166154                let bwbh_clicked_tag = e.target;
    167155                let bwbh_portfolio_container = bwbh_clicked_tag.closest('.bw_portfolio_container');
    168                 let bwbh_filter_tags = bwbh_portfolio_container.querySelectorAll('.portfolio_filter_tag');
    169156                let bwbh_portfolio_container_height = bwbh_portfolio_container.clientHeight;
    170157                let bwbh_portfolio_content_area = bwbh_portfolio_container.querySelector('.bw_portfolio_content_area');
    171                 let bwbh_term = bwbh_clicked_tag.dataset.term;
    172158                let bwbh_num_of_words = bwbh_portfolio_content_area.dataset.num_of_words;
    173            
    174                 // remove .bwbh_active_tag class from any active filter tags
    175                 bwbh_filter_tags.forEach(function(bwbh_looped_active_tag){
    176                     bwbh_looped_active_tag.classList.remove('bwbh_active_tag');
    177                 });
    178                 // select .bwbh_active_tag and if it somehow still exists, remove class
    179                 let bwbh_active_tag = document.querySelector('.portfolio_filter_tag.bwbh_active_tag');
    180                 if (bwbh_active_tag !== null) {
    181                     bwbh_active_tag.classList.remove('bwbh_active_tag');
     159               
     160                // boolean used to handle showing tags on cards of filtered portfolio items
     161                let bwbh_show_tags = bwbh_portfolio_content_area.classList.contains('show_tags');
     162                // boolean used to handle whether modal is on or off for filtered portfolio items
     163                let bwbh_modal_off = bwbh_portfolio_content_area.classList.contains('modal_off');
     164               
     165                // clear the old set of portfolio items
     166                if (bwbh_portfolio_content_area !== null) {
     167                    bwbh_portfolio_content_area.innerHTML = "";
    182168                }
    183                 // add .bwbh_active_tag class to clicked filter tag
    184                 bwbh_clicked_tag.classList.add('bwbh_active_tag');
    185            
     169               
    186170                // create loader gif element
    187                 let bwbh_loader_gif = document.createElement('img');
     171                const bwbh_loader_gif = document.createElement('img');
    188172                bwbh_loader_gif.classList.add('loader');
    189173                bwbh_loader_gif.setAttribute('src', bwbh_portfolio_js_vars.loader_gif_url);
    … …  
    192176                    // append loader gif to portfolio header area
    193177                    bwbh_portfolio_container.querySelector('header').appendChild(bwbh_loader_gif);
    194                     // set height of container so content doesn't jump around twice, just once
    195                     bwbh_portfolio_container.style.height = bwbh_portfolio_container_height + "px";
     178                   
     179                    // set height of container so content doesn't jump from current height, to 0 height, then to new height
     180                    // when portfolio items get filtered to be less rows than are originally shown, the below line was keeping height of portfolio container to height of original rows
     181                    //bwbh_portfolio_container.style.height = bwbh_portfolio_container_height + "px";
    196182                }
    197                
    198                 // clear the old set of portfolio items
    199                 if (bwbh_portfolio_content_area !== null) {
    200                     bwbh_portfolio_content_area.innerHTML = "";
    201                 }
    202            
    203                 // boolean used to handle showing tags on cards of filtered portfolio items
    204                 let bwbh_show_tags = bwbh_portfolio_content_area.classList.contains('show_tags');
    205                 // boolean used to handle whether modal is on or off for filtered portfolio items
    206                 let bwbh_modal_off = bwbh_portfolio_content_area.classList.contains('modal_off');
    207                
    208                 // setup form data to send with feth request
    209                 const bwbh_data1 = new FormData();
    210                 bwbh_data1.append( 'bwbh_term', bwbh_term);
    211                 bwbh_data1.append( 'bwbh_show_tags', bwbh_show_tags);
    212                 bwbh_data1.append( 'bwbh_modal_off', bwbh_modal_off);
    213                 bwbh_data1.append( 'bwbh_num_of_words', bwbh_num_of_words);
    214 
    215                 // format form data as plain, then into JSON so fetch can send data as JSON
    216                 const form1_data_json = JSON.stringify( Object.fromEntries( bwbh_data1.entries() ) );
    217            
    218                 /**
    219                  * Make fetch request
    220                  */
    221                 fetch( wpApiSettings.root + 'bw-portfolio/v1/filter-portfolio-items', {
    222                     method: 'POST',
    223                     credentials: 'same-origin',
    224                     headers: {
    225                         "Content-Type": "application/json",
    226                         "Accept": "application/json",
    227                         "X-WP-Nonce": bwbh_portfolio_js_vars.nonce,
    228                     },
    229                     body: form1_data_json
    230                 })
    231                 .then( response => response.json() )
    232                 .then( data => {
     183
     184                // formData was not getting most recent form input values until second click(maybe because checking radio button takes some milliseconds?) unless I added a slight delay before getting form data???
     185                setTimeout(function() {
    233186                   
    234                     console.log(data);
    235 
    236                     bwbh_loader_gif.remove();
    237                                        
    238                     for ( let bwbh_portfolio_item_id in data.portfolio_items ) {
    239                         /**
    240                          * dynamically create card view of each portfolio item and then insert into portfolio container content area .bw_portfolio_content_area
    241                          */
    242                         const bwbh_portfolio_item_card = document.createElement("article");
    243                         bwbh_portfolio_item_card.setAttribute('class', 'bw_portfolio_item');
    244                         bwbh_portfolio_item_card.setAttribute('data-post_id', bwbh_portfolio_item_id);
    245                         bwbh_portfolio_item_card.setAttribute('data-permalink', data.portfolio_items[bwbh_portfolio_item_id].permalink);
    246 
    247                         // portfolio item featured image
    248                         const bwbh_feat_image = document.createElement('img');
    249                         bwbh_feat_image.classList.add('bw_portfolio_item_image');
    250                         bwbh_feat_image.setAttribute('src', data.portfolio_items[bwbh_portfolio_item_id].feat_image_url);                       
    251                        
    252                         // add portfolio item text div for holding title, content, and tags
    253                         const bwbh_portfolio_text = document.createElement('div');
    254                         bwbh_portfolio_text.setAttribute('class', 'bw_portfolio_item_text');
    255                        
    256                         // add heading for title
    257                         const bwbh_portfolio_heading = document.createElement('h3');
    258                         bwbh_portfolio_heading.setAttribute('class', 'bw_portfolio_item_title');
    259                         bwbh_portfolio_heading.innerHTML = data.portfolio_items[bwbh_portfolio_item_id].title;
    260                         bwbh_portfolio_text.appendChild(bwbh_portfolio_heading);
    261                        
    262                         // add content div
    263                         const bwbh_portfolio_content = document.createElement('div');
    264                         bwbh_portfolio_content.setAttribute('class', 'bw_portfolio_item_content');
    265                         bwbh_portfolio_content.innerHTML = data.portfolio_items[bwbh_portfolio_item_id].content;
    266                         bwbh_portfolio_text.appendChild(bwbh_portfolio_content);
    267 
    268                        
    269                         // add portfolio item tags if shortcode attribute show_tags is present or true, and a tag(s) have been sent in json response
    270                         if( data.show_tags === true && Object.keys(data.portfolio_items[bwbh_portfolio_item_id].bw_portfolio_tags).length > 0 ) {
    271 
    272                             const bwbh_portfolio_tags = document.createElement('section');
    273                             bwbh_portfolio_tags.setAttribute('class', 'bw_portfolio_tags');
    274                            
    275                             const bwbh_default_span = document.createElement('span');
    276                             bwbh_default_span.innerHTML = "Tags:";
    277                             bwbh_portfolio_tags.appendChild(bwbh_default_span);
    278 
    279                             for (let tag in data.portfolio_items[bwbh_portfolio_item_id].bw_portfolio_tags) {
    280                                 const bwbh_portfolio_tag = document.createElement('span');
    281                                 bwbh_portfolio_tag.innerHTML = data.portfolio_items[bwbh_portfolio_item_id].bw_portfolio_tags[tag];
    282                                 bwbh_portfolio_tags.append( bwbh_portfolio_tag );
     187                    // setup form data to send with fetch request
     188                    const bwbh_data1 = new FormData( e.target.closest('form') );
     189                    bwbh_data1.append( 'bwbh_show_tags', bwbh_show_tags);
     190                    bwbh_data1.append( 'bwbh_modal_off', bwbh_modal_off);
     191                    bwbh_data1.append( 'bwbh_num_of_words', bwbh_num_of_words);
     192
     193                    // format form data as plain, then into JSON so fetch can send data as JSON
     194                    const form1_data_json = JSON.stringify( Object.fromEntries( bwbh_data1.entries() ) );
     195
     196                    //Make fetch request
     197                    fetch( wpApiSettings.root + 'bw-portfolio/v1/filter-sort-portfolio-items', {
     198                        method: 'POST',
     199                        credentials: 'same-origin',
     200                        headers: {
     201                            "Content-Type": "application/json",
     202                            "Accept": "application/json",
     203                            "X-WP-Nonce": bwbh_portfolio_js_vars.nonce,
     204                        },
     205                        body: form1_data_json
     206                    })
     207                    .then( response => response.json() )
     208                    .then( data => {
     209                       
     210                        console.log(data);
     211                       
     212                        bwbh_loader_gif.remove();
     213                                           
     214                        for ( let bwbh_key in data.portfolio_items ) {
     215                           
     216                            // dynamically create card view of each portfolio item and then insert into portfolio container content area .bw_portfolio_content_area
     217                            const bwbh_portfolio_item_card = document.createElement("article");
     218                            bwbh_portfolio_item_card.setAttribute('class', 'bw_portfolio_item');
     219                            bwbh_portfolio_item_card.setAttribute('data-post_id', data.portfolio_items[bwbh_key].bw_portfolio_id);
     220                            bwbh_portfolio_item_card.setAttribute('data-permalink', data.portfolio_items[bwbh_key].permalink);
     221   
     222                            // portfolio item featured image
     223                            const bwbh_feat_image = document.createElement('img');
     224                            bwbh_feat_image.classList.add('bw_portfolio_item_image');
     225                            bwbh_feat_image.setAttribute('src', data.portfolio_items[bwbh_key].feat_image_url);                     
     226                           
     227                            // add portfolio item text div for holding title, content, and tags
     228                            const bwbh_portfolio_text = document.createElement('div');
     229                            bwbh_portfolio_text.setAttribute('class', 'bw_portfolio_item_text');
     230                           
     231                            // add heading for title
     232                            const bwbh_portfolio_heading = document.createElement('h3');
     233                            bwbh_portfolio_heading.setAttribute('class', 'bw_portfolio_item_title');
     234                            bwbh_portfolio_heading.innerHTML = data.portfolio_items[bwbh_key].title;
     235                            bwbh_portfolio_text.appendChild(bwbh_portfolio_heading);
     236                           
     237                            // add content div
     238                            const bwbh_portfolio_content = document.createElement('div');
     239                            bwbh_portfolio_content.setAttribute('class', 'bw_portfolio_item_content');
     240                            bwbh_portfolio_content.innerHTML = data.portfolio_items[bwbh_key].content;
     241                            bwbh_portfolio_text.appendChild(bwbh_portfolio_content);
     242   
     243                           
     244                            // add portfolio item tags if shortcode attribute show_tags is present or true, and a tag(s) have been sent in json response
     245                            if( data.show_tags === true && Object.keys(data.portfolio_items[bwbh_key].bw_portfolio_tags).length > 0 ) {
     246   
     247                                const bwbh_portfolio_tags = document.createElement('section');
     248                                bwbh_portfolio_tags.setAttribute('class', 'bw_portfolio_tags');
     249                               
     250                                const bwbh_default_span = document.createElement('span');
     251                                bwbh_default_span.innerHTML = "Tags:";
     252                                bwbh_portfolio_tags.appendChild(bwbh_default_span);
     253   
     254                                for (let tag in data.portfolio_items[bwbh_key].bw_portfolio_tags) {
     255                                    const bwbh_portfolio_tag = document.createElement('span');
     256                                    bwbh_portfolio_tag.innerHTML = data.portfolio_items[bwbh_key].bw_portfolio_tags[tag];
     257                                    bwbh_portfolio_tags.append( bwbh_portfolio_tag );
     258                                }
     259                                bwbh_portfolio_text.appendChild(bwbh_portfolio_tags);
    283260                            }
    284                             bwbh_portfolio_text.appendChild(bwbh_portfolio_tags);
     261   
     262                            // add text div with title, content, and portfolio feaured image to the portfolio item link, or to the portfolio item
     263                            if( data.modal_off === true ) {
     264                                const bwbh_regular_link = document.createElement('a');
     265                                bwbh_regular_link.setAttribute('href', data.portfolio_items[bwbh_key].permalink);
     266                                bwbh_portfolio_item_card.appendChild(bwbh_regular_link);
     267                               
     268                                bwbh_regular_link.appendChild(bwbh_feat_image);
     269                                bwbh_regular_link.appendChild(bwbh_portfolio_text);
     270                            }
     271                            else {
     272                                bwbh_portfolio_item_card.appendChild(bwbh_feat_image);
     273                                bwbh_portfolio_item_card.appendChild(bwbh_portfolio_text);
     274                            }
     275                           
     276                            // add portfolio item card to portfolio content area
     277                            bwbh_portfolio_content_area.appendChild(bwbh_portfolio_item_card);
    285278                        }
    286 
    287                         // add text div with title, content, and portfolio feaured image to the portfolio item link, or to the portfolio item
    288                         if( data.modal_off === true ) {
    289                             const bwbh_regular_link = document.createElement('a');
    290                             bwbh_regular_link.setAttribute('href', data.portfolio_items[bwbh_portfolio_item_id].permalink);
    291                             bwbh_portfolio_item_card.appendChild(bwbh_regular_link);
    292                            
    293                             bwbh_regular_link.appendChild(bwbh_feat_image);
    294                             bwbh_regular_link.appendChild(bwbh_portfolio_text);
    295                         }
    296                         else {
    297                             bwbh_portfolio_item_card.appendChild(bwbh_feat_image);
    298                             bwbh_portfolio_item_card.appendChild(bwbh_portfolio_text);
    299                         }
    300                        
    301                        
    302                         // add portfolio item card to portfolio content area
    303                         bwbh_portfolio_content_area.appendChild(bwbh_portfolio_item_card);
    304                     }
    305 
    306                      // reset clicked flag variable
    307                      clicked = false;
    308  
    309                 })
    310                 .catch((error) => {
    311                     console.error(error);
    312                     clicked = false;
    313                 });
    314            
     279   
     280                        // reset clicked flag variable
     281                        clicked = false;
     282     
     283                    })
     284                    .catch((error) => {
     285                        console.error(error);
     286                        // reset clicked flag variable
     287                        clicked = false;
     288                    });
     289
     290                }, 25);             
    315291            }
    316292       

  • bw-portfolio/trunk/bw-portfolio.php

    r2714618 r2715217  
    22/**
    33* Plugin Name: BW Portfolio
    4 * Description: The BW Portfolio plugin is powerful yet lightweight and fast. It allows you to easily add portfolio items in your WordPress Dashboard, and organize them with portfolio tags as well. Then by using a handy shortcode you can display your portfolio items just about anywhere in a nice, responsive css grid that is compatible on many different devices. Has tag filtering of portfolio items built in.
    5 * Version: 1.2.1
     4* Description: The BW Portfolio plugin is powerful yet lightweight and fast. It allows you to easily add portfolio items in your WordPress Dashboard, and organize them with portfolio tags as well. Then by using a handy shortcode you can display your portfolio items just about anywhere in a nice, responsive css grid that is compatible on many different devices. Also has tag filtering and sorting of portfolio items built in.
     5* Version: 1.2.2
    66* Requires at least: 5.2
    77* Requires PHP: 7.0
    … …  
    4747
    4848
    49 
     49// register custom rest api routes/endpoints
    5050add_action('rest_api_init', function () {
    5151
    … …  
    5757    ]);
    5858
    59     // custom route to filter portfolio items
    60     register_rest_route('bw-portfolio/v1', '/filter-portfolio-items', [
     59    // custom route to filter and sort portfolio items
     60    register_rest_route('bw-portfolio/v1', '/filter-sort-portfolio-items', [
    6161        'methods' => 'POST',
    62         'callback' => 'bw_filter_portfolio_items',
     62        'callback' => 'bw_filter_sort_portfolio_items',
    6363        'permission_callback' => '__return_true',
    6464    ]);
     65
    6566});
    6667
    … …  
    118119 * handle fetch requests to filter portfolio items by portfolio tag
    119120 */
    120 function bw_filter_portfolio_items( $request ) {
    121    
    122     if( $request['bwbh_term'] ) {
     121function bw_filter_sort_portfolio_items( $request ) {
     122   
     123    if( $request['bwbh_portfolio_filter_tag'] && $request['bwbh_portfolio_sort'] ) {
    123124       
    124         $bwbh_term = $request['bwbh_term'];
    125        
     125        $bwbh_portfolio_filter_tag = $request['bwbh_portfolio_filter_tag'];
     126        $bwbh_portfolio_sort = $request['bwbh_portfolio_sort'];
     127
    126128        // need to get the shortcode attribute settings that might affect filtered results here
    127129        $bwbh_show_tags = filter_var($request['bwbh_show_tags'], FILTER_VALIDATE_BOOLEAN);
    128130        $bwbh_modal_off = filter_var($request['bwbh_modal_off'], FILTER_VALIDATE_BOOLEAN);
    129         $bwbh_num_of_words = (int)$request['bwbh_num_of_words'];
     131        $bwbh_num_of_words = absint((int)$request['bwbh_num_of_words']);
    130132
    131133        $bw_response_data = [
    132             'term' => $bwbh_term,
     134            'term' => sanitize_text_field($bwbh_portfolio_filter_tag),
     135            'sort' => sanitize_text_field($bwbh_portfolio_sort),
    133136            'show_tags' => $bwbh_show_tags,
    134137            'modal_off' => $bwbh_modal_off,
    … …  
    136139        ];
    137140
     141       
    138142        // include file that builds custom WP_Query for filtered portfolio items
    139143        include plugin_dir_path( __FILE__ ) . 'inc/portfolio-query.php';
    … …  
    141145        // loop through query results, and only add relevant pieces of portfolio item data to the $bw_response_data array
    142146        if ( $bw_portfolio_query->have_posts() ) :
     147            $n = 0;
    143148            while ( $bw_portfolio_query->have_posts() ) : $bw_portfolio_query->the_post();
    144                 $bw_response_data['portfolio_items'][get_the_ID()] = [
     149                $bw_response_data['portfolio_items'][$n] = [
     150                    'bw_portfolio_id' => get_the_ID(),
    145151                    'title' => get_the_title(),
    146152                    'content' => wp_kses_post( bwbh_limit_words( strip_tags( get_the_content() ), $bwbh_num_of_words ) ) . '...',
    … …  
    149155                // if modal_off is true, then send permalink for opening portfolio item manually
    150156                if( $bwbh_modal_off ) {
    151                     $bw_response_data['portfolio_items'][get_the_ID()]['permalink'] = get_permalink( get_the_ID() );
     157                    $bw_response_data['portfolio_items'][$n]['permalink'] = get_permalink( get_the_ID() );
    152158                }
    153159
    … …  
    157163                    if( !is_wp_error($bw_portfolio_tags) && $bw_portfolio_tags !== false ) {
    158164                        foreach($bw_portfolio_tags as $bw_tag) {
    159                             $bw_response_data['portfolio_items'][get_the_ID()]['bw_portfolio_tags'][$bw_tag->term_id] = $bw_tag->name;
     165                            $bw_response_data['portfolio_items'][$n]['bw_portfolio_tags'][$bw_tag->term_id] = $bw_tag->name;
    160166                        }
    161167                    }
    … …  
    166172                if(!empty($post_thumbnail_id)) {
    167173                    $feat_image_urls = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );
    168                     $bw_response_data['portfolio_items'][get_the_ID()]['feat_image_url'] = $feat_image_urls[0];
     174                    $bw_response_data['portfolio_items'][$n]['feat_image_url'] = $feat_image_urls[0];
    169175                }
    170                
     176                $n++;
    171177
    172178            endwhile;
    … …  
    176182        endif; // else if no portfolio items in tag are found then return error?(don't think this can happen though?)
    177183
    178         return new WP_REST_Response( $bw_response_data, 200 );
    179        
    180     }
    181        
    182     wp_die();
     184        return new WP_REST_Response( $bw_response_data, 200 ); 
     185    }       
    183186}
    184187
    … …  
    269272 */
    270273if (!function_exists('bwbh_portfolio_shortcode')) {
     274
    271275    function bwbh_portfolio_shortcode( $atts ) {
    272    
    273276        // normalize attribute keys, make lowercase
    274277        $atts = array_change_key_case( (array) $atts, CASE_LOWER );
    … …  
    294297   
    295298        $portfolio_output = "";
    296    
     299
    297300        // include file that builds custom WP_Query for shortcode output
    298301        include plugin_dir_path( __FILE__ ) . 'inc/portfolio-query.php';
    … …  
    303306        // return shortcode output from output buffer here.
    304307        return ob_get_clean();
     308
    305309    }
    306310}

  • bw-portfolio/trunk/inc/portfolio-loop.php

    r2714132 r2715217  
    66if ( $bw_portfolio_query->have_posts() ) :
    77
    8     $portfolio_output .= "<section class='bw_portfolio_container alignwide'>\n";
     8    $bw_portfolio_id = uniqid();
     9   
     10    $portfolio_output .= "<section id='bw_portfolio_" . $bw_portfolio_id . "' class='bw_portfolio_container alignwide'>\n";
    911
    1012    $portfolio_output .= "<header class='bw_portfolio_header'>\n";
    … …  
    2022        'orderby' => 'id'
    2123    ]);
     24
     25    $portfolio_output .= "<form id='portfolio_filter_sort_form_" . $bw_portfolio_id . "'>";
     26
    2227    if( !is_wp_error($bw_portfolio_tags) && count($bw_portfolio_tags) > 0 ) {
    2328       
    2429        $portfolio_output .= "<section class='portfolio_filter_tags'>\n";
    2530               
    26         $portfolio_output .= "<a class='portfolio_filter_tag' data-term='show_all' title='Show all portfolio items'>Show All</a>\n";
     31        $portfolio_output .= "<input id='pt_show_all_" . $bw_portfolio_id . "' type='radio' name='bwbh_portfolio_filter_tag' value='show_all' checked><label class='bw_portfolio_form_label' for='pt_show_all_" . $bw_portfolio_id . "' title='Show all portfolio items'>Show All</label>";
    2732
    2833        foreach($bw_portfolio_tags as $bw_tag) {
    2934            if( isset($bw_tags_array) ) {
    3035                if( in_array($bw_tag->slug, $bw_tags_array) ) {
    31                     $portfolio_output .= "<a class='portfolio_filter_tag' data-term='" . $bw_tag->slug . "' title='Show portfolio items tagged with " . $bw_tag->name . "'>" . $bw_tag->name . "</a>\n";
     36                    $portfolio_output .= "<input id='pt_" . $bw_tag->slug . "_" . $bw_portfolio_id . "' type='radio' name='bwbh_portfolio_filter_tag' value='" . $bw_tag->slug . "'><label class='bw_portfolio_form_label' for='pt_" . $bw_tag->slug . "_" . $bw_portfolio_id . "' title='Show portfolio items tagged with " . $bw_tag->name . "'>" . $bw_tag->name . "</label>";
    3237                }
    3338            }
    3439            else {
    35                 $portfolio_output .= "<a class='portfolio_filter_tag' data-term='" . $bw_tag->slug . "' title='Show portfolio items tagged with " . $bw_tag->name . "'>" . $bw_tag->name . "</a>\n";
     40                $portfolio_output .= "<input id='pt_" . $bw_tag->slug . "_" . $bw_portfolio_id . "' type='radio' name='bwbh_portfolio_filter_tag' value='" . $bw_tag->slug . "'><label class='bw_portfolio_form_label' for='pt_" . $bw_tag->slug . "_" . $bw_portfolio_id . "' title='Show portfolio items tagged with " . $bw_tag->name . "'>" . $bw_tag->name . "</label>";
    3641            }
    3742           
    … …  
    4045        $portfolio_output .= "</section>";
    4146    }
     47
     48    // sort buttons
     49    $portfolio_output .= "<section class='portfolio_sort'>";
     50
     51    $portfolio_output .= "<input id='ps_desc_" . $bw_portfolio_id . "' type='radio' name='bwbh_portfolio_sort' value='DESC' checked><label class='bw_portfolio_form_label' for='ps_desc_" . $bw_portfolio_id . "' title='Show newest first'>Newest</label>";
     52    $portfolio_output .= "<input id='ps_asc_" . $bw_portfolio_id . "' type='radio' name='bwbh_portfolio_sort' value='ASC'><label class='bw_portfolio_form_label' for='ps_asc_" . $bw_portfolio_id . "' title='Show oldest first'>Oldest</label>";
     53
     54    $portfolio_output .= "</section>";
     55
     56    $portfolio_output .= "</form>";
    4257       
    4358    $portfolio_output .= "</header>\n";
    … …  
    154169endif;
    155170
    156 echo wp_kses_post($portfolio_output);
     171echo ($portfolio_output);
    157172
    158173wp_reset_postdata();

  • bw-portfolio/trunk/inc/portfolio-query.php

    r2714132 r2715217  
    11<?php
    2 
     2$bw_args = [];
    33/**
    44 * Here we setup a new WP_Query to pull in portfolio items. Query can be modified using shortcode attributes.
    … …  
    88];
    99
     10// sort portfolio items when user clicks on sort order button
     11if( !empty($bwbh_portfolio_sort) ) {
     12    $bw_args['order'] = $bwbh_portfolio_sort;
     13}
     14
    1015// if shortcode tags attribute was set like: tags="sometag1, someothertag", add taxonomy query for portfolio_tag to wp_query
    11 if( !empty($bw_atts['filter_by_tags']) || (!empty($bwbh_term) && $bwbh_term != "show_all") ) {
     16if( !empty($bw_atts['filter_by_tags']) || (!empty($bwbh_portfolio_filter_tag) && $bwbh_portfolio_filter_tag != "show_all") ) {
    1217   
    1318    // strip any html tags but not the html tag contents
    … …  
    2126   
    2227    // if user clicked on portfolio tag filter link, empty array of filter terms from shortcode, and insert only the term user clicked on
    23     if(!empty($bwbh_term)) {
     28    if(!empty($bwbh_portfolio_filter_tag)) {
    2429        $bw_tags_array = [];
    25         $bw_tags_array[] = strip_tags(trim($bwbh_term));
     30        $bw_tags_array[] = strip_tags(trim($bwbh_portfolio_filter_tag));
    2631    }
    2732   

  • bw-portfolio/trunk/readme.txt

    r2714618 r2715217  
    66Tested up to: 5.9
    77Requires PHP: 7.0
    8 Stable tag: 1.2.1
     8Stable tag: 1.2.2
    99License: GPLv3
    1010License URI: https://www.gnu.org/licenses/gpl-3.0.html
    … …  
    2727* [bw_portfolio ignore_sticky_posts] >> There might be other times you want to ignore sticky portfolio items in your grid of portfolio items, do so by adding the ignore_sticky_posts attribute
    2828
     29If you want to see a new feature please let me know [in the plugins Wordpress support forum.](https://wordpress.org/support/plugin/bw-portfolio/)
    2930
    3031== Screenshots ==
    … …  
    3435== Changelog ==
    3536
     37= 1.2.2 =
     38* Upgraded the filter by tags bar with new sort buttons that allows users to show newest or oldest portfolio items first
     39* Modified styling for filter and sort buttons, and turned into html form for easier data submission
     40
    3641= 1.2.1 =
    37 * Added a missing function name being called on plugin activation to register post type
     42* added a missing function name being called on plugin activation to register post type
    3843
    3944= 1.2.0 =
    4045* Major update where I stopped using admin-ajax and switched over to using the WordPress REST API for viewing a portfolio item, and filtering portfolio items by portfolio tag
    41 * Added .alignwide class to portfolio container so wordpress themes(like twentytwentone, etc) default styling allows it to be full width of its parent
     46* added .alignwide class to portfolio container so wordpress themes(like twentytwentone, etc) default styling allows it to be full width of its parent
    4247* fixed some minor display bugs
    4348
    4449= 1.1.7 =
    45 * Fixed bug where portfolio item card content wouldn't show unless num_of_words_on_cards shortcode att was added
     50* fixed bug where portfolio item card content wouldn't show unless num_of_words_on_cards shortcode att was added
    4651
    4752= 1.1.6 =
    48 * Added missing /inc/portfolio-filtered-loop.php file
     53* added missing /inc/portfolio-filtered-loop.php file
    4954
    5055= 1.1.5 =
Note: See TracChangeset for help on using the changeset viewer.