title: grid with random image sizes and responsive
body: <p>I have very small knowledge about PHP and HTML, so I need some help.</p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/JeILJ.png" alt="example screen shot"></p>
  
  <p>Anyway, the code that i have is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{else}
  &lt;?php $t= 0;?&gt;
  &lt;table class="grid" border="0" width="100%" cellpadding="0" style="border-collapse: collapse" align="center"&gt;
  
  &lt;tr class="row"&gt;
  
  {Des::while}{LastNews_subjectList}
  &lt;?php
  if ($PowerBB-&gt;_CONF['info_row']['portal_columns'] == '1' )
  {
  $columns_News = "3";
  }
  else
  {
  $columns_News = "2";
  }
  if($t== $columns_News){
  $t=0;
  echo "&lt;/tr&gt;&lt;tr&gt;";
  }?&gt;
  &lt;td class="post-position" valign="top"&gt;
  &lt;table class="cell" border="1" width="100" class="border" cellpadding="0" style="border-collapse: collapse" align="center"&gt;
   &lt;tr&gt;
    &lt;td class="rowthumb" valign="top"&gt;
  
  &lt;a href="index.php?page=topic&amp;amp;show=1&amp;amp;id={$LastNews_subjectList['id']}" title="&lt;?php echo $title;?&gt;"&gt;
  &lt;?php
  $x = 1;
  
  $images = array();
  $PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['text'] = stripslashes($PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['text']);
  preg_match_all('/src=([\'"])?((?(1).*?|\S+))(?(1)\1)/', $PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['text'], $images);
  foreach ($images[2] as $src)
    {
   if($src)
    {
       echo '&lt;img border="0" width="200" height="200" src="'.$src.'" alt="'.$PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['title'].'"&gt;';
    }
  
       break;
   }
    if(!preg_match_all('/src=([\'"])?((?(1).*?|\S+))(?(1)\1)/', $PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['text'], $images))
    {
     echo '&lt;img border="0" width="200" height="200" src="look/portal/images/traffic_cone.png" alt="'.$PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['title'].'"&gt;';
    }
  
  ?&gt;
  &lt;/a&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td class="cell-title" valign="top"&gt;
  
  &lt;?php
  $PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['title'] = $PowerBB-&gt;Powerparse-&gt;censor_words($PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['title']);
  $title = $PowerBB-&gt;_CONF['template']['while']['LastNews_subjectList'][$this-&gt;x_loop]['title'];
  $num = "20";
  $title = $PowerBB-&gt;functions-&gt;words_count($title,$num);?&gt;
  &lt;a href="index.php?page=topic&amp;amp;show=1&amp;amp;id={$LastNews_subjectList['id']}" title="&lt;?php echo $title;?&gt;"&gt;&lt;?php echo $title;?&gt;&lt;/a&gt;
   &lt;br /&gt;
  &lt;a href="index.php?page=topic&amp;amp;show=1&amp;amp;id={$LastNews_subjectList['id']}" title="Read More"&gt;
  &lt;div id="read_more_button"&gt;
  {$lang['SubjectVisitor']}:
   ({$LastNews_subjectList['visitor']})
                &amp;nbsp;{$lang['usercp_reputations']}:
    ({$LastNews_subjectList['rating']})
  &lt;/div&gt;
  &lt;/a&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt; &lt;br /&gt;
  &lt;/td&gt;
  &lt;?php $t= $t+1;?&gt;
  {/Des::while}
   &lt;/tr&gt;
   &lt;/table&gt;
  
  {if {$PagerLastNews}}
  &lt;table border="1" width="100%" cellpadding="0" style="border-collapse: collapse"&gt;&lt;tr&gt;
  &lt;tr&gt;
  &lt;td class="row3"&gt;
  &lt;span class="r-right"&gt;
  {$PagerLastNews}
  &lt;/span&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>Thanks in advance! goodbye.</p>