WordPress.org

Ready to get started?Download WordPress

Forums

Instruct
Divs instead of tables (5 posts)

  1. Adam Robertson
    Member
    Posted 1 year ago #

    Hey Bro. Great Plugin!!! I am curious as to why you used tables though? divs would be nicer to work with.
    Perhaps a second set of short-codes for those of us wanting to work with divs?

    I am hacking at the code right now to see if I can throw something together, but wanted to mention that here as well.

    http://wordpress.org/extend/plugins/instruct/

  2. Adam Robertson
    Member
    Posted 1 year ago #

    Okay, it was simple task to just change the short-code to use an ordered list rather than a table:

    $step_template .= "<li class='instruct_row'><span class='instruct_row'>#STEP_TEXT#</span><span class='instruct_row'>#IMG_TEMPLATE#</span></span>";
      $tbimg_template .= '<div id="instruct-thumbnail"><img class="instruct-thumbnail-img" src="#STEP_THUMBNAIL#" large="#STEP_PICTURE#"></div>';
    
      //get instructions title and description
      $sql = "SELECT step.id step_id, <code>text</code>, number, picture, thumbnail
                     FROM ".$diy_step_table." step, ".$diy_progress_table." progress
                     WHERE step.id = progress.step AND progress.instruct=".$id." ORDER BY number";
      $data =  $wpdb->get_results($sql, OBJECT);
    
      if(count($data) > 0){
        $html .= "<ol class='instruct'>";
    
        foreach($data as $step) {
    
          // Go until no step exists with previous of current
          if($step == NULL) break;
          $step_html = $step_template;
          $step_html = str_replace("#STEP_NUM#", $step->number, $step_html);
          $step_html = str_replace("#STEP_TEXT#", $step->text, $step_html);
    
          if(!empty($step->thumbnail) and !empty($step->picture)) {
            $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template);
            $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html);
          } elseif(empty($step->thumbnail) and !empty($step->picture)) {
            $img_html = str_replace("#STEP_THUMBNAIL#", $step->picture, $tbimg_template);
            $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html);
          } elseif(!empty($step->thumbnail) and empty($step->picture)) {
            $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template);
            $img_html = str_replace("#STEP_PICTURE#", $step->thumbnail, $img_html);
          } else {
            $img_html = '';
          }
    
          $step_html = str_replace("#IMG_TEMPLATE#", $img_html, $step_html);
          $query = $step_sql."=".$step->step_id;
          $html .= $step_html.PHP_EOL;
        }
    
        $html .= "</ol>";

    I also removed the step-numbers, since CSS can handle that with:
    ol.instruct li { list-style: decimal inside; padding: 5px;}

    This gives me greater flexibility when designing my theme layout, especially if I am doing an adaptive theme for mobile or tablet view.

    Now I am wondering if I could incorporate this into a "Projects" plugin I am working on. Just an idea I am toying with.

  3. websnail
    Member
    Posted 1 year ago #

    Hi ghettocottage,

    I'm looking at this plugin as a solution for my own instruction layout needs and your suggested changes already deal with one aspect that I wanted to change (ie: divs instead of a table)

    I'm further looking at some jQuery changes to allow two types of layout:
    - list (as original)
    - gallery

    The gallery approach would allow all the thumbnails to be shown as part of a slideshow banner and then a click would either css-popup or change a "preview" or display window to show the full image and instructions underneath it.

    Looking at the necessary code to make that happen and will share once resolved...

    For now though I was wondering if you could share your hacked code to see if there's anything in there that would save me recreating the wheel.

    Any help appreciated.

  4. Adam Robertson
    Member
    Posted 1 year ago #

    Sounds interesting Websnail. You could just use the code I have in the first post to change the tables to an

      ., and then possibly use something like Woothemes flexslider code (free download, opensource) to turn that list into a slide-show.

      Lots of possibilites. I would love to see what you end up doing.

  5. websnail
    Member
    Posted 1 year ago #

    Realised I was making a rod for my own back and opted instead to go with SlideDeck2 instead of trying to reinvent the wheel.

    I've got to do some more work to customise some views but I noticed the original dev' isn't particularly active.

    That said I tidied up your nugget, fixed some HTML parsing issues and made a few formatting changes to make it easier to read in source:

    /*
     * Shortcodes
     */
    
    // [instructions id="id int of instructions"]
    function shortcode_instructions( $atts ) {
    	extract( shortcode_atts( array(
    		'id' => 0,
        'notitle' => false
    	), $atts ) );
    
      if( ! is_numeric($id))
        return NULL;
    
      if( $notitle == 'true')
        $notitle = true;
      else
        $notitle = false;
    
      // WordPress globals
      global $wpdb;
      // diy instructions globals
      global $diy_step_table, $diy_instruct_table, $diy_progress_table;
    
      //get instructions title and description
      $instructions =  $wpdb->get_row(
                                      "SELECT title, description
                                       FROM ".$diy_instruct_table."
                                       WHERE id=".$id);
    
      $html = "";
    
      if(!$notitle)
        $html = "<h3 class='instruct_title'>".$instructions->title."</h3>\n";
    
      $html .= "<p>".$instructions->description."</p>\n";
    
      // MOD 
    
      //$step_template .= "<li class='instruct_row'><span class='instruct_row'>#STEP_TEXT#</span><span class='instruct_row'>#IMG_TEMPLATE#</span></li>\n";
      $step_template .= "<li class='instruct_row'><div class='instruct_text'>#STEP_TEXT#</div>#IMG_TEMPLATE#</li>\n";
      $tbimg_template .= '<div id="instruct-thumbnail"><img class="instruct-thumbnail-img" src="#STEP_THUMBNAIL#" large="#STEP_PICTURE#"></div>';
    
      //get instructions title and description
      $sql = "SELECT step.id step_id, text, number, picture, thumbnail
                     FROM ".$diy_step_table." step, ".$diy_progress_table." progress
                     WHERE step.id = progress.step AND progress.instruct=".$id." ORDER BY number";
      $data =  $wpdb->get_results($sql, OBJECT);
    
      if(count($data) > 0){
        $html .= "<ol class='instruct'>\n";
    
        foreach($data as $step) {
    
          // Go until no step exists with previous of current
          if($step == NULL) break;
          $step_html = $step_template;
          $step_html = str_replace("#STEP_NUM#", $step->number, $step_html);
          $step_html = str_replace("#STEP_TEXT#", $step->text, $step_html);
    
          if(!empty($step->thumbnail) and !empty($step->picture)) {
            $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template);
            $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html);
          } elseif(empty($step->thumbnail) and !empty($step->picture)) {
            $img_html = str_replace("#STEP_THUMBNAIL#", $step->picture, $tbimg_template);
            $img_html = str_replace("#STEP_PICTURE#", $step->picture, $img_html);
          } elseif(!empty($step->thumbnail) and empty($step->picture)) {
            $img_html = str_replace("#STEP_THUMBNAIL#", $step->thumbnail, $tbimg_template);
            $img_html = str_replace("#STEP_PICTURE#", $step->thumbnail, $img_html);
          } else {
            $img_html = '';
          }
    
          $step_html = str_replace("#IMG_TEMPLATE#", $img_html, $step_html);
          $query = $step_sql."=".$step->step_id;
          $html .= $step_html.PHP_EOL;
        }
    
        $html .= "</ol>\n";	
    
    	// MOD END
    
      }
    
      # Add divisions for pop-up
      add_action('wp_footer', 'diy_shortcode_foot');
    
      //echo "HTML <br/>:".$html; exit;
    
      return $html;
    }
    add_shortcode( 'instructions', 'shortcode_instructions' );
    
    function diy_shortcode_foot() {
      echo '<div id="instruct-thumbnail-large"></div><div id="instruct-thumbnail-bg"></div>';
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.