HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Designer Themes Tutorial

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#89237 (In Topic #18051)
Avatar

Fan in action

Catalogue video

Thanks OCportal for the designer themes catalogues video!

I would never have worked out how to make such changes without the video. This video demonstrates how to change how catalogue entries look.

My question is:
The catalogue entries are displayed one below another, one across the whole page width.
I'm trying to work out how to display two entries side by side ie. 2 across the page.

Thanks,
Nick
Back to the top
 
Posted
Item has a rating of 5 (Liked by Chris GrahamLiked by FletchLiked by Jean)  
Rating:
#89246
Avatar

Community saint

To control it at the entry level you will need to change either CATALOGUE_DEFAULT_ENTRY.tpl or CATALOGUE_DEFAULT_ENTRY_EMBED.tpl (or renamed equivalent of course), depending on your setup.

You'll need to work out when ever second entry is being processed. To do that you can use logic like this:

Code

{$INIT,entry_num,1}
{+START,IF,{$EQ,{$REM,{$GET,entry_num},2},0}}
//
// Do stuff here if 2nd, 4th, 6th, entry etc.
//
{+END}
{$INC,entry_num}

So for a quick-and-dirty example, we can change CATALOGUE_DEFAULT_ENTRY_EMBED.tpl, from:

Code

{$,Read the catalogue tutorial for information on custom catalogue layouts}

<div class="wide_table_wrap"><table summary="{!MAP_TABLE}" class="wide_table solidborder spaced_table">
   {+START,IF,{$NOT,{$MOBILE}}}
      <colgroup>
         <col width="150" />
         <col width="100%" />
      </colgroup>
   {+END}

   <tbody>
      {FIELDS}
   </tbody>
</table></div>

<div class="float_surrounder">
   <p class="left">
      <a target="_self" href="#"><img class="inline_image" title="{!BACK_TO_TOP}" alt="{!BACK_TO_TOP}" src="{$IMG*,top}" /></a>
   </p>
   {+START,IF_NON_EMPTY,{VIEW_URL}}
      <p class="right">
         <a href="{VIEW_URL*}" title="{!VIEW}: {$STRIP_TAGS*,{FIELD_0}}"><img title="{!VIEW}{+START,IF_PASSED,COMMENT_COUNT} ({$STRIP_TAGS,{$COMMENT_COUNT,catalogues,{ID}}}){+END}" alt="{!COMMENTS} / {!VIEW}" class="button_pageitem" src="{$IMG*,pageitem/goto}" /></a>
      </p>
   {+END}
</div>

<br />
to something like:

Code

{$,Read the catalogue tutorial for information on custom catalogue layouts}

{$INIT,entry_num,1}
<div class="wide_table_wrap" style="float:left;width:300px;"><table summary="{!MAP_TABLE}" class="wide_table solidborder spaced_table">
   {+START,IF,{$NOT,{$MOBILE}}}
      <colgroup>
         <col width="150" />
         <col width="100%" />
      </colgroup>
   {+END}

   <tbody>
      {FIELDS}
   </tbody>
</table></div>

{+START,IF,{$EQ,{$REM,{$GET,entry_num},2},0}}

   <div class="float_surrounder">
      <p class="left">
         <a target="_self" href="#"><img class="inline_image" title="{!BACK_TO_TOP}" alt="{!BACK_TO_TOP}" src="{$IMG*,top}" /></a>
      </p>
      {+START,IF_NON_EMPTY,{VIEW_URL}}
         <p class="right">
            <a href="{VIEW_URL*}" title="{!VIEW}: {$STRIP_TAGS*,{FIELD_0}}"><img title="{!VIEW}{+START,IF_PASSED,COMMENT_COUNT} ({$STRIP_TAGS,{$COMMENT_COUNT,catalogues,{ID}}}){+END}" alt="{!COMMENTS} / {!VIEW}" class="button_pageitem" src="{$IMG*,pageitem/goto}" /></a>
         </p>
      {+END}
   </div>

   <br />
{+END}

{$INC,entry_num}
Note that I have also added style="float:left;width:300px;" just so that you can clearly see that you are getting two entries per row.

I haven't tested this, and its just a rough example for illustration purposes only. As it is now for instance, the goto link will only appear for every second entry.

Should be the guts of what you need.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#89257
Avatar

Fan in action



Wow, thanks for your help! I'm so please I was able to get this to work.
Your advice worked perfectly. I attach a screenshot of what happened.
Nick




Back to the top
 
Posted
Rating:
#89261
Avatar

Community saint

No Problem. Happy that it worked for you.

I'd be very interested in seeing what your final layout looks like.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#89283
Avatar

Fan in action

​​Sure, I'll post a link as soon as I can open the site.

In the meantime, I managed to get all the Goto buttons showing up (correctly).

I put a div inside a div - before your magic line:

{+START,IF,{$EQ,{$REM,{$GET,entry_num},2},0}} 

I got no idea if that's the correct way, but it seems to work.

I've noticed that there must also be a div of some sort after the magic line - or the control functions don't display right. Also, if there are 3 or 5 entries, then the control funtions jump from the bottom of the page into the 4 or 6 entry position.





goto buttons

{$INIT,entry_num,1}
<div class="wide_table_wrap" style="float:left;width:375px;"><table summary="{!MAP_TABLE}" class="wide_table solidborder spaced_table">
   {+START,IF,{$NOT,{$MOBILE}}}
      <colgroup>
         <col width="150" />
         <col width="100%" />
      </colgroup>
   {+END}

   <tbody>
      {FIELDS}
   </tbody>
</table>

<div class="float_surrounder" style="float:left;width:375px;">
      <p class="left">
         <a target="_self" href="#"><img _cke_saved_href="#"><img class="inline_image" title="{!BACK_TO_TOP}" alt="{!BACK_TO_TOP}" src="{$IMG*,top}" /></a>
      </p>
      {+START,IF_NON_EMPTY,{VIEW_URL}}
         <p class="right">
            <a href="{VIEW_URL*}" title="{!VIEW}: {$STRIP_TAGS*,{FIELD_0}}"><img title="{!VIEW}{+START,IF_PASSED,COMMENT_COUNT} ({$STRIP_TAGS,{$COMMENT_COUNT,catalogues,{ID}}}){+END}" alt="{!COMMENTS} / {!VIEW}" class="button_pageitem" src="{$IMG*,pageitem/goto}" /></a>
         </p>
      {+END}
   </div>
</div>

 {+START,IF,{$EQ,{$REM,{$GET,entry_num},2},0}}

<div class="float_surrounder"></div>
 <br />
{+END}

{$INC,entry_num} 

 
Back to the top
 
Posted
Rating:
#89290
Avatar

Community saint

Nick said

I put a div inside a div - before your magic line:

{+START,IF,{$EQ,{$REM,{$GET,entry_num},2},0}} 

I got no idea if that's the correct way, but it seems to work.
Div within div is fine except in this case it contains the up button which we don't want and the class and style are unnecessary.

Nick said

I've noticed that there must also be a div of some sort after the magic line - or the control functions don't display right. Also, if there are 3 or 5 entries, then the control funtions jump from the bottom of the page into the 4 or 6 entry position.
That wrapping of the control functions is actually because of the lack of a div to force the control div to start on a "new line".

That forcing of "new line" happens here:

Code

{+START,IF,{$EQ,{$REM,{$GET,entry_num},2},0}}

<div class="float_surrounder"></div>
 <br />
{+END}
And because that "new line" code does not execute if there are an odd number of entries the control line appears in the wrong place.

Unfortunately there is no way to know when this template is processing its last entry. But if we know that we will always be displaying say 5 entries then we can add a special case to add the "new line" if its the 5th entry also.

So the "magic line" now becomes:

Code

{+START,IF,{$OR,{$EQ,{$REM,{$GET,entry_num},2},0},{$EQ,{$GET,entry_num},5}}}

Put it all together and you get this:

Code

{$,Read the catalogue tutorial for information on custom catalogue layouts}

{$INIT,entry_num,1}
<div class="wide_table_wrap" style="float:left;width:375px;margin-right:20px;"><table summary="{!MAP_TABLE}" class="wide_table solidborder spaced_table">
   {+START,IF,{$NOT,{$MOBILE}}}
      <colgroup>
         <col width="150" />
         <col width="100%" />
      </colgroup>
   {+END}

   <tbody>
      {FIELDS}
   </tbody>
</table>

      {+START,IF_NON_EMPTY,{VIEW_URL}}
         <p class="right">
            <a href="{VIEW_URL*}" title="{!VIEW}: {$STRIP_TAGS*,{FIELD_0}}"><img title="{!VIEW}{+START,IF_PASSED,COMMENT_COUNT} ({$STRIP_TAGS,{$COMMENT_COUNT,catalogues,{ID}}}){+END}" alt="{!COMMENTS} / {!VIEW}" class="button_pageitem" src="{$IMG*,pageitem/goto}" /></a>
         </p>
      {+END}
   </div>

{+START,IF,{$OR,{$EQ,{$REM,{$GET,entry_num},2},0},{$EQ,{$GET,entry_num},5}}}

   <div class="float_surrounder">
      <p class="left">
         <a target="_self" href="#"><img class="inline_image" title="{!BACK_TO_TOP}" alt="{!BACK_TO_TOP}" src="{$IMG*,top}" /></a>
      </p>
   </div>

   <br />
{+END}

{$INC,entry_num}
Note that I have also added margin-right:20px; in case you want a space between the two columns, and there is now just one top button between the rows.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#89346
Avatar

Fan in action

Thanks! Your assistance is much appreciated.

I have now been able to tackle the layout today - still need to read up a bit more - but I've made good progress.

One thing I've come accross - this auto-thumb function - seems to change my images to 200 x 200 - when they're supposed to be 140 x 140. No wonder my borders didn't add up. The images are displayed from auto-thumb directory at 200 - instead of catalogues directory at 140 ?

On a different note : I'm quite proud South Africa has 3 GOLD medals, 1 Silver and 1 Bronze, so far !

Nick
Back to the top
 
Posted
Rating:
#89348
Avatar

Community saint

You can find this in the configuration settings in admin zone.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#89377
Avatar

Fan in action


After everything above, I thought I would just post a final screenshot of how it has all turned out.

I'm quiet please with this so far - so I'm starting on the menu's next.

South Africa medal total just went up : 3 gold, 2 silver, 1 bronze

Back to the top
 
Posted
Rating:
#89379
Avatar

Community saint

Nick said

I'm quiet please with this so far
As you should be, it looks good :thumbs:.


Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: