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

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
cyaneo
Posts: 128
Joined: Sun 6. Feb 2005, 01:23
Contact:

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

Post by cyaneo » Mon 14. Feb 2005, 00:18

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?
Gruss
cyaneo
Zen Cart - The Art of e-Commerce

Wenn jeder dem anderen helfen wollte, wäre allen geholfen.
-------------------------------------------
Ein Problem ist halb gelöst, wenn es klar formuliert ist.

Karla
Posts: 223
Joined: Tue 26. Oct 2004, 11:56

Post by Karla » Mon 14. Feb 2005, 09:29

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
Posts: 128
Joined: Sun 6. Feb 2005, 01:23
Contact:

Post by cyaneo » Mon 14. Feb 2005, 09:45

Yes it is!

Thank you!
Gruss
cyaneo
Zen Cart - The Art of e-Commerce

Wenn jeder dem anderen helfen wollte, wäre allen geholfen.
-------------------------------------------
Ein Problem ist halb gelöst, wenn es klar formuliert ist.

vrain
Posts: 52
Joined: Mon 20. Sep 2004, 04:43

Post by vrain » Mon 14. Feb 2005, 11:25

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

Thx :D

V

Peekay
Posts: 286
Joined: Sun 25. Jul 2004, 23:24
Location: UK

Post by Peekay » Mon 14. Feb 2005, 13:17

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
Posts: 128
Joined: Sun 6. Feb 2005, 01:23
Contact:

Post by cyaneo » Wed 16. Feb 2005, 17:01

Thank's Peekay - that could not have been better explained... 8)
Gruss
cyaneo
Zen Cart - The Art of e-Commerce

Wenn jeder dem anderen helfen wollte, wäre allen geholfen.
-------------------------------------------
Ein Problem ist halb gelöst, wenn es klar formuliert ist.

Vince-E
Posts: 19
Joined: Mon 7. Feb 2005, 17:27

Post by Vince-E » Thu 17. Feb 2005, 12:39

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
Posts: 162
Joined: Sat 24. Apr 2004, 23:48
Location: Hannover, Germany
Contact:

Post by rk » Thu 17. Feb 2005, 13:18

Vince-E wrote: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.

:lol:
Ralf

Peekay
Posts: 286
Joined: Sun 25. Jul 2004, 23:24
Location: UK

Post by Peekay » Thu 17. Feb 2005, 16:55

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
Posts: 12
Joined: Wed 12. Jan 2005, 17:56

Post by cacho » Thu 17. Feb 2005, 18:44

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
Posts: 128
Joined: Sun 6. Feb 2005, 01:23
Contact:

Post by cyaneo » Thu 17. Feb 2005, 21:50

Will I need to hack the front.inc.php again ?
Yes - I already work on it (again)... :(
Gruss
cyaneo
Zen Cart - The Art of e-Commerce

Wenn jeder dem anderen helfen wollte, wäre allen geholfen.
-------------------------------------------
Ein Problem ist halb gelöst, wenn es klar formuliert ist.

rk
Posts: 162
Joined: Sat 24. Apr 2004, 23:48
Location: Hannover, Germany
Contact:

Post by rk » Thu 17. Feb 2005, 23:43

cyaneo wrote:
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 ;-).
Ralf

Vince-E
Posts: 19
Joined: Mon 7. Feb 2005, 17:27

Post by Vince-E » Sun 20. Feb 2005, 14:56

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
Posts: 128
Joined: Sun 6. Feb 2005, 01:23
Contact:

Post by cyaneo » Sun 20. Feb 2005, 16:21

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!
Gruss
cyaneo
Zen Cart - The Art of e-Commerce

Wenn jeder dem anderen helfen wollte, wäre allen geholfen.
-------------------------------------------
Ein Problem ist halb gelöst, wenn es klar formuliert ist.

Post Reply