Changing the order of rows with flexible content

• superchiffre

• July 26, 2015 at 2:36 am

Hello Everybody!

I created one field of the type flexible content. It contains two layouts. The first layout will creat row with two columns, the second layout a row with three columns.

Here is the structure:

Flexible Content

—- Layout Two columns
——— Select (some options)
——— Flexible Content (left column)
————– 1. Layout WYSIWYG
————– 2. Layout WYSIWYG + 3xText
——— Flexible Content (right column)
————– 1. Layout WYSIWYG
————– 2. Layout WYSIWYG + 3xText

—- Layout trhee columns
——— Flexible Content (left column)
————– 1. Layout WYSIWYG
————– 2. Layout WYSIWYG + 3xText
——— Flexible Content (middle column)
————– 1. Layout WYSIWYG
————– 2. Layout WYSIWYG + 3xText
——— Flexible Content (left column)
————– 1. Layout WYSIWYG
————– 2. Layout WYSIWYG + 3xText

I also plan to build a third layout for content with 1 column…

Problem:
Everything works fine so far! In the backend I can add content and it gets correctly displayed frontend.
The only thing is that I can’t change the order of the rows. When I choose for example the following order of rows backend:

—two column layout—
—three column layout—
—two column layout—

It will always be displayed like this:

—two column layout—
—two column layout—
—three column layout—

In the backend I can change the order how I like to. When I save the site the order remains as it is supposed to. But just fronted two columns and three columns always get “collected”.

I’ll be very happy for your help!

Here is my code:

<?php
/******************* ZWEI SPALTEN*********************
 * ***************************************************/
    if( have_rows('zwei_spalten')):
        while ( have_rows('zwei_spalten') ) : the_row();

            if( get_row_layout() == 'zwei_spalten_inhalte' ):

                //LEFT ROW
                echo '<div class="flex-container">';

                    $width = get_sub_field('column_width');
                    $col_size_left = 'col-lg-6 col-md-6 col-sm-6 col-xs-12';
                    $col_size_right = 'col-lg-6 col-md-6 col-sm-6 col-xs-12';

                    if($width == '6-6'):
                        $col_size_left = 'col-lg-6 col-md-6 col-sm-6 col-xs-12';
                        $col_size_right = 'col-lg-6 col-md-6 col-sm-6 col-xs-12';
                    elseif($width == '5-7'):
                        $col_size_left = 'col-lg-5 col-md-5 col-sm-5 col-xs-12';
                        $col_size_right = 'col-lg-7 col-md-7 col-sm-7 col-xs-12';
                    elseif($width == '7-5'):
                        $col_size_left = 'col-lg-7 col-md-7 col-sm-7 col-xs-12';
                        $col_size_right = 'col-lg-5 col-md-5 col-sm-5 col-xs-12';
                    elseif($width == '4-8'):
                        $col_size_left = 'col-lg-4 col-md-4 col-sm-4 col-xs-12';
                        $col_size_right = 'col-lg-8 col-md-8 col-sm-8 col-xs-12';
                    elseif($width == '8-4'):
                        $col_size_left = 'col-lg-8 col-md-8 col-sm-8 col-xs-12';
                        $col_size_right = 'col-lg-4 col-md-4 col-sm-4 col-xs-12';
                    endif;

                echo '<div class="'.$col_size_left.'">';
                    while ( have_rows('left_row') ) : the_row();
                        //BILD
                        if( get_row_layout() == 'bild_mit_link' ):
                            echo '<div class="row-image flex-item">';
                                $image_text = get_sub_field('bild');
                                echo $image_text;
                            echo '</div>';
                        //TEXTFELD
                    elseif( get_row_layout() == 'textfeld' ):
                        echo '<div class="textfeld-wrapper">';
                            $svg_width = get_sub_field('svg_width');
                            $svg_height = get_sub_field('svg_height');
                            $svg_color = get_sub_field('svg_color');

                            echo '<svg width="'.$svg_width.'" height="'.$svg_height.'" class="svg-image img-responsive">
                                <rect class="img-responsive" width="'.$svg_width.'" height="'.$svg_height.'" style="fill:'.$svg_color.';">
                            </svg>';
                            echo '<div class="row-text flex-item row-bg-text">';
                                echo '<div class="balken-links">';
                                    $text = get_sub_field('textfeld_inhalt');
                                    echo $text;
                                echo '</div>';
                            echo '</div>';
                        echo '</div>';
                    endif;
                    endwhile;
                echo '</div>';
                //.LEFT ROW

                //RIGHT ROW
                echo '<div class="flex-container">';

                echo '<div class="'.$col_size_right.'">';
                    while ( have_rows('right_row') ) : the_row();
                        //BILD
                        if( get_row_layout() == 'bild_mit_link' ):
                            echo '<div class="row-image flex-item">';
                            $image_text = get_sub_field('bild');
                            echo $image_text;
                            echo '</div>';
                            //TEXTFELD
                        elseif( get_row_layout() == 'textfeld' ):
                            echo '<div class="textfeld-wrapper">';
                                $svg_width = get_sub_field('svg_width');
                                $svg_height = get_sub_field('svg_height');
                                $svg_color = get_sub_field('svg_color');

                                echo '<svg width="'.$svg_width.'" height="'.$svg_height.'" class="svg-image img-responsive">
                                            <rect class="img-responsive" width="'.$svg_width.'" height="'.$svg_height.'" style="fill:'.$svg_color.';">
                                        </svg>';
                                echo '<div class="row-text flex-item row-bg-text">';
                                    echo '<div class="balken-links">';
                                    $text = get_sub_field('textfeld_inhalt');
                                    echo $text;
                                    echo '</div>';
                                echo '</div>';
                            echo '</div>';
                        endif;
                    endwhile;
                echo '</div>';
                //.RIGHT ROW

            endif;
        endwhile;
    endif;
/******************* .ZWEI SPALTEN*********************
 * ***************************************************/

/******************* DREI SPALTEN*********************
 * ***************************************************/
    if( have_rows('zwei_spalten')):
        while ( have_rows('zwei_spalten') ) : the_row();

            if( get_row_layout() == 'drei_spalten_inhalte' ):

                //LEFT ROW
                echo '<div class="flex-container">';

                echo '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">';
                    while ( have_rows('left_row') ) : the_row();
                        //BILD
                        if( get_row_layout() == 'bild_mit_link' ):
                            echo '<div class="row-image flex-item">';
                                $image_text = get_sub_field('bild');
                                echo $image_text;
                            echo '</div>';
                        //TEXTFELD
                    elseif( get_row_layout() == 'textfeld' ):
                        echo '<div class="textfeld-wrapper">';
                            $svg_width = get_sub_field('svg_width');
                            $svg_height = get_sub_field('svg_height');
                            $svg_color = get_sub_field('svg_color');

                            echo '<svg width="'.$svg_width.'" height="'.$svg_height.'" class="svg-image img-responsive">
                                <rect class="img-responsive" width="'.$svg_width.'" height="'.$svg_height.'" style="fill:'.$svg_color.';">
                            </svg>';
                            echo '<div class="row-text flex-item row-bg-text">';
                                echo '<div class="balken-links">';
                                    $text = get_sub_field('textfeld_inhalt');
                                    echo $text;
                                echo '</div>';
                            echo '</div>';
                        echo '</div>';
                    endif;
                    endwhile;
                echo '</div>';
                //.LEFT ROW

                //MIDDLE ROW
                echo '<div class="flex-container">';

                echo '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">';
                    while ( have_rows('middle_row') ) : the_row();
                        //BILD
                        if( get_row_layout() == 'bild_mit_link' ):
                            echo '<div class="row-image flex-item">';
                                $image_text = get_sub_field('bild');
                                echo $image_text;
                            echo '</div>';
                        //TEXTFELD
                    elseif( get_row_layout() == 'textfeld' ):
                        echo '<div class="textfeld-wrapper">';
                            $svg_width = get_sub_field('svg_width');
                            $svg_height = get_sub_field('svg_height');
                            $svg_color = get_sub_field('svg_color');

                            echo '<svg width="'.$svg_width.'" height="'.$svg_height.'" class="svg-image img-responsive">
                                <rect class="img-responsive" width="'.$svg_width.'" height="'.$svg_height.'" style="fill:'.$svg_color.';">
                            </svg>';
                            echo '<div class="row-text flex-item row-bg-text">';
                                echo '<div class="balken-links">';
                                    $text = get_sub_field('textfeld_inhalt');
                                    echo $text;
                                echo '</div>';
                            echo '</div>';
                        echo '</div>';
                    endif;
                    endwhile;
                echo '</div>';
                //.MIDDLE ROW

                //RIGHT ROW
                echo '<div class="flex-container">';

                echo '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">';
                    while ( have_rows('right_row') ) : the_row();
                        //BILD
                        if( get_row_layout() == 'bild_mit_link' ):
                            echo '<div class="row-image flex-item">';
                            $image_text = get_sub_field('bild');
                            echo $image_text;
                            echo '</div>';
                            //TEXTFELD
                        elseif( get_row_layout() == 'textfeld' ):
                            echo '<div class="textfeld-wrapper">';
                                $svg_width = get_sub_field('svg_width');
                                $svg_height = get_sub_field('svg_height');
                                $svg_color = get_sub_field('svg_color');

                                echo '<svg width="'.$svg_width.'" height="'.$svg_height.'" class="svg-image img-responsive">
                                            <rect class="img-responsive" width="'.$svg_width.'" height="'.$svg_height.'" style="fill:'.$svg_color.';">
                                        </svg>';
                                echo '<div class="row-text flex-item row-bg-text">';
                                    echo '<div class="balken-links">';
                                    $text = get_sub_field('textfeld_inhalt');
                                    echo $text;
                                    echo '</div>';
                                echo '</div>';
                            echo '</div>';
                        endif;
                    endwhile;
                echo '</div>';
                //.RIGHT ROW

            endif;
        endwhile;
    endif;
/******************* .DREI SPALTEN*********************
 * ***************************************************/

    
    ?>

• John Huebner

• July 26, 2015 at 11:13 pm

I think that the main issue you’re seeing is that you do not have both layout nested in the first while have_rows() statement, but I could be wrong. I think it should look something like this… i’ve shortened this to only have what is needed to make it easier to see.

    if( have_rows('zwei_spalten')):
        while ( have_rows('zwei_spalten') ) : the_row();
            $layout = get_row_layout();
            if ($layout == 'zwei_spalten_inhalte') {
                // code to output zwei_spalten_inhalte
            } elseif ($layout == 'drei_spalten_inhalte') {
                // code to output drei_spalten_inhalte
            }
    // rest of your code here.....

• superchiffre

• July 27, 2015 at 1:07 am

Hey John thanks for your reply and the inspiration!

In the mean while I found another solution that works:

The maximum number of columns in my side are 3… So I made the code above with three layouts.

And added some if statemens. In them I used the bootstrap hide- classes. They make the content display: none.

The if statements look like this:

` $width = get_sub_field(‘column_width’);
$col_size_left = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;
$col_size_right = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;

if($width == ‘6-6’):
$col_size_left = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-6 col-md-6 col-sm-6 col-xs-12’;
elseif($width == ‘5-7’):
$col_size_left = ‘col-lg-5 col-md-5 col-sm-5 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-7 col-md-7 col-sm-7 col-xs-12’;
elseif($width == ‘7-5’):
$col_size_left = ‘col-lg-7 col-md-7 col-sm-7 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-5 col-md-5 col-sm-5 col-xs-12’;
elseif($width == ‘4-8’):
$col_size_left = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-8 col-md-8 col-sm-8 col-xs-12’;
elseif($width == ‘8-4’):
$col_size_left = ‘col-lg-8 col-md-8 col-sm-8 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
elseif($width == ‘4-4-4’):
$col_size_left = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
$col_size_middle = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
$col_size_right = ‘col-lg-4 col-md-4 col-sm-4 col-xs-12’;
elseif($width == ‘1’):
$col_size_left = ‘col-lg-12 col-md-12 col-sm-12 col-xs-12’;
$col_size_middle = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
$col_size_right = ‘hidden-xs hidden-sm hidden-md hidden-lg’;
endif; `