Load image and Title Side by Side

SPKuja · 2014-03-13 17:58:33

High guys, I have a form that has the title of an article and the article image showing, and when I post new articles, I want them to load side by side, in a grid style, automatically filling out the line below as more articles are added, but all I can seem to get is them loading side by side with no lines breaks.

Any thoughts?

Here is what I have so far:

http://www.glaciergaming.co.uk/youtube

So after 3 articles, the rest should be underneath, but they just load in a long line. Sorry If I haven’t explained it too well!

uli · 2014-03-13 19:21:17

As a first measure: get rid of the table code in your form that creates this code here:

<div><td>A Link Between Worlds New&#160;Artwork<br>
<img src="http://www.glaciergaming.co.uk/images/1871t.jpg?1380665443" alt="" width="250" height="100" />
</td></div><div><td>September 28th is National StreetPass&#160;Day!<br>
<img src="http://www.glaciergaming.co.uk/images/1843.jpg?1380134115" alt="" width="250" height="100" />
</td></div>

Don’t forget any tr, table, thead, etc. tags that belong to that table and that might stray somewhere else. Backup before, looks like there’s enough code thicket that might confuse your steps.

Edit: As a rule of thumb: ATM the page has 145 errors, mustn’t be more afterwards :)

GugUser · 2014-03-13 19:40:09

Ui, ui, ui, stunning, this will be an immense amount of work to clean your HTML source code. Is this really a Textpattern powered site?

Last edited by GugUser (2014-03-13 20:10:34)

SPKuja · 2014-03-13 21:29:23

I know my code is super messy, but it does what I need it to do for the most part, I’m not that great with HTML and PHP.

All I really need to know is, is it possible to make the following code load side by side, and not underneath each time:

<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle"><div align="center"><txp:article_image escape="" thumbnail="1" height="100" width="250" />

    </div></td>
  </tr>
  <tr>
    <td height="40" bgcolor="#CCCCCC"><div align="center"><txp:title />

    </div></td>
  </tr>
</table>

If there is another way, then I’m happy to give it a go, but my HTML is not amazing as ou may have noticed!

Thanks in advance!

{Edited to add bc. for code formatting. – Uli}

Last edited by uli (2014-03-13 22:12:31)

uli · 2014-03-13 22:08:24

You can have the markup you like. But it’s easier for all of us (and the result is more reliable) when you reduce the amount of straw (table code) in your concrete :)

All you need for each entry/article is a markup like this.

<div class="your-class">
  <h2>Your title</h2>
  <img src="path/to/image" />
</div>

Nothing more. No more straw. Nice and slim. I can’t predict whether you can float tables side by side. But I know you can float divs.

SPKuja · 2014-03-13 23:52:10

Cool, thank you. I shall give it a go when I get back from work tomorrow!

GugUser · 2014-03-14 00:01:39

SPKuja wrote #279731:

(…) I’m not that great with HTML (…).

It’s not necessary be “great with HTML”. It’s much easier to write it as Uli has shown it. And it makes much more sense. Consider this detail as an example, first your code and then in a better manner:

<tr>
    <td height="40" bgcolor="#CCCCCC">
		<div align="center"><txp:title /></div>
	</td>
<tr>

That needs no more than:

<h2><txp:title /></h2>

One of the advantages is that it is defined as a title, and not as anything else. <h2> is a block element, you don’t need more than this. And everything else such as size, color, background color, alignment etc. you can define globally through CSS.

uli · 2014-03-14 12:12:12

SPKuja wrote #279733:

I shall give it a go when I get back from work tomorrow!

Great. In your stylesheet you then define the width of the h2 according to your images’ width and set div.your-class to display: inline-block. Then all you need is one outer container div around your images whose width you also define in css, and this way you control the amount of images in a row. And that’s it.

Textpattern CMS

Textpattern CMS support forum

#1 2014-03-13 17:58:33