WordPress.org
Get WordPress

Plugin Directory

Changeset 1424937


Ignore:
Timestamp:
05/26/2016 07:30:02 PM (10 years ago)
Author:
r0bsc0tt
Message:

update to include flickity shortcode dimensions js to set size of slider when created with a shortcode.

Location:
eazy-flickity-slider/trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • eazy-flickity-slider/trunk/eazy_flickity_slider.php

    r1418985 r1424937  
    44Plugin URI: http://robjscott.com/wordpress/
    55Description:  Easily create slides to use with responsive sliders. Add them to page or post. Displays them using flickity.js by metafizzy. 
    6 Version: 1.0.2
     6Version: 1.1
    77Author: Rob Scott, LLC
    88Author URI: http://robjscott.com
    … …  
    3737  wp_enqueue_script('flickity-homepage',  EZ_FLICKITY_ELEMENTS_URL  . 'resources/js/flickity.homepage.js', array('jquery'), false, true );
    3838  }
    39 
    4039  wp_enqueue_script('flickity-shortcode',  EZ_FLICKITY_ELEMENTS_URL  . 'resources/js/flickity.shortcode.js', array('jquery'), false, true );
    41 
    4240}

  • eazy-flickity-slider/trunk/readme.txt

    r1418985 r1424937  
    4646
    4747== Changelog ==
     48= 1.1 =
     49*Add flickity.shortcode.dimensions.js to insert the inline style for shortcodes height and width
     50
    4851= 1.0.2 =
    4952*Add conditional statement to shortcode to prevent height and width form showing when not set

  • eazy-flickity-slider/trunk/resources/css/style.css

    r1418985 r1424937  
    142142  opacity: 1;
    143143}
    144 
    145 /*********************
    146 eazy_flickity_slider
    147 *********************/
    148 .flickity-viewport {
    149   content: #eaedf2;
    150 }
    151 
    152 .flickity-shortcode{
    153   overflow: hidden;
    154 }
    155 
    156 .gallery-cell {
    157   width: 100%;
    158   margin-right: 10px;
    159 }
    160 
    161 .gallery-cell img {
    162   width: 100%;
    163   height: auto;
    164 }
    165 
    166 .flickity-page-dots {
    167   bottom: 2em;
    168 }
    169 
    170 .flickity-page-dots .dot {
    171   background-color: white;
    172   height: 4px;
    173   width: 40px;
    174   margin: 0;
    175   border-radius: 0;
    176 }
    177 
    178 .flickity-prev-next-button {
    179   background: rgba(255, 255, 255, 0.25) none repeat scroll 0 0;
    180   border: medium none;
    181   border-radius: 25%;
    182   bottom: .5em;
    183   cursor: pointer;
    184   height: 25px;
    185   position: absolute;
    186   top: initial;
    187   transform: translateY(-50%);
    188   width: 25px;
    189 }
    190 
    191 .flickity-prev-next-button.previous {
    192   left: 2%;
    193 }
    194 
    195 .flickity-prev-next-button.next {
    196   right: 2%;
    197 }
    198 
    199 /* end eazy_flickity_slider */

  • eazy-flickity-slider/trunk/resources/eazy_flickity_slider_admin_tinymce.php

    r1424143 r1424937  
    11<?php
    22if ('is_admin') {
    3 //add tinymce js file
    4 add_action( 'admin_enqueue_scripts', 'eazy_flickity_slider_tinymce_js' );   
    5 function eazy_flickity_slider_tinymce_js(){
    6 wp_enqueue_script('flickity-tinymce-submit',  EZ_FLICKITY_ELEMENTS_URL  . 'resources/js/flickity.tinymce.submit.js', array('jquery'), false, true );
    7 }
     3  //add tinymce js file
     4  add_action( 'admin_enqueue_scripts', 'eazy_flickity_slider_tinymce_js' );   
     5  function eazy_flickity_slider_tinymce_js(){
     6  wp_enqueue_script('flickity-tinymce-submit',  EZ_FLICKITY_ELEMENTS_URL  . 'resources/js/flickity.tinymce.submit.js', array('jquery'), false, true );
     7  }
    88
    9 //create html to display slider
    10 function eazy_flickity_slider_admin_tinymce_html(){ ?>
    11 <div id="select_eazy_slider_shortcode" style="display:none;">
    12  
    13   <div class="eazy_slider_shortcode_form_display">
    14     <h3 id="eazy_slider_shortcode_header"><?php _e("Insert Shortcode", 'ez-flickity-slider' ); ?></h3>
    15     <span>
    16       <?php _e("Select slider from the drop-down menu to add it to your page or post.", 'ez-flickity-slider' ); ?>
    17     </span>
    18   </div>
    19 
    20   <div id="eazy_slider_shortcode" class="eazy_slider_shortcode_form_display">
    21 
    22     <select name="eazy_slider_name_select" id="eazy_slider_name_select">
    23       <option value="">-Select-</option>
    24         <?php $terms = get_terms( 'eazy_flickity_slider' );
    25           if($terms){
    26             foreach ( $terms as $term ) { ?>
    27               <option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option> 
    28             <?php }     
    29         } //end if ?>
    30     </select>
    31 
    32     <div class="eazy_slider_shortcode_form">
    33       <p class="form_instructions"><?php _e("Insert the max width and/or height of your slider images.", 'ez-flickity-slider' ); ?></p>
    34       <p class="form_instructions"><?php _e("The slider defaults to 100% max width.", 'ez-flickity-slider' ); ?></p>
    35       <p class="form_instructions"><strong><?php _e("Make sure to include the unit of measurment. (px, em, %, vw etc.)", 'ez-flickity-slider' ); ?></strong></p>
    36       <label for="form_width" class="eazy-flickity-slider-dimension"><?php _e("width:", 'ez-flickity-slider' ); ?></label>
    37       <input type="text" id="form_width" /><br>
    38       <label for="form_height" class="eazy-flickity-slider-dimension"><?php _e("height:", 'ez-flickity-slider' ); ?></label>
    39       <input type="text" id="form_height" /><br>
     9  //create html to display slider
     10  function eazy_flickity_slider_admin_tinymce_html(){ ?>
     11  <div id="select_eazy_slider_shortcode" style="display:none;">
     12   
     13    <div class="eazy_slider_shortcode_form_display">
     14      <h3 id="eazy_slider_shortcode_header"><?php _e("Insert Shortcode", 'ez-flickity-slider' ); ?></h3>
     15      <span>
     16        <?php _e("Select slider from the drop-down menu to add it to your page or post.", 'ez-flickity-slider' ); ?>
     17      </span>
    4018    </div>
    4119
    42   </div>
     20    <div id="eazy_slider_shortcode" class="eazy_slider_shortcode_form_display">
     21
     22      <select name="eazy_slider_name_select" id="eazy_slider_name_select">
     23        <option value="">-Select-</option>
     24          <?php $terms = get_terms( 'eazy_flickity_slider' );
     25            if($terms){
     26              foreach ( $terms as $term ) { ?>
     27                <option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option> 
     28              <?php }     
     29          } //end if ?>
     30      </select>
     31
     32      <div class="eazy_slider_shortcode_form">
     33        <p class="form_instructions"><?php _e("Insert the max width and/or height of your slider images.", 'ez-flickity-slider' ); ?></p>
     34        <p class="form_instructions"><?php _e("The slider defaults to 100% max width.", 'ez-flickity-slider' ); ?></p>
     35        <p class="form_instructions"><strong><?php _e("Make sure to include the unit of measurment. (px, em, %, vw etc.)", 'ez-flickity-slider' ); ?></strong></p>
     36        <label for="form_width" class="eazy-flickity-slider-dimension"><?php _e("width:", 'ez-flickity-slider' ); ?></label>
     37        <input type="text" id="form_width" /><br>
     38        <label for="form_height" class="eazy-flickity-slider-dimension"><?php _e("height:", 'ez-flickity-slider' ); ?></label>
     39        <input type="text" id="form_height" /><br>
     40      </div>
     41
     42    </div>
    4343
    4444
    45   <div class="eazy-flickity-slider-submit-buttons">
    46     <input type="button" class="button-primary" value="Insert Slider Shortcode" onclick="insert_eazy_flickity_slider_shortcode();" />&nbsp;&nbsp;&nbsp;
    47     <a class="button" style="color:#bbb;" href="#" onclick="tb_remove(); return false;">
    48       <?php _e("Cancel", 'ez-flickity-slider'); ?>
    49     </a>
    50   </div>
     45    <div class="eazy-flickity-slider-submit-buttons">
     46      <input type="button" class="button-primary" value="Insert Slider Shortcode" onclick="insert_eazy_flickity_slider_shortcode();" />&nbsp;&nbsp;&nbsp;
     47      <a class="button" style="color:#bbb;" href="#" onclick="tb_remove(); return false;">
     48        <?php _e("Cancel", 'ez-flickity-slider'); ?>
     49      </a>
     50    </div>
    5151
    52 </div><?php
     52  </div><?php
     53  }
     54
    5355}
    54 }

  • eazy-flickity-slider/trunk/resources/eazy_flickity_slider_shortcode.php

    r1418985 r1424937  
    11<?php
    22if (function_exists('eazy_flickity_slides')) {
     3 
     4  //add eazy-flickity-slider shortcode
     5  add_shortcode( 'eazy-flickity-slider', 'eazy_flickity_slider_shortcode' );
     6  function eazy_flickity_slider_shortcode($atts){   
     7   
     8    //set attributes
     9    $atts = shortcode_atts(
     10      array(
     11        'post_type' => 'eazy_flickity_slide',
     12        'order' => '',
     13        'orderby' =>'',
     14        'post_date' =>'',
     15        'posts' => -1,
     16        'height' => NULL,
     17        'width' => NULL,
     18        'eazy_flickity_slider' => NULL,
     19      ),
     20      $atts
     21    );
    322
    4 //add eazy-flickity-slider shortcode
    5 add_shortcode( 'eazy-flickity-slider', 'eazy_flickity_slider_shortcode' );
    6 function eazy_flickity_slider_shortcode($atts){   
    7   //set attributes
    8   $atts = shortcode_atts(
    9     array(
    10       'post_type' => 'eazy_flickity_slide',
    11       'order' => '',
    12       'orderby' =>'',
    13       'post_date' =>'',
    14       'posts' => -1,
    15       'height' => NULL,
    16       'width' => NULL,
    17       'eazy_flickity_slider' => '',
    18     ),
    19     $atts
    20   );
     23    //set variables based on attributes
     24    $order = $atts['order'];
     25    $orderby = $atts['orderby'];
     26    $post_dateb = $atts['post_date'];
     27    $posts = $atts['posts'];
     28    $height = $atts['height'];
     29    $width = $atts['width'];
     30    $eazy_flickity_slider = $atts['eazy_flickity_slider'];
     31    $flickity_open = NULL;
     32    $flickity_close = NULL;
     33   
     34    //set query options
     35    $eazyoptions = array(
     36      'post_type' => 'eazy_flickity_slide',
     37      'order' => $order,
     38      'orderby' => $orderby,
     39      'posts_per_page' => $posts,
     40      'height' => $height,
     41      'width' => $width,
     42      'eazy_flickity_slider' => $eazy_flickity_slider,
     43    );
    2144
    22   //set variables based on attributes
    23   $order = $atts['order'];
    24   $orderby = $atts['orderby'];
    25   $post_dateb = $atts['post_date'];
    26   $posts = $atts['posts'];
    27   $height = $atts['height'];
    28   $width = $atts['width'];
    29   $eazy_flickity_slider = $atts['eazy_flickity_slider'];
     45    // The Query
     46    $eazyquery = new WP_Query( $eazyoptions );
     47    $flickity_slides = array();
    3048
    31   //set query options
    32   $eazyoptions = array(
    33     'post_type' => 'eazy_flickity_slide',
    34     'order' => $order,
    35     'orderby' => $orderby,
    36     'posts_per_page' => $posts,
    37     'height' => $height,
    38     'width' => $width,
    39     'eazy_flickity_slider' => $eazy_flickity_slider,
    40   );
     49    // The Loop
     50    if ( $eazyquery->have_posts() ) {
     51       
     52        //Check if slider name is set, if it is set add slider name to id
     53        if(isset($eazy_flickity_slider)){
     54          $sliderid = "slider-". $eazy_flickity_slider ."";
     55          $flickity_open = '<div class="gallery flickity-shortcode" id='.$sliderid.' >';
     56
     57        }else{
     58          $flickity_open = '<div class="gallery flickity-shortcode" id="all-slides">';
     59        }//end if
     60
     61        while ( $eazyquery->have_posts() ) {
     62          $eazyquery->the_post();
     63          $thumb_id = get_post_thumbnail_id();
     64          $flickity_slides[] = "
     65          <div class='gallery-cell'>
     66          <img src='".wp_get_attachment_image_src($thumb_id,'full', true)[0]."'
     67          alt='".get_post(get_post_thumbnail_id())->post_title."'>
     68          </div>";
     69        } //end while
     70
     71        $flickity_close = '</div>'; //closing div from class "gallery js flickity"
     72    } else {
     73      // no slides found
     74    }//end query
     75
     76    //restore original Post Data
     77    wp_reset_postdata();
     78
     79    // concatenate open, slides & close, return them as $slider
     80    $slider = $flickity_open;
     81    foreach ($flickity_slides as $key => $slide) {
     82      $slider .= $slide;
     83    }
     84    $slider .= $flickity_close;
     85    return $slider; 
     86  }
     87
     88
     89    add_action( 'wp_enqueue_scripts', 'eazy_flickity_shortcode_scripts_styles' );
     90    function eazy_flickity_shortcode_scripts_styles(){
     91    wp_enqueue_script('eazy-flickity-shortcode-extra', EZ_FLICKITY_ELEMENTS_URL  . 'resources/js/flickity.shortcode.dimensions.js', array(), false, true );
    4192     
    42   // The Query
    43   $eazyquery = new WP_Query( $eazyoptions );
    44   $flickity_slides = array();
     93      global $wp_query;
     94      $posts = $wp_query->posts;
     95      $pattern = get_shortcode_regex();
     96     
     97     
     98      foreach ($posts as $post){
     99        if (   preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
     100          && array_key_exists( 2, $matches )
     101          && in_array( 'eazy-flickity-slider', $matches[2] ) ){
     102            foreach ($matches[0] as $key => $value) {
     103              $toys[$key] = $value;
     104             
     105              $eznameflag = '~eazy_flickity_slider="(.*?)"~';
     106              $ezwidthflag = '~width="(.*?)"~';
     107              $ezheightflag = '~height="(.*?)"~';
     108              if(preg_match($eznameflag, $value, $m)){
     109                $thisname = $m[1];
     110              }
     111              if(preg_match($ezwidthflag, $value, $m)){
     112                $thiswidth = $m[1];
     113              }
     114              if(preg_match($ezheightflag, $value, $m)){
     115                $thisheight = $m[1];
     116              }
    45117
    46   // The Loop
    47   if ( $eazyquery->have_posts() ) {
    48      
    49       //Check if slider name is set, if it is set add slider name to id
    50       if(isset($eazy_flickity_slider)){
    51         $flickity_open = '<div class="gallery flickity-shortcode" id="slider-'. $eazy_flickity_slider .'" style="';
    52           if (isset($width)) {$flickity_open .= 'max-width: '. $width . '; ';}
    53           if (isset($height)) {$flickity_open .= 'max-height: '. $height . '; ';}
    54       $flickity_open .= '">';
    55       }else{
    56         $flickity_open = '<div class="gallery flickity-shortcode" id="all-slides">';
    57       }//end if
     118              $toys[$key] = ['sliderid' => $thisname, 'width' => $thiswidth, 'height' => $thisheight];
     119            }
     120          break; 
     121        } //end if preg match
     122      } //end foreach
     123    if (!is_front_page()){ 
     124    wp_localize_script( 'eazy-flickity-shortcode-extra', 'eazyoptions', $toys );
     125    }
     126    }
    58127
    59       while ( $eazyquery->have_posts() ) {
    60         $eazyquery->the_post();
    61         $thumb_id = get_post_thumbnail_id();
    62         $flickity_slides[] = "<div class='gallery-cell'><img src='".wp_get_attachment_image_src($thumb_id,'full', true)[0]."' alt='".get_post(get_post_thumbnail_id())->post_title."'></div>";
    63       } //end while
    64 
    65       $flickity_close = '</div>'; //closing div from class "gallery js flickity"
    66   } else {
    67     // no slides found
    68   }//end query
    69 
    70   //restore original Post Data
    71   wp_reset_postdata();
    72 
    73   // concatenate open, slides & close, return them as $slider
    74   $slider = $flickity_open;
    75   foreach ($flickity_slides as $key => $slide) {
    76     $slider .= $slide;
    77   }
    78   $slider .= $flickity_close;
    79   return $slider; 
    80 }
    81128
    82129}

  • eazy-flickity-slider/trunk/resources/js/flickity.tinymce.submit.js

    r1413436 r1424937  
    1515        return;
    1616      }
     17
    1718      if (form_shortcode !== "") {
    1819        //add shortcode to editor
Note: See TracChangeset for help on using the changeset viewer.