Create Horizontal Widget?

[Budget101]

When creating a new widget "Recent Articles" - the items appear vertically in a list. How would you change the layout so that the articles appear Horizontally (or side by side)

like this:

https://vborg.vbsupport.ru/external/2012/02/39.jpg

I want to be able to create a "Read More" article widget for additional similar articles

but right now, they display vertically rather than horizontally. The current code I am using to create the widget is:

// Set Your Section ID Here
$section = '2,3,4,5';
// Set The Number of Articles To Display
$limit = '5';
// Set The Height of The Thumbnail Image
$height = '100';
// Set The Width of The Thumbnail Image
$width = '100';

$articlegrab = vB::$db->query_read("
SELECT ".TABLE_PREFIX."cms_nodeinfo.nodeid
, ".TABLE_PREFIX."cms_nodeinfo.title
, ".TABLE_PREFIX."cms_article.previewimage
, ".TABLE_PREFIX."cms_article.contentid
, ".TABLE_PREFIX."cms_node.nodeid
, ".TABLE_PREFIX."cms_node.parentnode
, ".TABLE_PREFIX."cms_node.contentid
, ".TABLE_PREFIX."cms_node.url
, ".TABLE_PREFIX."cms_node.setpublish
FROM ".TABLE_PREFIX."cms_article
, ".TABLE_PREFIX."cms_nodeinfo
, ".TABLE_PREFIX."cms_node
WHERE (".TABLE_PREFIX."cms_nodeinfo.nodeid = ".TABLE_PREFIX."cms_node.nodeid)
AND (".TABLE_PREFIX."cms_article.contentid = ".TABLE_PREFIX."cms_node.contentid)
AND (".TABLE_PREFIX."cms_node.parentnode IN ($section))
AND (".TABLE_PREFIX."cms_node.setpublish != 0)
ORDER BY ".TABLE_PREFIX."cms_node.publishdate DESC LIMIT $limit
");
$output.="<table>";
while($articleinfo = vB::$db->fetch_array($articlegrab)) {

$title = $articleinfo['title'];
$image = $articleinfo['previewimage'];
$nodeid = $articleinfo['nodeid'];
$url = $articleinfo['url'];
$fulltext = strip_bbcode($fulltext);
$text = preg_replace('/\[ATTACH\=CONFIG\]\d\d\[\/ATTACH\]/', '', $text);
$text = strip_bbcode($text);


if($text == '') $text = substr($fulltext, 0,150);

if($image != '') $output .= "<tr><td><img src='".$image."' width='".$width."px' align='left' height='75' HSPACE='5' VSPACE='3'/></td>";

$output .= "<td><b><a href='content.php?".$nodeid."-".$url."' align='top'>".$title."</a><p>".$text." </b></p><br/></td></tr>";
}
$output.="</table>";

TIA!

[Lynne]

You would need to create a grid that has a spot for this widget. Then create a layout from that grid and apply it to the section and make sure to put your widget in that specific spot in the layout.

[Budget101]

Hi Lynne, thank you for responding! I have a grid that has a spot for the widget. I have a layout from the grid.
The problem that I'm having is that this particular widget code returns the items vertically, rather than horizontally.
I need help editing the code (shown in the first post) to change how it appears so that instead of the items coming up vertically like this:

photo- link

photo- link

photo- link

they appear horizontally like this instead:

Photo Photo Photo
Link Link Link


The issue appears to be the table output- it repeats vertically-

if($text == '') $text = substr($fulltext, 0,150);

if($image != '') $output .= "<tr><td><img src='".$image."' width='".$width."px' align='left' height='75' HSPACE='5' VSPACE='3'/></td>";

$output .= "<td><b><a href='content.php?".$nodeid."-".$url."' align='top'>".$title."</a><p>".$text." </b></p><br/></td></tr>";
}
$output.="</table>";

But I'm not familiar with how to make it repeat horizontally instead. . .

--------------- Added 1326398068 at 1326398068 ---------------

I tried changing the table <td><tr> placements, but it just gave me errors. I would assume that I would have to create a class-style for it to follow to get it to repeat horizontally, rather than vertically, but I don't know where to begin to do that.

[Lynne]

Ah, I see what you mean. Can we get a link to see this?

[Budget101]

Ah, I see what you mean. Can we get a link to see this?


Yes, you can view it here: link truncated

scroll to the bottom - this widget is located underneath the Comments Box.

(Thank you !)

[Lynne]

Have you tried using <tr width="33%"> ?

[Budget101]

Have you tried using <tr width="33%"> ?

Hi lynne, thank you for the suggestion. I did give it a try, but the articles wouldn't populate at all when I added the width to it. It actually gave me a parse error:

Parse error: syntax error, unexpected T_LNUMBER in

I tried it several different ways in the <tr> and also in the table width itself.

[kh99]

If you're trying to insert width="33%" in a string that's delimited with double quotes, you have to escape the quotes, like:

$output .= "<tr width=\"33%\"> some stuff...";

[Budget101]

Thank you kh! I got it to narrow the table , now I just need it to repeat horizontally, rather than vertically... is there a way to incorporate repeat-x into output?

if($text == '') $text = substr($fulltext, 0,150);

if($image != '') $output .= "<tr><td><img src='".$image."' width='".$width."px' align='left' height='75' HSPACE='5' VSPACE='3'/></td>";

$output .= "<td><b><a href='/forum/content.php?".$nodeid."-".$url."' align='top'>".$title."</a><p>".$text." </b></p></br><p>".$description."</p><br/></td></tr>";
}
$output.="</table>";

--------------- Added 1326739287 at 1326739287 ---------------

I tried adding a div class and specifying it, but I can't seem to get the syntax right

<style>
#hloop
.hloop{
border:1px solid green;
padding:20px;
vertical-align:top;
width:200px;
height:100px;
}
.hloop img{
margin-left:10%;
}
</style>

$output.="<div class='hloop'>";
while($articleinfo = vB::$db->fetch_array($articlegrab)) {

$title = $articleinfo['title'];
$image = $articleinfo['previewimage'];
$description = $articleinfo['description'];
$nodeid = $articleinfo['nodeid'];
$url = $articleinfo['url'];
$fulltext = strip_bbcode($fulltext);
$text = preg_replace('/\[ATTACH\=CONFIG\]\d\d\[\/ATTACH\]/', '', $text);
$text = strip_bbcode($text);


if($text == '') $text = substr($fulltext, 0,150);

if($image != '') $output .= "<img src='".$image."' width='".$width."px' align='left' height='75' HSPACE='5' VSPACE='3'/>";

$output .= "<b><a href='/forum/content.php?".$nodeid."-".$url."' align='top'>".$title."</a><p>".$text." </b></p></br><p>".$description."</p><br/>";
}
$output.="</div>";