Divs instead of tables

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.

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>';
}