99,9% tableless Design- but some tables I can't find...

[cyaneo]

Hi,

I already have my websites 99,9% tableless (and 100% XHTML valid), but I still can't find the tables for content TEXT W/IMAGES. What file do I have to edit?

---------------------------------------------------------------------------------------

Hi,

ich habe meine Webseiten zu 99,9% tabellenlos (und zu 100% XHTML valide) umgestellt. Leider finde ich die Einträge der Tabellen für Content "Text mit Bild" nicht. Kann mir bitte jemand verraten, welche Dateien dafür zuständig sind?

[Karla]

Maybe this is it in "front.func.inc.php" ???

Code: Select all

function imagetable($phpwcms, $image, $rand="0:0:0:0", $align=0) {
	// creates the image tags if text w/image
	// 0   :1       :2   :3        :4    :5     :6      :7       :8
	// dbid:filename:hash:extension:width:height:caption:position:zoom
	
	$thumb_image = get_cached_image(
						array(	"target_ext"	=>	$image[3],
								"image_name"	=>	$image[2] . '.' . $image[3],
								"max_width"		=>	$image[4],
								"max_height"	=>	$image[5],
								"thumb_name"	=>	md5($image[2].$image[4].$image[5].$phpwcms["sharpen_level"])
        					  )
						);
						
	if($image[8]) {
	
		$zoominfo = get_cached_image(
						array(	"target_ext"	=>	$image[3],
								"image_name"	=>	$image[2] . '.' . $image[3],
								"max_width"		=>	$phpwcms["img_prev_width"],
								"max_height"	=>	$phpwcms["img_prev_height"],
								"thumb_name"	=>	md5($image[2].$phpwcms["img_prev_width"].$phpwcms["img_prev_height"].$phpwcms["sharpen_level"])
        					  )
						);
			
		if($zoominfo == false) $image[8] = 0;
	
	}
						
	$table = '';

	if($thumb_image != false) {
	
		// read content image info
		$table_class 	= $GLOBALS["template_default"]["article"]["image_table_class"];
		$table_class	= ($table_class) ? ' class="'.$table_class.'"' : '';
		$table_bgcolor 	= $GLOBALS["template_default"]["article"]["image_table_bgcolor"];
		$table_bgcolor	= ($table_bgcolor) ? ' bgcolor="'.$table_bgcolor.'"' : '';
		$image_align	= $GLOBALS["template_default"]["article"]["image_align"];
		$image_align	= ($image_align) ? ' align="'.$image_align.'"' : '';
		$image_valign	= $GLOBALS["template_default"]["article"]["image_valign"];
		$image_valign	= ($image_valign) ? ' valign="'.$image_valign.'"' : '';
		$image_border	= ' border="'.intval($GLOBALS["template_default"]["article"]["image_border"]).'"';
		$image_imgclass	= $GLOBALS["template_default"]["article"]["image_imgclass"];
		$image_imgclass	= ($image_imgclass) ? ' class="'.$image_imgclass.'"' : '';
		$image_class 	= $GLOBALS["template_default"]["article"]["image_class"];
		$image_class	= ($image_class) ? ' class="'.$image_class.'"' : '';
		$image_bgcolor 	= $GLOBALS["template_default"]["article"]["image_bgcolor"];
		$image_bgcolor	= ($image_bgcolor) ? ' bgcolor="'.$image_bgcolor.'"' : '';
		$caption_class 	= $GLOBALS["template_default"]["article"]["image_caption_class"];
		$caption_class	= ($caption_class) ? ' class="'.$caption_class.'"' : '';
		$caption_bgcolor= $GLOBALS["template_default"]["article"]["image_caption_bgcolor"];
		$caption_bgcolor= ($caption_bgcolor) ? ' bgcolor="'.$caption_bgcolor.'"' : '';
		$caption_valign	= $GLOBALS["template_default"]["article"]["image_caption_valign"];
		$caption_valign	= ($caption_valign) ? ' valign="'.$caption_valign.'"' : '';
		$caption_align	= $GLOBALS["template_default"]["article"]["image_caption_align"];
		$caption_align	= ($caption_align) ? ' align="'.$caption_align.'"' : '';
		$capt_before 	= $GLOBALS["template_default"]["article"]["image_caption_before"];
		$capt_after 	= $GLOBALS["template_default"]["article"]["image_caption_after"];
	
		// image caption
		$caption	= base64_decode($image[6]);
		$caption	= explode('|', $caption);
		$caption[0]	= nl2br(html_specialchars($caption[0]));
		$caption[1] = (!isset($caption[1])) ? html_specialchars($image[1]) : html_specialchars($caption[1]);
		if(!isset($caption[2])) {
			$caption[2] = array('',' target="_blank"');
		} else {
			//proof target of link
			$caption[2] = explode(' ', trim($caption[2]));
			$caption[2][1] = (!isset($caption[2][1])) ? '' : ' target="'.$caption[2][1].'"';
		}
	
		// image source
		$img = '<img src="'.PHPWCMS_IMAGES.$thumb_image[0].'" '.$thumb_image[3].$image_border.$image_imgclass.' alt="'.$caption[1].'">';
		
		$tablewidth = $thumb_image[1];

		// spaces around image table
		$rand = explode(":", $rand);
		if(count($rand)) { foreach($rand as $key => $value) $rand[$key] = intval($value); } else { $rand = array(0,0,0,0); }
		if($rand[2] && $rand[3]) {
			$colspan = ' colspan="3"';
		} else {
			if($rand[2] || $rand[3]) { $colspan = ' colspan="2"'; } else { $colspan = ""; }
		}
		$tablewidth += $rand[2] + $rand[3];
		
		$table .= '<table width="'.$tablewidth.'" border="0" cellspacing="0" cellpadding="0" ';
		$table .= ($align) ? 'align="'.$align.'"' : '';
		$table .= $table_bgcolor.$table_class.">\n";
		$table .= ($rand[0]) ? '<tr><td'.$colspan.'>'.spacer(1,$rand[0])."</td></tr>\n" : '';
		$table .= '<tr>';
		$table .= ($rand[2]) ? '<td>'.spacer($rand[2],1).'</td>' : '';
		if($image[8]) {
			
			$open_popup_link = "image_zoom.php?show=".base64_encode($zoominfo[0].'?'.$zoominfo[3]);
			$table .= '<td'.$image_align.$image_valign.$image_bgcolor.$image_class.">";
			if($caption[2][0]) {
				$open_link = $caption[2][0];
				$return_false = '';
			} else {
				$open_link = $open_popup_link;
				$return_false = 'return false;';
			}
			$table .= "<a href=\"".$open_link."\" onClick=\"window.open('".$open_popup_link."','previewpic','width=";
			$table .= $zoominfo[1].",height=".$zoominfo[2]."');".$return_false."\"".$caption[2][1].">";
			$table .= $img.'</a></td>';
		} else {
			$table .= '<td'.$image_align.$image_valign.$image_bgcolor.$image_class.">";
			if($caption[2][0]) {
				$table .= '<a href="'.$caption[2][0].'"'.$caption[2][1].'>'.$img.'</a>';
			} else {
				$table .= $img;
			}
			$table .= '</td>';
		}
		$table .= ($rand[3]) ? "<td>".spacer($rand[3],1)."</td>" : "";
		$table .= "</tr>\n";
		if($caption[0]) {
	
			$table .= "<tr><td".$colspan.">".spacer(1,3)."</td></tr>\n";
			$table .= "<tr>";
			$table .= ($rand[2]) ? "<td>".spacer($rand[2],1)."</td>" : "";
			$table .= '<td'.$caption_valign.$caption_align.$caption_bgcolor.$caption_class.'>'.$capt_before.$caption[0].$capt_after."</td>";
			$table .= ($rand[3]) ? "<td>".spacer($rand[3],1)."</td>" : "";
			$table .= "</tr>\n";
		}	
		$table .= ($rand[1]) ? "<tr><td".$colspan.">".spacer(1,$rand[1])."</td></tr>\n" : "";		
		$table .= "</table>";

[cyaneo]

Yes it is!

Thank you!

[vrain]

How do you design tableless pages and why should you do it?

Thx

V

[Peekay]

It is good practice now to use tables for tabular data, not to control layout. Whenever possible, you should use DIVs and CSS to control the positioning and formatting of page content.

You can build your PHPWCMS page templates entirely using DIVs and CSS, a search in this forum will reveal how. However, some of the application code and content-parts contain scripts that generate tables. To remove those requires hacking the code as cyaneo is doing.

From an accessibility viewpoint, it's important that the tables you use in an article to present data are marked up correctly so that assisted-technology browsers used by people with visual impairments can 'read' the content. The extent to which you can do this in PHPWCMS depends on the options offered by the WYSIWYG editor you use to build the table. You can of course also create the table code elsewhere and cut and paste it into an HTML content part.

A search on Google for 'accessible tables' will reveal more info.

[cyaneo]

Thank's Peekay - that could not have been better explained...

[Vince-E]

very well explained indeed...
however... There are more HTML tags then only tables and divs... Use your tags for what they are created. Yes, a table for tabular data. A div to position content blocks. However, if you have a header, dont use a div and put the font-size on 14pt, but just use h* and position this.
If you have a list of items, dont use a list of divs, use the ul or ol..
for short, use the tags what they are supposed to be for...

nice work to get rid of the tables!

[rk]

very well explained indeed...
however... There are more HTML tags then only tables and divs... Use your tags for what they are created.

You are absolute right.

Then everybody can view the page. And without css looks the pagecontent also nice.

[Peekay]

Yes. Good points Vince-E and rk

To be honest, I got into the habit of using <p> tags for everything. I would then make headlines larger with CSS and create lists with line breaks. It was only when I was asked to make a site more accessible I discovered the implications of working that way. Most assisted technology browsers ignore the CSS in favour of HTML semantics. They expect a headline to be enclosed by an <h1> tag and a sub-heading to be identified with an <h2> or an <h3>. As you point out, they also expect a list to be a list.

I only began to see the significance of this when I viewed one of my legacy sites using Lynx the text browser. Of course, Lynx correctly centres an <h1> tag as a headline and out-dents <h2> tags etc. to differentiate them as sub-heads from para text. My site was just one long paragraph!. Worse still, Lynx also displays the HTML in the order it gets it. So even if a DIV appeared at the top of the page in a visual browser, if the code was located at the bottom of the page of HTML, that's where Lynx put it.

I have also since discovered that using <em> and <strong> instead of <i> and <b> is more than just good practice. Many screen readers will change their voice tone when they encounter an <em> tag, to emphasise the content. Likewise, the reason you should use <th> to define table column headings is because some readers will repeat the <th> value before each table cell, e,g, Colour - Red - Price - 10, Colour - Blue - Price - 20 etc.

But of course all these elements can be styled with CSS, so you can make an <h1> visually the same size as para text if you want.

[cacho]

Hello

I wonder what will happen when a new version come out ?

Will I need to hack the front.inc.php again ?

Are developers planning to separate php code from html to avoid to make this hacks ?


Thanks in advance

J

[cyaneo]

Will I need to hack the front.inc.php again ?

Yes - I already work on it (again)...

[rk]

Will I need to hack the front.inc.php again ?

Yes - I already work on it (again)...

It is possible to change the most things in config\phpwcms\conf.template_default.inc.php
but not everything at the moment .

Headlines, paragraphs, ..., but some contentparts use tables at the moment.

I have insert some comments to see which entry do what. Bad english, i think .

[Vince-E]

uhuh...
same here.... made NAV_ROW and NAV_TABLE_SIMPLE allready, so it will spit out only format in ul... you can customize the layout with CSS like you want...
question for you guys... which editor do you use? I tried FCKeditor, but unfortunately it uses capitalized tags like <P> instead of <p>. I couldnt get it working otherwise...
At this moment I just use the plain editor, which does it work ok, though I guess i would like to try FCK again, if only i could get it working ok...

[cyaneo]

Hmm...
I work with FCKeditor2 and Firefox 1.0 and get real clean code (XHTML valid!).

The only thing I have to correct permanently is from

Code: Select all

<br type="_moz"/>

to

Code: Select all

<br/>

The rest is perfect!