Get featured image of post once gravity forms selects that post - wordpress

Question

I'm creating a form using Gravity Forms where users will be able to select type of aircrafts, add different flight hours, perks, and other add-ons to their flight. I'm populating the checkbox fields in Gravity Forms with a custom post type I created.
Once a user selects the flight and other perks available, to the left of their selections, I'm populating an HTML Field from GF to display {all_fields}. Since the aircrafts checkboxes are being populated by a custom post type, I want to be able to grab that featured image of that post type and then display it above the location of the HTML Field.
The code listed here is the function I'm using to populate those checkboxes with the custom post type:
add_filter( 'gform_pre_render_6', 'ldm_do_bac_aircraft_large' );
add_filter( 'gform_pre_validation_6', 'ldm_do_bac_aircraft_large' );
add_filter( 'gform_pre_submission_filter_6', 'ldm_do_bac_aircraft_large' );
add_filter( 'gform_admin_pre_render_6', 'ldm_do_bac_aircraft_large' );
function ldm_do_bac_aircraft_large( $form ) {
foreach ( $form['fields'] as &$field ) {
if ( strpos( $field->cssClass, 'bac-aircraft-large' ) === false ) {
continue;
}
$posts = get_posts( array(
'numberposts' => -1,
'post_status' => 'publish',
'post_type' => 'ldm_build_card',
'order' => 'ASC',
'tax_query' => array(
array(
'taxonomy' => 'ldm_build_card_categories',
'field' => 'slug',
'terms' => array( 'large' ),
),
),
) );
$choices = array();
foreach ( $posts as $post ) {
$choices[] = array( 'text' => $post->post_title, 'value' => $post->post_title );
}
$field->choices = $choices;
}
return $form;
}
So my goal is for when the user selects either a Large, Super-Mid, Mid, or Small aircraft (and those are the categories) the next page of the multi-page GF will not only display that plane the user selected, which is does, but I want it to display that post/Aircrafts featured image above it. So the image will change depending on the aircraft selected.
Does anyone have an idea how I can get the featured image of that post ID depending on what the user selects in GF?
UPDATE 6/24
Ok so to be more clear to what I'm doing. Im using gravity forms Multi-page to create a form to get aircrafts, perks, hours, add-ons, etc. I needed to populate the Aircrafts 'page' of the form with the custom post type. I have these populated but I needed to display the post information such as a Featured Image, Aircraft Name, Range, etc.. above the actual input. I have done that and satisfied but I needed to pull the image of the post so when the form then is submitted and navigates to the next page of the form, it would display that Post Featured Image along with all the other fields I selected.
In this case I selected an aircraft which it displays the title and I needed the Featured Image to go with it. Originally this needed to be an AJAX Gravity Form. The image would not display and would display as undefined when I checked the console log because I'm also moving things around with jQuery.
You may say why am I doing it this way, well it's just what I decided to do because this is my first crack at a multi-page GF where I needed to display a custom post type as selections.
Ok so since the image was not displaying, I decided to turn off AJAX on the Form because I had this idea that the script that is spitting out the filterable categories of the aircrafts was being removed. I was correct so I turned off AJAX and the image now displays. So my Question now is how can I include this script to be included in the AJAX request for this particular Form.
Below I have my jQuery to display the post image in a specific area once that aircraft has been selected.
var checkboxValue = $('#gform_page_6_1 input[type=checkbox]:checked').val();
var aircraftSelect = $('#membershipAircrafts').find('[data-aircraft-title="'+checkboxValue+'"]');
var aircraftImage = $(aircraftSelect).find( '.membership-aircraft-image' );
console.log( aircraftImage );
$('.summary-image').html( aircraftImage );
Now here is the script that I thought was being removed:
function ldm_add_membership_aircrafts() {
?>
<script type="text/template" id="single-membership-listings">
<% _.each( membershipAircrafts, function( membershipAircraft ) { %>
<div id="aircraft<%= membershipAircraft.id %>" class="single-membership-inner clearfix col-sm-4" data-aircraft-title="<%= membershipAircraft.title %>">
<% if( membershipAircraft.imageURL ) { %>
<img class="membership-aircraft-image" src="<%= membershipAircraft.imageURL %>" alt="<%= membershipAircraft.title %>" />
<div class="single-membership-content-container">
<% } else { %>
<div class="single-membership-content-container">
<% } %>
<div class="single-membership-title"><%= membershipAircraft.title %></div>
<div class="single-membership-range">
<p id="membership-label">Range:</p>
<p id="membership-range-content"><%= membershipAircraft.range %></p>
</div>
<div class="single-membership-passengers">
<p id="membership-label">Passengers:</p>
<p id="membership-passengers-content"><%= membershipAircraft.passengers %></p>
</div>
<div class="single-membership-baggage">
<p id="membership-label">Luggage Capacity:</p>
<p id="membership-baggage-content"><%= membershipAircraft.baggage %></p>
</div>
<div class="single-membership-cabinDimensions">
<p id="membership-label">Cabin Dimensions:</p>
<p id="membership-cabinDimensions-content"><%= membershipAircraft.cabinDimensions %></p>
</div>
</div>
</div>
<% }); %>
</script>
<script type="text/template" id="single-categories-listings">
<% var categoryName; %>
<% var count = 0; %>
<div class="membership-categories-inner">
<% _.each( membershipCategories, function( membershipCategory ) { %>
<% if( count !== 0 && categoryName !== membershipCategory.taxonomy ) { %>
</div>
<% } %>
<div data-term-id="<%= membershipCategory.id %>" class="single-membership-category <%= membershipCategory.termName %><% if( count === 0 ){ %> category-active <% } %>"><%= membershipCategory.termName %></div>
<% categoryName = membershipCategory.taxonomy; %>
<% count++; %>
<% }); %>
</div>
</div>
</script>
<?php
}
Thinking about it I'm not sure the script is being removed but AJAX is actually removing the custom fields that I am placing as a partial and using jQuery to add them above the actual inputs
echo '<li id="aircraft-tax" class="gfield">';
echo '<div class="row">';
echo '<div class="col-sm-12">';
echo '<div id="membershipCategories" class="membership-categories"></div>';
echo '</div>';
echo '</div>';
echo '</li>';
echo '<li id="aircraft-content" class="gfield">';
echo '<div class="row">';
echo '<div class="col-sm-10 col-sm-offset-1">';
echo '<div id="membershipAircrafts" class="membership-aircrafts"></div>';
echo '</div>';
echo '</div>';
echo '</li>';
Here is the jQuery that i'm using to place above the inputs:
$('#field_6_2').after( $('#aircraft-tax') );
$('#aircraft-tax').after( $('#aircraft-content') );
What Can I do to prevent AJAX from removing this information. If I can include this into the AJAX request then I feel the images will display just like they do if I turn AJAX off on the GF.
**
UPDATE 3
**
I found my issue. Turns out that when I enable ajax on Gravity Forms, it is not adding a template that I originally load on the page. For example I have a partial that I'm including on my page:
get_template_part( 'partials/membership-template', 'aircraft' );
This is being added originally but once I navigate to the next form page (because it is a multi-page form) this template that is being called on the page gets removed.
So how can I keep this template or partial from being removed after the form navigates to the next form page?

Answer 1

Since your form is having users select a category of plane (from you custom taxonomy) you need to get an actual post in order to display a featured image. Add this where you are rendering your form page.
$args = array(
'posts_per_page' => 1,
'post_type' => 'ldm_build_card',
'ldm_build_card_categories' => 'large',//or selected type
'post_status' => 'publish'
);
$show_image = get_posts( $args );
if( $show_image ) {
get_the_post_thumbnail( $show_image[0]->ID, 'image-size');
}
UPDATE: In case I misunderstood your question:
The post ID should also be in your form input so get_the_post_thumbnail( $entry[id-of-selection-field], 'image-size');would also output your image.
UPDATE 2:
To get data from one page to another add an html field to the second page, use a pre_render filter:
add_filter( 'gform_pre_render_{form_id}', 'populate_html' );
Then use GFFormDisplay to get the page. Loop through form fields to get your post id and get the image from there.
function populate_html( $form ) {
//this is a 2-page form with the data from page one being displayed in an html field on page 2
$current_page = GFFormDisplay::get_current_page( $form['id'] );
$html_content = "The information you have submitted is as follows:<br/><ul>";
if ( $current_page == 2 ) {
foreach ( $form['fields'] as &$field ) {
//gather form data to save into html field (id 3 on my form), exclude page break
foreach ( $field->inputs as $input ) {
if ($input['id'] == {selected-plane-input}) {
$input_name = 'input_' . str_replace( '.', '_', $input['id'] );
$value = rgpost( $input_name );
$html_content .= '<p>' . wp_get_attachment_url( get_post_thumbnail_id($value)). '</li>';
}
}
}
}
foreach ( $form['fields'] as &$field ) {
if ( $field->id == {your-html-field-id} ) {
//set the field content to the html
$field->content = $html_content;
}
}
return $form;
}