Hi Doug,

In order to properly understand what's going on I kind of need to see more of the field definition file. For instance, I need to know where $image$ and $title$ are being defined. Can you post the fields with the tokens $image$, $title$, and the one which the PostTokenString you showed below is being defined, and keep them in the same order which they appear in the field definition file?

Thanks

Hi Doug,

The problem you're having is caused by sort orders.  I believe earlier when I explained how the ordering needed to work I said it backwards to what I meant, sorry about any confusion! Here is an accurate description: When you have a field which uses another field's token in it's value (return bool or pre/post token strings included), the field which uses the token in it's value must have a lower sortOrder than the field which is identified with the token.

In the code below, I have fixed the sort orders and also wrapped your $image$ with an img tag via pre/post, and as a bonus I included some CSS to make the visual order in which your inputs appear the same as what you had originally even though they're rendered in a different order for SuperFlexi's sake. You can put your sortOrder values to whatever they need to be in order to be processed correctly, but still control the order that the inputs display in by changing the "order-#" class in the editPageControlWrapperCssClass value.

    <Field
        name="title"
        label="Title"
        controlType="TextBox"
        required="false"
        requiredMessageFormat="Title is required."
        token="$title$"
        isSearchable="true"

        editPageControlWrapperCssClass="settingrow order-1"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="forminput"
        sortOrder="120"
    />

    <Field
        name="target"
        label="Target Attribute Code (_blank)"
        controlType="TextBox"
        required="false"
        requiredMessageFormat="Title is required."
        token="$target$"
        isSearchable="true"

        editPageControlWrapperCssClass="settingrow order-2"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="forminput"
        sortOrder="130"
    />

    <Field
        name="makeitalink"
        label="Make My Textbox A Link?"
        controlType="CheckBox"
        token="$makeitalink$"
        sortOrder="100" 

        checkBoxReturnBool="false"
        checkBoxReturnValueWhenTrue="$url-token$"
        checkBoxReturnValueWhenFalse="$image$"

        editPageControlWrapperCssClass="settingrow order-3"
    />

    <Field
        name="image"
        label="Slide Image"
        controlType="ImagePicker"
        required="false"
        requiredMessageFormat="Slide Image is required for each box."
        token="$image$"

        editPageControlWrapperCssClass="settingrow order-4"
        editPageLabelCssClass="settinglabel"
        editPageControlCssClass="form-control"
        sortOrder="140"
    >
        <PreTokenString>
            <![CDATA[<img src="]]>
        </PreTokenString>
        <PostTokenString>
            <![CDATA[" />]]>
        </PostTokenString>
    </Field>

    <Field
        name="mylinkbox"
        label="My URL"
        controlType="LinkPicker"
        token="$url-token$"
        sortOrder="110"

        editPageControlWrapperCssClass="settingrow order-5"
    >
        <PreTokenString>
            <![CDATA[<a href="]]>
        </PreTokenString>
        <PostTokenString>
            <![CDATA[" title="$title$" alt="$title$" target="_blank">$image$</a>]]>
        </PostTokenString>
    </Field>

    <Styles>
        <Style>
            <![CDATA[
                div[id$="_customControls"] {
                    display: flex;
                    flex-flow: row wrap;
                }

                .settingrow {
                    flex: 0 1 100%;
                }

                .order-1 {
                    order: 1
                }
                .order-2 {
                    order: 2
                }
                .order-3 {
                    order: 3
                }
                .order-4 {
                    order: 4
                }
                .order-5 {
                    order: 5
                }
            ]]>
        </Style>
    </Styles>

Hope this helps!

Doug,

To make the title work on the image tag, the image field's sortOrder needs to be lower than the title field's sortOrder. So for instance, changing the sortOrder of image to 115 works, because that is lower than the order of title but still higher than the order of mylinkbox. 

As for the CSS, there must be something in your skin that's changing the element which wraps all of the settingrows in your solution. If you can open your field page (sign in and click the edit link on an item in the solution), and user the browsers tools (f12) to inspect the page, you can look and see what element is wrapping all of the settingrows and change the div[id$="_customControls"] selector to match it, then everything should work. I should also mention that the CSS I provided only works in modern browsers, IE10 and below do not support flex box.

Hope this helps!