Close, but not yet. Need a solution to this coding issue using if then statements

#1 / Jan 18, 2010 8:09pm
mrpiano
85 posts
Howdy,

I’m using some Jquery scripts and am trying to do some slickness with my portfolio pieces on a redesign of my site.

The page in question is here.

Now, you can see what I’m attempting to do below…here are the basic rules I’m trying to code against:

1. I want 8 entries to show up on my main portfolio page, across any category (newest 8 entries). This I have achieved.

2. I need every 4th entry to get an additional class appended in the style sheet. This is a layout rule. I have achieved this, but I’m not sure if my implementation is going to work as the number of entries goes above 8. I used this to address this layout rule:
```
<div class="galleryImage {if {count} == "4" OR {count} == "8"}alt{/if}">
```
. Any suggestions about how to dynamically do this without hard coding every 4th post would be great.

3. At the end of my 8 entries, I would have this code occur to end a page of portfolio and start the sliding jquery script to show the next page:
```
<div class="clear"></div>
                    
                </div>
<div class="slide">
```
I have pretty much achieved this, but again, not sure how elegant my solution is.

Now, here’s where things get screwy: After my 8th post, I want to start a whole new div (see code below) I want to show 8 MORE portfolio pieces, and then start another div. Each time I start a new div, that’ll give me a new page using the slider and I can limit the portfolio to 8 pieces per page, and allow the next page to self populate with whatever posts didn’t show up on the first page, second page, and so on.

My conditional
```
{if {count} > 7}
```
is creating a kind of endless loop and repeats my conditional code over and over, creating new pages with each loop. Not what I want. This is because I have more than 7 posts overall. I think I’m essentially using the wrong conditional to check against and it’s writing my div over and over before filling it with 8 entries.

My code is below, and if you visit the link above, the first page you hit demonstrates what I want, and then on the next page, I want the same type of thing, only with other portfolio pieces, all of which are arranged by date.

Hope this is clear. It’s probably simpler than I’m making it. Thanks in advance.
```
<div class="slide">
           {exp:weblog:entries weblog="webportfolio" orderby="date" sort="desc" limit="8"}
  <div class="galleryImage {if {count} == "4" OR {count} == "8"}alt{/if}">

{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>

    






{!-- experiment --}
{if {count} > 7} 
{!-- issue is with the if statement above.  since you have more than 8 posts, it keeps iterating the loop below, and every time it repeats this block of code and creates more "slides" instead of grouping everything together --}


<div class="clear"></div>
                    
                </div>
<div class="slide">
       
  <div class="galleryImage {if {count} == "12" OR {count} == "16"}alt{/if}">
{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>

 {/if}

{!-- end experiments --}



    {/exp:weblog:entries}


{!-- close weblog entries code goes here if things need to be reverted --}
    
   

{!-- this clears the first loop below so you need it --}



<div class="clear"></div>
                    
                </div>
```

#2 / Jan 18, 2010 8:34pm

Adam Dorsey

1439 posts

You are going to have to do this using PHP, as resetting the value of the counter is the easiest way to go, and you can easily mix PHP code and EE code.

1) Set “Allow PHP?” to YES by going to your template preferences, here: Templates › Template Preferences
2) PHP Parsing stage of OUTPUT should be fine
3) Add PHP code to template…

I would do something like this:

<?php $row_count = 0; ?> <!-- set default counter value -->

{exp:weblog:entries weblog="portfolio" orderby="entry_date" sort="desc"}

    <div id="page">

    <?php $row_count++; ?> <!-- increment the counter -->

    <div class="project<?php if($row_count == 1){ ?> left<?php } ?><?php if($row_count == 4){ ?> last<?php } ?>"> <!-- can use different css styles depending on count -->
        <!-- portfolio item here… -->
    </div>

    <?php if($row_count > 4){ $row_count = 0; ?> <!-- will throw a clear after 4 outputs -->

    <div class="clear"></div>

    <?php } ?>

    <?php if($row_count > 8){ $row_count = 0; ?> <!-- will throw a clear after 8 outputs -->

    </div><!-- end page -->

    <div id="page"><!-- new page -->

    <?php } ?>

{/exp:weblog:entries}

</div>

I removed most template code, but you should be able to glean the PHP code, and build it to order 😊

Does this help?

#3 / Jan 19, 2010 10:55am

mrpiano
85 posts

Hey Adam,

I’m going to tinker around with the code you provided and see if I can get it to work…I’m sure I may have questions, however, so I’ll be back after a few experiments!

Thanks, and stay tuned (kindly leave thread open, as I’m guessing we’re not done here 😊

#4 / Jan 19, 2010 5:18pm

mrpiano

85 posts

Problem is somewhat the same…here’s my code:

<div class="slide">

<?php $row_count = 0; ?> <!-- set default counter value -->


           {exp:weblog:entries weblog="webportfolio" orderby="date" sort="desc"}

    <?php $row_count++; ?> <!-- increment the counter -->


<div class="galleryImage<?php if($row_count == 4){ ?> alt<?php } ?><?php if($row_count == 8){ ?> alt<?php } ?>"> <!-- can use different css styles depending on count -->



{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>


 <?php if($row_count > 7){ $row_count = 0; ?> <!-- will throw a clear after 8 outputs -->



    <div class="clear"></div>
                    
                </div><!-- end slide -->

    <div class="slide">

{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>

<?php } ?>


<!-- this is a loop -->




{!-- end experiments --}


 
    {/exp:weblog:entries}

If you look at the source code, I get the closing out of the div and I start a new one after 8 entries see below.

<div class="clear"></div>
                    
                </div><!-- end slide -->

    <div class="slide">

But then, it start closing out the div every 2 entries, and you’ll see if you hit the “next” button on my page, you get 2 portfolio pieces at a time, instead of the next 8. So I want 8 on the first page, and then 8 on the next, and then whatever is left on the next…it’s looping too early once it gets through the first iteration.

Page is here

#5 / Jan 19, 2010 6:43pm
mrpiano
85 posts
And if it helps, basically I need
```
<div class="clear"></div>
                    
                </div>
```
to appear after every 8 entries, OR, in the case of a page that has less than 8 entries, to close out however many entries ARE there (in the event a page doesn’t have to house a full 8 entries, which is the case right now).
```
<div id="slide">
{entry1}
{entry2}
{entry3}
{entry4}
{entry5}
{entry6}
{entry7}
{entry8}
<div class="clear"></div>
                    
               </div> 

<div id="slide">
{entry1}
{entry2}
{entry3}
{entry4}(until more entries appear)
<div class="clear"></div>
                    
                </div>
```
Right now I can’t seem to create the conditional that puts the div class “clear” in the event that there are LESS than 8 entries, so only the first page works correctly.

Hope that helps.

#6 / Jan 19, 2010 8:10pm

Adam Dorsey

1439 posts

Can you change this line:

<?php $row_count++; ?> <!-- increment the counter -->

<?php $row_count++; echo $row_count; ?> <!-- increment the counter -->

Then send me a link. Thanks!

#7 / Jan 19, 2010 8:18pm

mrpiano
85 posts

http://www.pixeldustfilms.com/index.php/spotlight/portfoliotests

changed the code as you asked…make sure to look at source and also hit the “next” button a couple times…

GG

#8 / Jan 19, 2010 8:32pm

Adam Dorsey

1439 posts

Not sure why you have this twice…

{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>

Should be something like:

<div class="slide">

<?php $row_count = 0; ?> <!-- set default counter value -->

{exp:weblog:entries weblog="webportfolio" orderby="date" sort="desc"}

<?php $row_count++; ?> <!-- increment the counter -->

<div class="galleryImage<?php if($row_count == 4){ ?> alt<?php } ?><?php if($row_count == 8){ ?> alt<?php } ?>"> <!-- can use different css styles depending on count -->

{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>

<?php if($row_count > 7){ $row_count = 0; ?> <!-- will throw a clear after 8 outputs -->
                    
</div><!-- end slide -->

    <div class="slide">

<?php } ?>

{/exp:weblog:entries}

And out of curiosity… How many total entries are in the weblog?

Thanks!

#9 / Jan 19, 2010 8:37pm

mrpiano
85 posts

There are 11 posts in that weblog.

I agree, don’t want that code twice. Just want it to loop and create new slider pages as the number of posts hits 8.

I’m gonna try your new code and see what happens.

GG

#10 / Jan 19, 2010 8:44pm

mrpiano

85 posts

Almost there!

Here’s what’s out there:

<div class="slide">

<?php $row_count = 0; ?> <!-- set default counter value -->


           {exp:weblog:entries weblog="webportfolio" orderby="date" sort="desc"}

<?php $row_count++; ?> <!-- increment the counter -->


<div class="galleryImage<?php if($row_count == 4){ ?> alt<?php } ?><?php if($row_count == 8){ ?> alt<?php } ?>"> <!-- can use different css styles depending on count -->



{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>


 <?php if($row_count > 7){ $row_count = 0; ?> <!-- will throw a clear after 8 outputs -->



    <div class="clear"></div>
                    
                </div><!-- end slide -->

<div class="slide">

<?php } ?>

Now, at the VERY end of the, as you can see I have an open div class =“slide”. The problem now is when the loop ends, I’m missing a div and it blows up the bottom of my layout. I need to close that div AFTER the loop is complete and it’ll fix the layout. Hit the link, then hit the “next” button and you’ll see it’s working as it should, except for the missing div.

Almost there, man. If you can get me over the goal line, beers on me! 😊

#11 / Jan 19, 2010 9:12pm

Adam Dorsey

1439 posts

Ahh, you can resolve that with EE code:

<div class="slide">

<?php $row_count = 0; ?> <!-- set default counter value -->

{exp:weblog:entries weblog="webportfolio" orderby="date" sort="desc"}

<?php $row_count++; ?> <!-- increment the counter -->

<div class="galleryImage<?php if($row_count == 4){ ?> alt<?php } ?><?php if($row_count == 8){ ?> alt<?php } ?>"> <!-- can use different css styles depending on count -->

{exp:imgsizer:size src="{webthumb}" width="195" height="195" alt="{title} by Gino Guarnere" title="{title}" /}
<a href="http://{fullimage}" rel="fancybox" class="zoomButton fancyboxImage"></a>
<a href="http://{path=spotlight/description/{entry_id}}" class="descriptionButton fancyboxDescription"></a>
</div>

<?php if($row_count > 7){ $row_count = 0; ?> <!-- will throw a clear after 8 outputs -->
                    
</div><!-- end slide -->

    <div class="slide">

<?php } ?>

{if total_results == count}

</div><!-- end slide -->

{/if}

{/exp:weblog:entries}

So that if the total results, equal the amount from the counter (in your case 11), it will close the div. Make sense?

#12 / Jan 19, 2010 9:26pm

mrpiano
85 posts

Whoever your boss is, kindly tell him you deserve a raise 😊

This, folks, is why I use Expression Engine. Problem solved, and the code is nice and clean. I learned a lot from following this thread.

Thanks, Adam. Watch out for me in other threads. I’m sure my next PHP problem is right around the corner 😊

Final answer is here

Cheers, and thank you once again.

Gino
#13 / Jan 19, 2010 9:28pm

Adam Dorsey
1439 posts

No problem!

Glad you got things working. Please feel free to post again, should you need anymore assistance 😊

Thread

mrpiano

Adam Dorsey

mrpiano

mrpiano

mrpiano

Adam Dorsey

mrpiano

Adam Dorsey

mrpiano

mrpiano

Adam Dorsey

mrpiano

Adam Dorsey

Username

Password

Thread