Need direction for tackling page

christina.helen · 2009-03-20 20:09:04

I am having a hard time organizing my brain around textpattern and seem stuck in my purely HTML/CSS mode. I have coded my site. And now want to use TXP to power it and I have THE book and have read lots of stuff but can’t figure out how to begin to do the following: set up the following page www.helpshack.com/test/portfolio. I want it to switch out the info on the right column when a user clicks on of the thumbnails on the left. Easy for me to do in html but I’m having a hard time figuring out what to do in txp.

I think I just need to be briefly steered in the right direction. Do I set up a form for the right column? Or do I make each page its own template? Just a basic idea how you might tackle this might help me to make some forward progress.

Thank you so much.

MattD · 2009-03-20 21:21:58

Create articles for each and use an article tag for the large item and an article_list for the smaller.
You’ll need a form for the list and a form for the larger article.

christina.helen · 2009-03-21 00:55:52

Thank you Matt. That is exactly what I needed. Because I am learning, I don’t think of articles except for long bodies of text, like a blog entry. I will revisit the articles and their tags.

christina.helen · 2009-03-21 20:38:21

I’m still trying to work this out. I would like the content info and image to change when a user clicks on a thumbnail image in the sidebar. (Again it can be viewed at www.helpshack.com/test/portfolio). If I do an article for the main info how do I separate the CLIENT,DETAILS,ROLE info properly? Is this where I would use custom fields?

Thanks again for any ideas and help.

jstubbs · 2009-03-21 20:46:29

Do you have some code ready? It might be easier for you to look using the if_article_list tag, perhaps along with the if_individual_article tag to get what you want.

christina.helen · 2009-03-22 00:06:41

Hi, here’s my code and thank you:

<div id="content">
		   <h3>Portfolio</h3>
		   <img src="images/roman_lg.jpg" alt="Roman Loranc website" />
		   <dl>
		      <dt>CLIENT</dt>
			  <dd>Roman Loranc</dd>
			  <dt>DETAILS</dt>
			  <dd>A website showcasing the work of a professional black and white photographer</dd> 
			  <dt>ROLE</dt>
			  <dd>Concept, design, handcoding, implementation</dd>			  
		   </dl>	
		   <div class="link"><a class="button" href="http://www.romanloranc.com/" target="_blank">VIEW SITE</a></div>	    
       </div>
       <div id="sidebar">
		   <h4>Recent Projects</h4>
			<ul id="portfolio">
			   <li><a href="portfolio.html"><img alt="Roman Loranc" src="images/roman_thumb.gif" /></a></li>
			   <li><a class="opacity" href="coastal.html"><img alt="Coastal Fresh Farms" src="images/coastal_thumb.gif" /></a></li>
			   <li><a class="opacity" href="waterbird.html"><img alt="Waterbird Gallery" src="images/waterbird_thumb.gif" /></a></li>
			   <li><a class="opacity" href="helpshackv1.html"><img alt="helpshAck v1.0" src="images/helpshackv1_thumb.gif" /></a></li>
			</ul>
	    </div>

Last edited by christina.helen (2009-03-22 02:59:44)

els · 2009-03-22 01:02:25

christina.helen wrote:

If there’s a way to keep the formatting, I’ll repost…

How do I post tags and code on the forum? :)

You can use custom fields for the various info parts, but also the body and/or the excerpt, if you are not going to add more text to these portfolio articles. Keep in mind that custom fields can only hold 255 characters. So let’s say you use the article image field for the image id, and custom fields for the rest (client, details, role, url). You can name your custom fields in Advanced preferences.

Your single article form (for display in the content div) would look like this:

<txp:article_image />
<dl>
	<dt>CLIENT</dt>
	<dd><txp:custom_field name="client" /></dd>
	<dt>DETAILS</dt>
	<dd><txp:custom_field name="details" /></dd>
	<dt>ROLE</dt>
	<dd><txp:custom_field name="role" /></dd>
</dl>
<div class="link"><a class="button" href="<txp:custom_field name="url" />" target="_blank">VIEW SITE</a></div>

Your article list form (for the thumbnails in the sidebar):

<txp:if_first_article><ul id="portfolio"></txp:if_first_article>
	<li><a class="opacity" href="<txp:permlink />"><txp:article_image thumbnail="1" /></a></li>
<txp:if_last_article></ul></txp:if_last_article>

On your page template for section ‘portfolio’ you’d need

<txp:article form="portfolio_single_article" limit="1" />

in the content div, and

<txp:article_custom section="portfolio" form="portfolio_article_list" />

in the sidebar div.
You’d also need a couple of conditional tags to remove the class="opacity" for the current article, but it wouldn’t make the example code much clearer so I left that out for the moment ;)

christina.helen · 2009-03-22 01:28:05

Thank you for your thorough response! This really helps me to see how it all fits together with txp tags. Now I can continue to build…I was really stuck in a rut. I realize it took you awhile to look through my code and write such an detailed response and I really appreciate the time you took to help me.

christina.helen · 2009-03-22 23:57:05

I have now added the code that Els so graciously provided but with one change. I used all the custom fields mentioned before but for each article I put the large image in the body and the thumbnail in the excerpt since I FTP my images. When I am on the first Portfolio page all looks well www.helpshack.com/test/portfolio but when I click on the other thumbnail the next page does not show any of the images.

Here is my portfolio_single_article form, portfolio_thumbs form and html:


This is portfolio_single_form  (I can't figure out how to turn on and off the code highlighting - sorry):


<txp:body />
<dl>
	<dt>CLIENT</dt>
	<dd><txp:custom_field name="client" /></dd>
	<dt>DETAILS</dt>
	<dd><txp:custom_field name="details" /></dd>
	<dt>ROLE</dt>
	<dd><txp:custom_field name="role" /></dd>
</dl>
<div class="link"><a class="button" href="<txp:custom_field name="url" />" target="_blank">VIEW SITE</a></div>


Here is my portfolio thumb form 

<txp:if_first_article><ul id="portfolio"></txp:if_first_article>
	<li><a class="opacity" href="<txp:permlink />"><txp:excerpt /></a></li>
<txp:if_last_article></ul></txp:if_last_article>



This is my HTML:
<div id="content">
		   <h3>Portfolio</h3>
		   <txp:article form="portfolio_single_article" limit="1" />
           </div>
           <div id="sidebar">
		   <h4>Recent Projects</h4>
			<txp:article_custom section="portfolio" form="portfolio_thumbs" />
	    </div>

Last edited by christina.helen (2009-03-23 00:08:08)

jstubbs · 2009-03-23 07:06:51

You need to use TXP for importing your images. If you just FTP them to the /images folder, TXP won’t see the images.

For batch image processing, try EBL_Upload plugin. The latest version – 3.

christina.helen · 2009-03-23 15:39:16

“You need to use TXP for importing your images. If you just FTP them to the /images folder, TXP won’t see the images.”

I’ve read that I can FTP my images, just like my CSS files, for more ease. I’ve used a path like <img alt=“Bakersfield after a storm image” src=”<txp:site_url />images/masthead.jpg”/> that works so I am a bit confused as to why I can’t also do it for my articles. Again, this is all new to me so I am just trying to figure things out.

Thanks.

colak · 2009-03-23 15:47:05

christina.helen wrote:

I’ve read that I can FTP my images, just like my CSS files, for more ease. I’ve used a path like <img alt=“Bakersfield after a storm image” src=”<txp:site_url />images/masthead.jpg”/> that works so…

yes this would work but textpattern also allows you to group images using categories. This means that with the help of one of the many plugins you will be able to present all images under your chosen category with just a line of code. If your images are in the db you will be able to update, delete or add those images and that would automatically update your pages.

I am a bit confused as to why I can’t also do it for my articles.

Why should you? TXP is a cms, by entering your articles in the db you have gthem searchable, editable deletable etc.

Textpattern CMS

Textpattern CMS support forum

#1 2009-03-20 20:09:04

Need direction for tackling page

#2 2009-03-20 21:21:58

Re: Need direction for tackling page

#3 2009-03-21 00:55:52

Re: Need direction for tackling page

#4 2009-03-21 20:38:21

Re: Need direction for tackling page

#5 2009-03-21 20:46:29

Re: Need direction for tackling page

#6 2009-03-22 00:06:41

Re: Need direction for tackling page

#7 2009-03-22 01:02:25

Re: Need direction for tackling page

#8 2009-03-22 01:28:05

Re: Need direction for tackling page

#9 2009-03-22 23:57:05

Re: Need direction for tackling page

#10 2009-03-23 07:06:51

Re: Need direction for tackling page

#11 2009-03-23 15:39:16

Re: Need direction for tackling page

#12 2009-03-23 15:47:05

Re: Need direction for tackling page

Board footer