Split page Portfolio example

bici · Yesterday 17:15:58

For my current project i am wanting to highlight a “portfolio” section. I am restricting it to 6 projects, as this is meant to be a curated selection of projects. And as such they are prone to weeding and elimination of one or two and adding one or to two to a constant 6 examples to illustrate a representation of the variety work an agency does.

So there will be six articles displayed in the top half of the page with a Title, Body, Excerpt, a full size Article Image and a couple of custom fields for project specific data. And nav arrows to the next/prev page.

Along the bottom half of each of the 6 article pages there will be a constant 6 smaller images (1/2 size) of the six projects, with a small Title and a *category label”, with the only change of having an active-class applied to the image of the current project page being displayed. Clicking on any of the Titles or category labels of the thumbnails links to the appropriate project. i.e. a pictorial navigation to other projects.

I have one article working, but have not been able to formulate how to automate the images along the bottom and have them active links. I have managed to only produce the bottom using html.
In one version I managed to use a custom field to output a smaller thumbnail as article_image_thumb and active. But for outputting six constant images and based on url to make it active I am stuck. And of course a designer has to be able to update all from their user login admin page.

Any tips or insights on how to achieve the bottom constant half?

Happy New Year and Hope for the Future

Bloke · Yesterday 17:33:24

A few thoughts:

Are the ones in the portfolio always the most recent? So you can use sort="Posted desc" (or similar) to showcase them? Or do you need to ‘flag’ them for inclusion somehow? i.e. by choosing (say) category2 as “featured” so you can pull only those articles out? Or are they all in a dedicated section so your site designer can swap them in and out?

Alternatively, have you considered smd_featured to allow you to manually assign a ‘featured’ flag to the 6 articles you want to display? I think (can’t remember) that is open to Designers, but I’m not sure. If not, I can make it that way.

One way is by using two article tags. One regular <txp:article /> for the ‘current’ (individual article) “hero” focus, and then a second <txp:article_custom category="featured" exclude='<txp:article_id />' limit="5" /> to choose all the others in the set except the ID of the current one.

smd_featured makes this a little simpler by allowing you to select one to feature and then list “the rest” that are known as ‘unfeatured’. But there are likely to be other ways to achieve this without a plugin. It depends if you want to keep all 6 thumbnails on display for all articles or omit the current one.

If you want to do that, change the article_custom tag:

<txp:variable name="thisart"><txp:article_id /></txp:variable>
<txp:article_custom category="featured" limit="6">
   <txp:images>
      <txp:permlink>
         <txp:thumbnail class='thumb<txp:if_article_id id=''<txp:variable name="thisart" />''> active</txp:if_article_id>' />
      </txp:permlink>
   </txp:images>
</txp:article_custom>

Last edited by Bloke (Yesterday 17:44:32)

bici · Today 01:12:38

The Six images in the bottom half of the page are not tied to most recent etc. They are 6 images chosen to highlight 6 projects. The six images are always displayed, and have a class-active when one is on the page with details of a project. And ideally if a project is removed and a new one is added then the new image should be able to be updated by the designer. And the old one removed. The idea is to have 6 projects and 6 images. no more nor any less.

I’ll think this through and have a go at this in the new year.

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 17:15:58

Split page Portfolio example

#2 Yesterday 17:33:24

Re: Split page Portfolio example

#3 Today 01:12:38

Re: Split page Portfolio example

Board footer