Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2008-12-10 16:43:49
- Alfie
- Member
- Registered: 2007-11-06
- Posts: 40
How to create this type of content layout (within body) using divs
Hi All, ive got a site that uses the following type of layout for the contents.
Its very easy to achieve using a few divs and some css. But how do I do this in TXP without manually editing divs etc? I obviously have to use a form but i dont quite get how to upload a picture then specify the text next to it via the articles page without using tables.
Any help would be amazing
Thanks in advance!
Alfie
Last edited by Alfie (2008-12-10 16:45:44)
Offline
Re: How to create this type of content layout (within body) using divs
Article_image should work for this
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#3 2008-12-10 17:29:51
- Alfie
- Member
- Registered: 2007-11-06
- Posts: 40
Re: How to create this type of content layout (within body) using divs
Thanks for the info, looking into it now, i did notice that _Note that you can only assign a single image to each article. _ does this mean each picture and description will need to be a seperate article and i will have to set the parameters of what articles to display in a form?
Thanks again
Offline
Re: How to create this type of content layout (within body) using divs
If you just want a single article page showing a series of divs containing images and text (that don’t link to sub-pages) and want to know how you can write that using textile notation, the answer is textile doesn’t have a notation for divs but you can write it in html in your article on a separate line.
If you precede your line with the <div class="..."> with a space and leave a blank line above and below you avoid textile adding a p-tag and won’t get any validation problems.
If on the other hand your divs are meant as a series of teaser boxes that you click on to reach the full article, then yes, you make each full page an article, insert the “info info info…” text you have above as the excerpt, upload an image in the image tab and in your article enter that image id number in the “article image” box to assign it to that article. To create your series of divs, you use txp:article in your page template and a form with the html code for your div using txp:article_image and txp:excerpt.
TXP Builders – finely-crafted code, design and txp
Offline
Re: How to create this type of content layout (within body) using divs
If each pair of article/text is an “standalone chunk of information”, then I think the best way is to create one article for each of those chunks.
Then, create a form similar to this:
<div class="article">
<div class="article-image">
<txp:article_image />
</div>
<div class="article-body">
<txp:body />
</div>
</div>Offline
Re: How to create this type of content layout (within body) using divs
maniqui wrote:
…. Agree but I think that it would the the excerpt Alfie wants to display.
<txp:if_article_list><div class="article">
<div class="article-image">
<txp:article_image />
</div>
<div class="article-body">
<txp:ecerpt />
</div>
</div><txp:else />
... something here
</txp:if_article_list>Last edited by colak (2008-12-10 19:02:47)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#7 2008-12-10 19:31:06
- Alfie
- Member
- Registered: 2007-11-06
- Posts: 40
Re: How to create this type of content layout (within body) using divs
thanks for all the responses!! what you guys are suggesting makes a ot of sense, not sure if ill link to a seperate article yet (i.e using the example pictured above just as a teaser) or just oput the unfo all on one page. will post a link up when im done!
Thanks again
Alfie
Offline
#8 2008-12-10 22:13:25
- Alfie
- Member
- Registered: 2007-11-06
- Posts: 40
Re: How to create this type of content layout (within body) using divs
Hi people,
Im halfway there, thanks for the help, but im not quite there yet. Still getting to grips with TXP. Here’s what i’ve done so far:
- Created new section called test
- Upload 3 images
- Create 3 articles, add title, write contents, add small intro text in excerpt and put in picture ID in correct box also add to test section and set to live.
- Create new form containing:
<txp:if_article_list><div class="article">
<div class="article-image">
<txp:article_image />
</div>
<div class="article-body">
<txp:ecerpt />
</div>
</div><txp:else />
... something here <---- dont get this bit?
</txp:if_article_list>
- create new page with pre <txp:article form=“portfolio” sort=“Title asc” status=“4” time=“any” />
- under section set default page to one created above.
- added:
.article-image {float: left; width: 267px; padding: 12px;}
.article-body {float: left; width: 200px; padding: 0px;}
to stylesheet
Now when I click on the link to the section test I get a page with 3 images one above the other, and the excerpt to the side of each picture (just like in my initial picture in post1, but what about the main article/body text (not the excerpt) I asumed there would be a link to this somewhere and a title?
As i said still getting to grips with TXP and sorry for the epic post.
Cheers
Alfie
Last edited by Alfie (2008-12-10 22:16:35)
Offline
Re: How to create this type of content layout (within body) using divs
hi Alfie,
You can try something like this (read the code and see if you get it)
<txp:if_article_list>
<!-- we're in an article list context -->
<div class="article">
<div class="article-image">
<txp:permlink><txp:article_image /></txp:permlink>
</div>
<div class="article-body">
<txp:excerpt />
<txp:permlink>Read more</txp:permlink>
</div>
</div>
<txp:else />
<!-- we're in an individual article (permanent link) context -->
<div class="article">
<div class="article-image">
<txp:permlink><txp:article_image /></txp:permlink>
</div>
<div class="article-body">
<txp:body />
</div>
</div>
</txp:if_article_list>Or even, neater:
<div class="article">
<div class="article-image">
<txp:permlink><txp:article_image /></txp:permlink>
</div>
<div class="article-body">
<txp:if_article_list>
<!-- we're in an article list context -->
<txp:excerpt />
<txp:permlink>Read more</txp:permlink>
<txp:else />
<!-- we're in an individual article (permanent link) context -->
<txp:body />
</txp:if_article_list>
</div>
</div>Offline
#10 2008-12-10 22:29:48
- Alfie
- Member
- Registered: 2007-11-06
- Posts: 40
Re: How to create this type of content layout (within body) using divs
both worked like a charm, just looking at the code to A. realise why (edit: makes sense once you look at it more closelly) and B. find out how come its slightly different code but does the same thing.
I get the general idea behind it all but for some reason I just dont always see the bigger picture.
Cheers again really appreciate it!
Last edited by Alfie (2008-12-10 22:38:51)
Offline
#11 2008-12-11 16:56:00
- Alfie
- Member
- Registered: 2007-11-06
- Posts: 40
Re: How to create this type of content layout (within body) using divs
Hi guys, I know you’ve already helped me out this week and i really appreciate it. But im into another problem
Im trying to add 3 small boxes at the bottom of the page, heres what i’ve done:
#bottom_box {
height: 150px;
width: 812px;
padding: 0 98px 0 98px ;
clear:both;
background-image:url(../images/centerbg.png);
}
.box1 {float: left; width: 250px; padding: 10px;}
.box2 {float: left; width: 250px; padding: 10px;}
.box3 {float: right; width: 250px; padding: 10px;}
<div id="bottom_box"> <div class="box1"><txp:article id="15" form="static_article"></div> <div class="box2"><txp:article id="16" form="static_article"></div> <div class="box3"><txp:article id="17" form="static_article"></div> </div>
for some reason its not outputting the 3 articles I have specified…
Is this really the correct way to do this????
Thanks again for all your help
Alfie
Offline
Re: How to create this type of content layout (within body) using divs
Try closing the three txp:article tags with a closing slash (/>).
Offline