0

Ok so I have this dreamweaver extension called tab panel menu where each menu I can generate either a single column, 2 column, 3 column, 4 column, 5 column or sub menu. Now I wish to make use of this inside EE2 without having to do it on dreamweaver. I figured to make use of if:else statement for the html output. My problem if I want to generate column within channel entries? So if Field 1 = Layout Selection, Field 2-7 = Show field for Selected layout(Of course in horizontal order with labels' like For right sidebar, for left sidebar, for middle content).

So that if I were to write a new channel entry, I can just select layout and then fields for that layout will show up.

Example:
-On Channel Entry-
Field 1 - Layout Selection
(col-default
col-75-25
col-60-40
col-50-50
col-40-60
col-33-33-33
col-25-75
col-25-50-25
col-25-25-25-25
col-20-20-20-20-20)
Field 2 - Content A
Field 3 - Content B
Field 4 - Content C
Field 5 - Content D
Field 6 - Content E
Field 7 - Content F

 

-On template-
Some channel code here
{if layout_selection == "col-20-20-20-20-20"}
<div class="p7mgm-row mgm-col-20-20-20-20-20 col-sep">
<div class="p7mgm-Col p7mgm-percent20">
<div class="p7mgm-ColContent p7ehc-51">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent20">
<div class="p7mgm-ColContent p7ehc-51 border-left">
{content_b}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent20">
<div class="p7mgm-ColContent p7ehc-51 border-left">
{content_c}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent20">
<div class="p7mgm-ColContent p7ehc-51 border-left">
{content_d}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent20">
<div class="p7mgm-ColContent p7ehc-51 border-left">
{content_e}
</div>
</div>
</div>

{if:elseif layout_selection == "col-25-25-25-25"}
<div class="p7mgm-row mgm-col-25-25-25-25 col-sep">
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-50">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-50 border-left">
{content_b}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-50 border-left">
{content_c}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-50 border-left">
{content_d}
</div>
</div>
</div>

{if:elseif layout_selection == "col-25-50-25"}
<div class="p7mgm-row mgm-col-25-50-25 col-sep">
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-49">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent50">
<div class="p7mgm-ColContent p7ehc-49 border-left">
{content_b}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-49 border-left">
{content_c}
</div>
</div>
</div>

{if:elseif layout_selection == "col-25-75"}
<div class="p7mgm-row mgm-col-25-75 col-sep">
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-44">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent75">
<div class="p7mgm-ColContent p7ehc-44 border-left">
{content_b}
</div>
</div>
</div>

{if:elseif layout_selection == "col-33-33-33"}
<div class="p7mgm-row mgm-col-33-33-33 col-sep">
<div class="p7mgm-Col p7mgm-percent33">
<div class="p7mgm-ColContent p7ehc-48">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent33">
<div class="p7mgm-ColContent p7ehc-48 border-left">
{content_b}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent33">
<div class="p7mgm-ColContent p7ehc-48 border-left">
{content_c}
</div>
</div>
</div>

{if:elseif layout_selection == "col-40-60"}
<div class="p7mgm-row mgm-col-40-60 col-sep">
<div class="p7mgm-Col p7mgm-percent40">
<div class="p7mgm-ColContent p7ehc-46">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent60">
<div class="p7mgm-ColContent p7ehc-46 border-left">
{content_b}
</div>
</div>
</div>

{if:elseif layout_selection == "col-50-50"}
<div class="p7mgm-row mgm-col-50-50 col-sep">
<div class="p7mgm-Col p7mgm-percent50">
<div class="p7mgm-ColContent p7ehc-43">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent50">
<div class="p7mgm-ColContent p7ehc-43 border-left">
{content_b}
</div>
</div>
</div>

{if:elseif layout_selection == "col-60-40"}
<div class="p7mgm-row mgm-col-60-40 col-sep">
<div class="p7mgm-Col p7mgm-percent60">
<div class="p7mgm-ColContent p7ehc-47">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent40">
<div class="p7mgm-ColContent p7ehc-47 border-left">
{content_b}
</div>
</div>
</div>

{if:elseif layout_selection == "col-75-25"}
<div class="p7mgm-row mgm-col-75-25 col-sep">
<div class="p7mgm-Col p7mgm-percent75">
<div class="p7mgm-ColContent p7ehc-45">
{content_a}
</div>
</div>
<div class="p7mgm-Col p7mgm-percent25">
<div class="p7mgm-ColContent p7ehc-45 border-left">
{content_b}
</div>
</div>
</div>

{if:elseif layout_selection == "col-default"}
<div class="p7mgm-row mgm-col-default">
<div class="p7mgm-ColContent">
{content_a}
</div>
</div>

{if:else}
What the?! where is my Content!!!
{/if}

Some channel code here

6
  • I'm sorry, but I couldn't understand what you want to do. You can write the HTML whatever way you want to. You can have a Field to the user choose the layout and change all the HTML or just change a class to use different CSS. – Sobral Nov 19 '14 at 12:24
  • I just updated my Q – yzs Nov 19 '14 at 12:27
  • Wow! This is really complex for the user! But, OK... Why can't you use a field named layout_selection? – Sobral Nov 19 '14 at 13:22
  • This is actually for my own site. Just starting out. – yzs Nov 19 '14 at 13:26
  • I did do that, I know this can be done using a multi-select or radio button but it gets confusing so that why i'm looking for an entry addon that SHOWS i'm on the current selected layout and hides other fields with template tags so I can use this procedure for other content generating html/css3 codes other than tab panel menu. Each Field/{Content} = Grid and within Grid I can create a video/image gallery, footer links, or an audio player widget when possible. :) – yzs Nov 19 '14 at 13:37
2

If I understood what you want, maybe one of these add-ons can help you:

  • Entry Type - A dropdown fieldtype that shows/hides other fields on the publish page;
  • Better Pages - Better Pages is an ExpressionEngine fieldtype designed to make using the Pages module significantly more end-user friendly;
  • Entry Layout - Lets you link custom fields to any entry of your website. It will let you save a different publish layout for two different entries even if they come from the same channel. Useful for static pages such as contact, about pages, etc... Plus, its support member groups;
  • Plates - This fieldtype for ExpressionEngine 2 is a drop in replacement for the native Pages Module or Structure Module ‘Template’ field;
0
0

You might find Template Snippet Select useful if you want to allow a way of choosing a layout template in the publishing form. Works well with snippets or full templates :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.