1

I am trying to wrap my brain around fluid fields, and the documentation isn't helping me AT ALL. How do I get these to display on my site?

The channel is: Portfolio

The fluid field is: portfolio_popup_image

The sub-fields within the fluid field are: portfolio_caption, portfolio_image, and portfolio_image_alt_text.

Here's my template sample:

<!--Portfolio Item-->
{exp:channel:entries channel="portfolio"}

    <!--Portfolio Item-->
    {portfolio_popup_image}

        <div class="item col-lg-4 col-sm-6 catering">
            <a class="image-link" href="{portfolio_popup_image:portfolio_image}">
                <figure>
                    <img src="{portfolio_popup_image:portfolio_image}" alt="{portfolio_popup_image:portfolio_image_alt_text}">
                    <figcaption>
                        <h4>{title}</h4>
                        <p>{portfolio_popup_image:portfolio_caption}</p>
                    </figcaption>
                </figure>
            </a>
        </div>

    {/portfolio_popup_image}
{/exp:channel:entries}

I have been looking at the instructions and my template for over an hour and can't get anything to work. Any help would be greatly appreciated.

1

Fluid fields are designed to allow the user creating a channel entry to choose which fields are included in the entry. So when you are designing your template you cannot make assumptions about which fields the user will have chosen, or (to some extent) how many, or in what order. So template processing of Fluid fields needs to be handled differently to what you may be used to.

In your example code it is written as though you are confident that the user will provide values for each of the three 'fluid' fields you have defined. For this kind of scenario you might be better off using a Grid field - where you can specify that to complete the entry the user must provide all three grid field values before they can save the entry. The template code you have provided would work if your field was a grid field.

To use a Fluid field you approach things slightly differently. Your code would look more like this:

<!--Portfolio Item-->
{exp:channel:entries channel="portfolio"}

    <!--Portfolio Item-->
    {portfolio_popup_image}

        {portfolio_popup_image:portfolio_caption}
            ... HTML to insert if (and every time) a caption field is speciied in channel entry...
        {/portfolio_popup_image:portfolio_caption}

        {portfolio_popup_image:portfolio_image}
            ... HTML to insert if (and every time) an image field is speciied in channel entry...
        {/portfolio_popup_image:portfolio_image}

        {portfolio_popup_image:portfolio_image_alt_text}
            ... HTML to insert if (and every time) an alt-text field is speciied in channel entry...
        {/portfolio_popup_image:portfolio_image_alt_text}

    {/portfolio_popup_image}
{/exp:channel:entries}

Within each of the fluid field HTML blocks you still need to be able to specify where the actual values assigned to each fluid field appear, and you do this using the special tag {content}.

The Fluid Field documentation is now pretty clear on how to use the field, and has some good examples, so if you are still not sure go back and give it a read.

Based on what you describe in your question however, I think you really should consider using a Grid field instead.

HTH

| improve this answer | |
0

Are you looking to solve your problem at-hand, or research Fluid fields in general? As jcogs said, a Grid field would be better in this case. But FYI, if you simply want to know more about Fluid, think of a Fluid field containing a text, image (tall), and image (wide) fields. You would let your author define however many of each they want, and order them however they want. So when amount defined (including zero), and/or order isn't constrained, Fluid is great.

| improve this answer | |

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.