grid with random image sizes and responsive [closed] - php

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have very small knowledge about PHP and HTML, so I need some help.
I'm trying to make my forum homepage (the gate) grid by getting images from the post, changing its size, and adding it to the page. For example:
Anyway, the code that i have is:
{else}
<?php $t= 0;?>
<table class="grid" border="0" width="100%" cellpadding="0" style="border-collapse: collapse" align="center">
<tr class="row">
{Des::while}{LastNews_subjectList}
<?php
if ($PowerBB->_CONF['info_row']['portal_columns'] == '1' )
{
$columns_News = "3";
}
else
{
$columns_News = "2";
}
if($t== $columns_News){
$t=0;
echo "</tr><tr>";
}?>
<td class="post-position" valign="top">
<table class="cell" border="1" width="100" class="border" cellpadding="0" style="border-collapse: collapse" align="center">
<tr>
<td class="rowthumb" valign="top">
<a href="index.php?page=topic&show=1&id={$LastNews_subjectList['id']}" title="<?php echo $title;?>">
<?php
$x = 1;
$images = array();
$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text'] = stripslashes($PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text']);
preg_match_all('/src=([\'"])?((?(1).*?|\S+))(?(1)\1)/', $PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text'], $images);
foreach ($images[2] as $src)
{
if($src)
{
echo '<img border="0" width="200" height="200" src="'.$src.'" alt="'.$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'].'">';
}
break;
}
if(!preg_match_all('/src=([\'"])?((?(1).*?|\S+))(?(1)\1)/', $PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['text'], $images))
{
echo '<img border="0" width="200" height="200" src="look/portal/images/traffic_cone.png" alt="'.$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'].'">';
}
?>
</a>
</td>
</tr>
<tr>
<td class="cell-title" valign="top">
<?php
$PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'] = $PowerBB->Powerparse->censor_words($PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title']);
$title = $PowerBB->_CONF['template']['while']['LastNews_subjectList'][$this->x_loop]['title'];
$num = "20";
$title = $PowerBB->functions->words_count($title,$num);?>
<?php echo $title;?>
<br />
<a href="index.php?page=topic&show=1&id={$LastNews_subjectList['id']}" title="Read More">
<div id="read_more_button">
{$lang['SubjectVisitor']}:
({$LastNews_subjectList['visitor']})
{$lang['usercp_reputations']}:
({$LastNews_subjectList['rating']})
</div>
</a>
</td>
</tr>
</table> <br />
</td>
<?php $t= $t+1;?>
{/Des::while}
</tr>
</table>
{if {$PagerLastNews}}
<table border="1" width="100%" cellpadding="0" style="border-collapse: collapse"><tr>
<tr>
<td class="row3">
<span class="r-right">
{$PagerLastNews}
</span>
</td>
</tr>
</table>
So what do I have to do? I have tried several times and played around but I cant do it, so I hope I find the answer here.
Thanks in advance! goodbye.

Answer 1

Do not use table for this. If you want to reach the layout you attached as an image for example.
I do not know how you collect the images, but of course you need them.
This library can help you out with the grid thingie. I used that, so I know. It should help you out. It has examples too, how to implement it for your site.
Masonry - Cascading Grid Layout library
Because of the comment...
You get the images in a PHP array. Print them out. The result should be something like this:
<ul class="js-masonry" id="gallery-container">
<li class="grid-sizer"></li>
<li class="item">
<img alt="Test title 1" src="/cache/b/6/9/f/c/b69fcffb670eb78227c9f407bf7fcc4db94f4c13.jpeg" class="img-responsive">
</li>
<li class="item">
<img alt="Test title 23" src="/cache/c/1/f/0/0/c1f0045723688ac91a92ac9b49ea13c00bbb1683.jpeg" class="img-responsive">
</li>
<li class="item">
<img alt="Test title 2" src="/cache/5/1/7/1/a/5171a4e0264f19486a8033fffcf8e1a0e62d0587.jpeg" class="img-responsive">
</li>
</ul>
You download the js library. And include it:
(or use the CDN as i use here for dev...)
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js" type="text/javascript"></script>
Then run the script, after the page downloads
<script type="text/javascript">
$(document).ready(function() {
var $container = $('#gallery-container').masonry();
$container.imagesLoaded( function() {
$container.masonry(
{
"columnWidth": ".grid-sizer",
"itemSelector": ".item",
"gutter":10
});
});
});
</script>
As you can see I used the imagesLoaded library also.
imagesLoaded