1

--Update--
Got the loop to work and content pulls in (forgot to put my {exp:channel:entries} tag pair around the safecracker tags). Styling was pretty simple, but I had to change the wygwam field to a text field. Any thoughts on how to accomplish this with a wygwam field?

Also when I update the page, the content is saving as new rows instead of editing the current ones. I think it has something to do with the hidden field (which I thought I needed to include) but when I take that field out, I get an error from Expression Engine telling me that the timeline field is required. Am I missing something?

Link to image of timeline with editable fields: http://madhousedev.com/bgsumicro/images/timeline_edit.png

Here's my current code:

<div id="timeline">

    <div class="timeline-year">
        <h3><input type="text" name="section_3_year" id="section_3_year" value="{section_3_year}" class="heading"></h3>
    </div>

    <input type="hidden" name="section_3_timeline[row_order][]" value="row_new_0" />

    {section_3_timeline}    
        <div class="{switch='pull-left|pull-right'} time-item" {if row_id == 23}style="margin-top:0px;"{/if}>
            <h3><input type="text" name="section_3_timeline[row_new_0][col_id_23]" id="section_3_timeline[row_new_0][col_id_23]" value="{date}" class="subheading"></h3>
            <div class="line"></div>
            <textarea name="section_3_timeline[row_new_0][col_id_24]" id="section_3_timeline[row_new_0][col_id_24]" style="width:75%;" class="animated {switch=' |padded'}">{description}</textarea>
        </div>
    {/section_3_timeline}

    <div class="clearfix"></div>

    <div class="timeline-middle">

        <div class="little-square">square</div>

        {section_3_timeline_end}
            <input type="hidden" name="section_3_timeline_end[row_order][]" value="row_new_0" />
            <h3><input type="text" name="section_3_timeline_end[row_new_0][col_id_25]" id="section_3_timeline_end[row_new_0][col_id_25]" value="{date}" class="subheading centered"></h3>
            <textarea name="section_3_timeline_end[row_new_0][col_id_24]" id="section_3_timeline_end[row_new_0][col_id_26]" style="width:75%;" class="animated centered">{description}</textarea>
        {/section_3_timeline_end}

</div>

--Original Question--
I have created a timeline styled matrix with expression engine that consists of a text input (date) and a wygwam field (description). I'm hoping to create a safecracker form that allows users to update the content while maintaining as much of the original formatting as possible.

I've read documentation about how to separate the matrix fields, but can't find anything on how to make it work with wygwam. I'm also having issues pulling in the original content and getting my loop to work.

Any suggestions of what to try next would be greatly appreciated!

Here is a link to what the final output should look like: http://madhousedev.com/bgsumicro/images/timeline.png

Here is the original markup:

<div id="timeline">
    <div class="timeline-year"><h3>{section_3_year}</h3></div>

    <!--- This is the loop that makes each entry -->
    {section_3_timeline}    
        <div class="{switch='pull-left|pull-right'} time-item" {if row_id == 23}style="margin-top:0px;"{/if}>
            <h3>{date}</h3>
            <div class="line"></div>
            {description}
        </div>
    {/section_3_timeline}

    <div class="clearfix"></div>

    <div class="timeline-middle">
        <div class="little-square">square</div>

        <!--- This is ending entry - separate matrix field -->
        {section_3_timeline_end}
            <h3>{date}</h3>
            {description}
        {/section_3_timeline_end}
    </div>

    <div class="clearfix"></div>

</div>

Your Answer

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

Browse other questions tagged or ask your own question.