Is it possible to reflect re-ordering the field order in a template in the frontend markup ?

[protro]

I would like to know if anyone has strategies for an admin user re-ordering the field order in a template and have it automagically reflected in the frontend markup. What's the best way to go about this ?

[protro]

Looks like I was able to do this thanks to @adrian suggestions here.

I used the FieldtypeFields to create an ordered flow of fields which can alter the frontend markup. Here are the fields inside a page:

and here is my Latte template file as an example. Re-ordering the fields in works to change the order of the markup. Wonderful!

<section>
    <div 
        class="uk-width-1-1 uk-height-viewport uk-padding-large uk-flex uk-flex-column uk-flex-center"
        uk-scrollspy="cls: uk-animation-fade; target: > div; delay: 300; repeat: false;"
        >

        {foreach $page->fields_order as $field}

            {if $field == 'logo'}
            
                {* logo *}
                <div class="uk-width-1-2 uk-text-center uk-margin-large-bottom">
                    {$page->get('logo')->markup|noescape}
                </div>
            
            {/if}
        
            {if $field == 'featured_image'}

                {* get featured image *}
                <div class="uk-height-1-1">
                    <img src="{$page->$field->first->url}" alt="{$page->$field->description}" class="uk-width-1-1 uk-margin-large-bottom">
                </div>
            
            {/if}

            {if $field == 'header' || $field == 'byline'}
                
                {* headings + byline *}
                <div>
                    <div class="uk-width-1-1 visbycf-text">
                        {if $field == 'header'}
                            <h1 class="uk-heading-hero uk-text-center">{$page->$field|noescape}</h1>
                        {/if}

                        {if $field == 'byline'}
                            <p class="uk-text-large uk-text-center">{$page->$field|noescape}</p>
                        {/if}
                    </div>
                </div>

            {/if}

            {if $field == 'body'}

                {* body *}
                <div class="uk-width-1-1 visbycf-text">
                    <p class="uk-text-large uk-text-center">
                        {$page->$field|noescape}
                    </p>
                </div>

            {/if}

            {if $field == 'additional_body'}

                {* body *}
                <div class="uk-width-1-1 visbycf-text">
                    <p class="uk-text-large">
                        {$page->$field|noescape}
                    </p>
                </div>

            {/if}
        
            {if $field == 'gallery'}

                {* gallery *}
                <div class="uk-margin-large-bottom">
                    {$rockfrontend->render("/sections/includes/gallery.latte")}
                </div>

            {/if}

            {if $field == 'additional_gallery'}

                {* gallery *}
                <div class="uk-margin-large-bottom">
                    {$rockfrontend->render("/sections/includes/gallery.latte")}
                </div>

            {/if}

        {/foreach}
    </div>
</section>

I have a question as to how to move this one Fields Order field into a new custom tab under the Page Edit Admin ? Anyone know how this can be achieved ?

Thanks,

 

[Robin S]

foreach($page->fields as $field) {
	$value = $page->get($field->name);
	// Now output the value or process it as needed for output...
}

Seems rather impractical to me though, as you would no doubt need to do a lot of if() tests to output the right markup based on the field type and what wrapping markup is needed, etc. Much simpler to get your specific field values individually in your template file and control the order of markup there.

[Alpina]

Hi @Robin S, I didn't get your approach. Could you please elaborate on it? This is an interesting topic for me too.?

Edited July 18 by Alpina

[Robin S]

@Alpina, the OP is asking how to output the field values of a page in the order that the fields are positioned in the page's template. To get the fields in order you can use $page->fields, and you can then iterate over those fields to get the field values from $page via the name of each field.

As developer you generally have control over both the template within the PW admin and the template file that outputs markup. So if you have a template with fields "title", "body" and "gallery" then I think the normal way to control the order of these fields is by structuring the markup you want within the template file and then getting each field value individually by name.

<h1><?= $page->title ?></h1>
<div class="text">
	<?= $page->body ?>
</div>
<div class="gallery">
	<?php foreach($page->images as $image): ?>
		<img src="<?= $image->url ?>" alt="<?= $image->description ?>">
	<?php endforeach; ?>
</div>

If later there is a decision to place the gallery before the body text then you change the order of the markup in the template file. You might also change the order of the fields within the template in the PW admin so that it reflects the order that fields are output in the frontend, but that's a separate decision and moving the fields in the PW admin doesn't actually define the order of output.

Alternatively you could have no fixed order of output within the template file and use the order of the template fields as defined in the PW admin.

<?php foreach($page->fields as $field): ?>
    <?php $value = $page->get($field->name); ?>
	<?php if($field->name === 'title'): ?>
		<h1><?= $value ?></h1>
	<?php elseif($field->name === 'body'): ?>
		<div class="text">
			<?= $value ?>
		</div>
	<?php elseif($field->name === 'images'): ?>
		<div class="gallery">
			<?php foreach($value as $image): ?>
				<img src="<?= $image->url ?>" alt="<?= $image->description ?>">
			<?php endforeach; ?>
		</div>
	<?php endif; ?>
<?php endforeach; ?>

I just think this is a less practical approach and makes the template file harder to understand. 

[Alpina]

Understood. Thank you!