Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Does anyone know how to insert a custom fields (from Advanced Custom Fields plugin) into a twig template?

This is the code I want to add into the twig file.

<img src="<?php the_field('profile_pic'); ?>" />

And this is the coding of the Twig template file

    {% extends 'layout - tlt.twig' %}

{% block content %}

<br> <br>
    <h1 style="font-weight:bold; font-size:24px;" class="">{{ post.post_title }}</h1>
<br> <br>
    <div class="agent">
        <div class="row">
            <div class="image span2">
                <a href="{{ wp.get_permalink(wp.get_the_ID()) }}">
                    {% if wp.get_the_post_thumbnail(wp.get_the_ID()) %}
                        {{ wp.get_the_post_thumbnail(wp.get_the_ID())|raw }}
                    {% else %}
                        <img src="{{ wp.get_template_directory_uri() }}/assets/img/agent-tmp.png" alt="{{ property.post_title }}">
                    {% endif %}
                </a>
            </div><!-- /.image -->

            <div class="body span4">
                {{ wp.do_shortcode(wp.apply_filters('the_content', post.post_content))|raw }}
            </div><!-- /.body -->

            <div class="info span3">
                <div style="font-size:14px;" class="box">
                    <div style="margin-bottom:7px;" class="phone">
                        <i class="icon icon-normal-mobile-phone"></i>
                        {{ wp.get_post_meta(wp.get_the_ID(), '_tlt_mobile', TRUE) }}
                    </div><!-- /.phone -->

                    <div style="margin-bottom:7px;" class="office">
                        <i class="icon icon-normal-phone"></i>
                        {{ wp.get_post_meta(wp.get_the_ID(), '_tlt_phone', TRUE) }}
                    </div><!-- /.office -->

                    <div style="margin-bottom:7px;" class="email">
                        <i class="icon icon-normal-mail"></i>
                        <a href="mailto:{{ wp.get_post_meta(wp.get_the_ID(), '_tlt_email', TRUE) }}">
                            {{ wp.get_post_meta(wp.get_the_ID(), '_tlt_email', TRUE) }}
                        </a>
                    </div><!-- /.email -->

                     <div style="margin-bottom:7px;" class="location">
                        <i class="icon icon-normal-phone"></i>
                        {{ wp.get_post_meta(wp.get_the_ID(), '_tlt_location', TRUE) }}
                    </div><!-- /.office -->

                    <div style="margin-bottom:7px;" class="location">
                        <i class="icon icon-normal-phone"></i>
                        {{ wp.get_post_meta(wp.get_the_ID(), 'contact_number', TRUE) }}
                    </div><!-- /.office -->

                    <div style="margin-bottom:7px;" class="location">
                   <img src="{{ wp.get_post_meta(wp.get_the_ID(), 'profile_pic', TRUE)}}" alt="image" />
                    </div><!-- /.office -->





                </div><!-- /.box -->
            </div><!-- /.info -->
        </div><!-- /.row -->
    </div><!-- /.agent -->

    {% if properties %}
        <hr>




    {% endif %}
{% endblock %}

I did everything correctly up to inserting the code in the .twig file. Nothing worked.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

I don't use Twig, but I'm fairly sure that you have to pass values rather than all WP functions from the template (which probably runs outside the context of WordPress). So, your controller (typically the WordPress template) will store the results of the WP calls into an array, and then you render the Twig template with the values stored in the array.

[edited to add]

You have in your controller a call as follows:

echo View::render( 'single-tlt.twig', array( 
                    'post' => $post, 
                    'properties' => aviators_properties_get_by_agent( get_the_ID() ) 
                     ) 
                 ); 

Change to something like this:

echo View::render( 'single-tlt.twig', array( 
                    'post' => $post, 
                    'properties' => aviators_properties_get_by_agent( get_the_ID() ),
                    'profile_pic' => get_the_field( 'profile_pic' )
                     ) 
                 ); 

And then in your Twig template, you can add something like:

<img src = '{{profile_pic}}'>

share|improve this answer
    
Hi Anu, Thanks for the quick response. Anyway, your solution is little bit complex for me to understand. (Pardon me, I'm very new to wp coding.) So, according to you, in what file, should I add these particular code for getting the correct output ? I checked by adding this to single.php. But, it displays only on the top of the page. It's because the template runs by this twig file. :-( –  Tharindulucky Nov 27 '13 at 14:09
    
The PHP file that calls the rendering for that Twig template is where you'll need to do everything - you're probably using Timber, so search your theme codebase for Timber::render to see which file is calling the Twig template you posted above. That file is where you'll need to add array items that you then display in Twig –  anu Nov 27 '13 at 14:14
    
Thanks anu. I figured a little and I think this is the file which calls the TWIG template. <?php global $post; echo View::render( 'single-tlt.twig', array( 'post' => $post, 'properties' => aviators_properties_get_by_agent( get_the_ID() ), ) ); The name of this file is single-{post-type}.php. Do you know where to put the particular php code ? –  Tharindulucky Nov 27 '13 at 14:29
    
I've added a code fragment that should help –  anu Nov 27 '13 at 14:48
    
Thanks anu. I'll try on that. Appreciate your efforts and time!! :-) –  Tharindulucky Nov 27 '13 at 15:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.