3

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.

Improve this question

1 Answer 1

Reset to default
0

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}}'>

Improve this answer
5
  • 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, 2013 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, 2013 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, 2013 at 14:29
  • I've added a code fragment that should help
    – anu
    Nov 27, 2013 at 14:48
  • Thanks anu. I'll try on that. Appreciate your efforts and time!! :-)
    – Tharindulucky
    Nov 27, 2013 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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