ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Beginners Help with complex layout

October 24, 2011 3:15pm

Subscribe [4]
  • #1 / Oct 24, 2011 3:15pm

    laneo10

    10 posts

    Hi,

    I have downloaded and installed expression engine today and am just getting to grips with some of the fundamentals on how to use the system.

    I am currently trying to plug the cms into my portfolio which has quite a unique layout which throws up some inherent challenges on how to pull out entries.

    The basic layout for the projects can be seen here:
    http://testing.studiounkle.com/

    Now the difficulty that I have is the projects have a different layout per alternate row, and also within those rows each thumbnail has a different style or size.

    Some have the slide up caption style, others have the caption displayed under the thumbnail.

    I can’t quite get my head round how to do this because of the alternating rows and thumbnail styles.

    I have a suspicion that it could be done using a combination of status’s and conditionals.

    Can anyone explain to me the most economic way of achieveing this.
    Please bear in mind that I am a beginner with expression engine and have limited programming knowledge beyond plain html and css.

    Thanks in advance
    Dan

    Moved to Community Help forum by Moderator

  • #2 / Oct 25, 2011 4:40am

    laneo10

    10 posts

    Can anyone help with this at all please, Im really stuck.

    Cheers
    Dan

  • #3 / Oct 25, 2011 9:41am

    Sue Crocker

    26054 posts

    Hi, Dan. This appears to be the same question you posted earlier..

    http://ellislab.com/forums/viewthread/202720/

    Moving this to the Community Help forum for additional community support.

  • #4 / Oct 25, 2011 10:02am

    laneo10

    10 posts

    Thanks Sue,

    Id really appreciate it if someone could help out.

    I am attaching an image to show the basic pattern of the projects.

    I assumed that i would be able to use the switch to apply a different class in the sequence they come out of the system.

    So:

    Project 1 {float: left}
    Project 2 {clear: left}
    Project 3 {float: left}
    Project 4 {float: left}

    Of course this doesn’t work now becuase project 3 is dropping down.

    This is driving me nuts!!! haha

  • #5 / Oct 25, 2011 10:06am

    laneo10

    10 posts

    {exp:channel:entries channel="folio_projects"} 
    
                
        <div class="{switch='project-1|project-2|project-3|project-4'}">
        images/img_2a.jpg
        <div class="cover boxcaption">
        <h3>{title}</h3>
    <p>    {project_caption}<br />
        </div>  <br />
         </div><br />
      </p>
    
    <p>    </p>
    
    <p>  <br />
        {/exp:channel:entries}

    This is the code im using to pull the projects out of the system.

    Since this goes in a loop im also not sure how to tackle the alternate row

  • #6 / Oct 25, 2011 11:43am

    Kevin Cupp

    791 posts

    Hi Dan,

    If you need something to appear, say every 4 iterations of the loop, you can still use a {switch} statement like this:

    {switch='odd||||even||||'}

    See if that achieves your layout problem, and let me know if I’m not understanding the particular problem.

    Kevin

  • #7 / Oct 25, 2011 1:39pm

    laneo10

    10 posts

    Cheers Kevin, think I’m getting the hang of the switch now.

    I have just tried to create a conditional but i don’t think im doing it right.

    Below is the code

    <div class="{switch='one|two|three|four'} {thumbnail_type} {project_row}">
        images/img_2a.jpg
        
        {if "{caption_type}" == "sliding-small captionfull" OR "{caption_type}" == "sliding-large captionfull"}
            {!-- show single entry --}
            <div class="cover boxcaption">
        <h3>{title}</h3>
    <p>    {project_caption}<br />
        {project_link}<br />
        </div><br />
        <br />
          {if:else}<br />
          </p><h3>{title}</h3>
    <p>    {project_caption}<br />
        {project_link}<br />
            {/if} <br />
         </div><br />
      <br />
        {/exp:channel:entries}

  • #8 / Oct 25, 2011 1:45pm

    Kevin Cupp

    791 posts

    It’s looking good to me. What is happening instead of what you expect to happen? If you output {caption_type}, does it indeed equal one of the types you’re checking for?

    It may also help to paste the HTML that the template is outputting, and put the {caption_type} variable in an HTML comment, that may help illustrate what is actually happening versus what the template looks like it should do.

  • #9 / Jan 29, 2012 12:58am

    kimnana

    2 posts

    great post. thanks.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases