Layout and textpattern semantics

amyng · 2010-08-28 02:09:40

Hi guys,

I’m trying to do up a website that looks like this and I’m a little confused with the txp tags used to output the articles.

Also, does the segment (article_image list) on the bottom center need to have its own div, or can it be be solved with txp tags? I want this section to be on the individual pages as well….

I would so appreciate it if someone can point me to the right direction!

Amy

mrdale · 2010-08-28 02:28:04

<div id="page">
   <div id="banner"><txp:image id="XX"/></div>
   <div id="navs"><txp:section_list /></div>
   <div id="sidebar"><txp:article_custom attributes="your criteria here" /></div>
   <div id="main">
      <txp:article limit="1"/>
      <div id="thumbnailNav">
         <txp:article_custom attributes="your criteria here" form="your layout form" />
      </div>
   </div>
   <div id="footer"><txp:article_custom id="XX" /></div>
</div>

amyng · 2010-08-28 03:35:13

Thanks Mr. Dale!

For the <txp:article_custom> tag though, how do I make it display thumbnail images that lists horizontally?

jakob · 2010-08-28 09:12:27

how do I make it display thumbnail images that lists horizontally

The horizontal layout you can achieve using css and float:left so that is not dependent on txp.

<txp:article_custom attributes="your criteria here" />

It depends on how you are organizing your images. If you creating an article for each image and insert the corresponding image ID# into the article-image field in the write tab then you can use txp:article_custom. For example, a simple setup where your photo articles are in a section named “photos”, you could use:

      <div id="thumbnailNav">
         <txp:article_custom section="photos" offset="1" limit="5">
            <txp:permlink class="thumbnail_link"><txp:article_image thumbnail="1" /></txp:permlink>
         </txp:article_custom>
      </div>

where offset="1" skips the first image (which is shown in large) and limit="5" shows five thumbnails as in your pic. With css, you could then use:

.thumbnail_link { float:left; padding-right: 10px; }

You’ll need to clear the float for the item beneath.

If you are not using articles for each photo, there are other ways of outputting photos using image tags or one of the many plugins out there.

amyng · 2010-08-30 16:03:57

Hi Jakob,

Thanks so much for the response — I’ve added the code into my page and for the most part it’s working fine (also researched other options, but yours is still the best).

I’m now working on the CSS, which is a big headache for me at the moment. I’ve gone out and bought (and already read) the Textpattern Solutions book and have gotten reacquainted again with the semantics since.

I’ve put the website live so that you can see my problem here. After spending 18 hours on it I still can’t find out what I’m doing wrong — the positioning is all wonky in the contents area. I just need the thumbnail with link to past articles to be under all articles (including the front page ones, which will be excerpted).

Here’s my page:

<txp:output_form form="meta" /> 

<body>

<!-- accessibility -->

<div id="accessibility">

<ul>
		<li><a href="#content"><txp:text item="go_content" /></a></li>
		<li><a href="#sidebar-1"><txp:text item="go_nav" /></a></li>
		<li><a href="#sidebar-2"><txp:text item="go_search" /></a></li>
	</ul>

</div>

<div id="container">


<!-- head -->
	<div id="head">

<div class="bordernone">
		<a href="<txp:site_url />"><img src="http://localhost:8888/pikabooks/images/6.jpg"/></a>
</div>
	</div>





<!-- topnav -->

<txp:output_form form="header+nav" /> 




<!-- left -->
<div id="sidebar-1">

<div id="brief">
<txp:article_custom category="callforparticipation" form="static_article" limit="1" />
</div>


<div id="about_main">
<txp:output_form form="about_sidebar" /> 

</div>

</div>



<!-- center top-->
	<div id="content">





<txp:if_individual_article>
	<txp:article form="buzzblog_entry" />


<txp:else />

<txp:article limit=1 section="books" />

<div id="turner">
		<div class="turner_prev">
<p><txp:older><txp:text item="<< older posts" /></txp:older> 
</div>

<div class="turner_next">
			<txp:newer><txp:text item="newer posts >>" /></txp:newer></p>
</div>



</txp:if_individual_article>
</div>










<div id="bottom">

<p>THIS IS WHERE THE OLD ISSUES GO:</p>

<div class="thumbnail_link">

 <txp:article_custom offset="1" limit="5">
            <txp:permlink class="thumbnail_link"><txp:article_image thumbnail="1" /></txp:permlink>
         </txp:article_custom>





</div>








</div>

</div>


</div>








<!-- footer -->


<txp:output_form form="footer" /> 

</div>






</body>
</html>

Last edited by amyng (2010-08-30 16:13:25)

jakob · 2010-08-30 18:44:42

At first everything looks okay on your link but some pictures aren’t loading. I had a look at the source and it’s still showing images from the localhost (if you have your local webserver switched on, you might not notice that they are missing but you will when you switch it off). Once I edited the source to just show /images/123.jpg I see the images properly and the problem your describe. (BTW: if you hardcoded the localhost image address, try using <txp:site_url />images/123.jpg and then when you put your site online and change the path settings in the prefs of your online site, it will link them correctly.)

It looks to me like a css problem:

to make the next/previous links appear beneath the image rather to the right of it try adding clear:both; to the css for #turner.
to give the thumbnails a bit more padding at the bottom try adding overflow:auto; margin-bottom:20px; to the css for .thumbnail_link (overflow:auto forces the bounding box to envelope the contents of the div).

amyng · 2010-08-31 06:03:30

Thanks for the heads up Jakob — I’ve fixed the links to the images!

I’ve tried adding clear:both to <div="turner"> before and what happened was that it seems to be pushed further down the browser whenever there’s lots of text on the left sidebar. (it seems like the <div="bottom"> starts parallel to the ending of <div="sidebar-1">. This is also very mysterious to me as to why it’s happening since they’re all different blocks of div and are independent from each other.

Here’s the sidebar form:

<txp:article_custom section="participation" limit="1" />

<h3>
ABOUT
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

And the individual articles page is also acting up. This is the buzzblog_entry form called in the main page which outputs the permlinked article. It doesn’t seem to output the link to previous & next articles, and the <div="bottom"> seems to be pushed even further down, taking the space under <div="sidebar-1">!

<h3><txp:title/></h3>
<txp:body/>

<div id="turner">
		<div class="turner_prev">
<p><txp:older><txp:text item="<< older posts" /></txp:older> 
</div>

<div class="turner_next">
			<txp:newer><txp:text item="newer posts >>" /></txp:newer></p>
</div>
</div>

jakob · 2010-08-31 19:53:27

I think that’s still a css problem more than anything. I had a play around and found adding overflow:auto; to #content solves your immediate problem. If your content jumps around a bit, it may be because it’s not fitting in the column. You may need to adjust your width totals (taking into account margins and padding) for your columns and container. If you narrow #sidebar-1 a little to 195px it fits again. You may find it easier to rebuild you css from scratch with the settings you really need rather than trying to adjust the standard css.

amyng · 2010-09-02 15:57:20

Hi Jakob,

You’re right — I scrapped the whole thing and rebuilt it completely from scratch. I’m developing it locally, and already I’m seeing great results. Once I’ve uploaded it I’ll report back — thank you so much for sharing and for all your tips!

If anyone wants to know, Layout Gala is a great help for those who are looking for a base template for website design. I’ve already tweaked it to look like what I envisioned it to be. I’m no stranger to TXP, but after not digging through the code for 2 years and flexing those muscles, I got a little rusty!

Textpattern CMS

Textpattern CMS support forum

#1 2010-08-28 02:09:40

Layout and textpattern semantics

#2 2010-08-28 02:28:04

Re: Layout and textpattern semantics

#3 2010-08-28 03:35:13

Re: Layout and textpattern semantics

#4 2010-08-28 09:12:27

Re: Layout and textpattern semantics

#5 2010-08-30 16:03:57

Re: Layout and textpattern semantics

#6 2010-08-30 18:44:42

Re: Layout and textpattern semantics

#7 2010-08-31 06:03:30

Re: Layout and textpattern semantics

#8 2010-08-31 19:53:27

Re: Layout and textpattern semantics

#9 2010-09-02 15:57:20

Re: Layout and textpattern semantics

Board footer