WordPress.org

Support

Support » Plugins and Hacks » Instruct » Divs instead of tables

Divs instead of tables

  • 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/

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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.

    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.

    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.

    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>';
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Divs instead of tables’ is closed to new replies.
Skip to toolbar