[Resolved] Need to echo an image path for flexslider data-thumbs using the Types PHP API.

[Author]

Posts

[jD-5]

I am trying to:

Dynamically implement Flexslider with Thumbnails (hidden link) using the WP Types PHP API. While I am able to echo the image path, I am not able to inlcude the path for data-thumbs. This is my code in functions.php:

$case_study_thumb = types_render_field("casestudyimage", array("raw"=>"true", "separator"=>'"></li><li data-thumb="'));

$case_study_image = types_render_field("casestudyimage", array("alt" => "slider image", "title" => "slider_img", "separator"=>'</li><li data-thumb="">'));

		if ( !empty( $case_study_image )) { ?>
			<div class="flexslider">
				<ul class="slides">
					<?php echo '<li data-thumb="'.$case_study_thumb.'">'.$case_study_image.'</li>';?>

				</ul>
			</div>
		<?php } ?>

I expected to this markup structure see:

<div class="flexslider">
  <ul class="slides">
    <li data-thumb="slide1-thumb.jpg">
      <img src="slide1.jpg" />
    </li>
    <li data-thumb="slide2-thumb.jpg">
      <img src="slide2.jpg" />
    </li>
    <li data-thumb="slide3-thumb.jpg">
      <img src="slide3.jpg" />
    </li>
    <li data-thumb="slide4-thumb.jpg">
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

Instead, I got:

<div class="flexslider">
        <ul class="slides">
		<li data-thumb="<em><u>hidden link</u></em>"></li>
                <li data-thumb="<em><u>hidden link</u></em>"></li>
                <li data-thumb="<em><u>hidden link</u></em>"></li>
                <li data-thumb="<em><u>hidden link</u></em>">

               <img alt="slider image" title="slider_img" src="<em><u>hidden link</u></em>" /></li>

               <li data-thumb=""><img alt="slider image" title="slider_img" src="<em><u>hidden link</u></em>" /></li>

                <li data-thumb=""><img alt="slider image" title="slider_img" src="<em><u>hidden link</u></em>" /></li>

                <li data-thumb=""><img alt="slider image" title="slider_img" src="<em><u>hidden link</u></em>" /></li>
	</ul>
</div>

Would appreciate your advice how to get the correct markup.

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Looks like you want to extract just file names from the complete path. I will suggest to use PHP's pathinfo() function with your code to extract the file names only. The sample code is as below:

$case_study_thumb = pathinfo(types_render_field("casestudyimage", array("raw"=>"true", "separator"=>'"></li><li data-thumb="')), PATHINFO_BASENAME);

$case_study_image = pathinfo(types_render_field("casestudyimage", array("alt" => "slider image", "title" => "slider_img", "separator"=>'</li><li data-thumb="">')), PATHINFO_BASENAME);
 
...

Please read more about pathinfo() at hidden link

Please let me know if I can help you with anything related.

[jD-5]

Thanks for your response, Waqas.

The problem is that types_render_field outputs a string of all field values, which can be delimited.

I need the following output:

   <li data-thumb="slide1-thumb.jpg">
         <img src="slide1.jpg" />
    </li>

With my code from above, it will display ALL image paths of the string behind each other in the data-thumb, as you can see from my output. Any idea?

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Is your case study image a repeating field? Means does all images belong to single post with repeating casestudyimage custom field? Or these images are gathered from more than one posts (casestudyimage custom field having single value or non repeatable)?

Please let me know, so I can offer you more accurate solution.

[jD-5]

Hi Waqas,

the case study image is a custom field that can have multiple entries, i.e. multiple images for each single post. Have a look at the screenshot.

Due to the circumstance that

types_render_field

outputs a string and not an array, it is not possible to use a normal

foreach-loop

.

Thanks for your assistance.

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Please consider following PHP code:

// Get all values of repeating fields, separated by a comma
// Since the same field is used for thumbs and images, it's enough to fetch once only
$case_study_repeating_images = types_render_field("casestudyimage", array("raw"=>"true", "separator"=>","));

// Create an array of all values, exploded by the separating comma
$images = explode(",", $case_study_repeating_images);

if(!empty($case_study_repeating_images)) {
?>
	<ul class="slides">
<?php
	// Iterate through each array element and get key (index) and value
	foreach($images as $key => $value) {
?>
		<li data-thumb="<?=$value?>"><img src="<?=$value?>" /></li>
<?php
	}
?>
	</ul>
<?php
}

This will output something like this:

<ul class="slides">
    <li data-thumb="slide1-thumb.jpg">
      <img src="slide1.jpg" />
    </li>
    <li data-thumb="slide2-thumb.jpg">
      <img src="slide2.jpg" />
    </li>
    <li data-thumb="slide3-thumb.jpg">
      <img src="slide3.jpg" />
    </li>
    <li data-thumb="slide4-thumb.jpg">
      <img src="slide4.jpg" />
    </li>
  </ul>

Please notice, that you wanted to output a custom repeating attribute as well, so it is necessary to handle multiple instances in a custom way. Please see the line "$images = explode(",", $case_study_repeating_images);" which addresses this issue, and converts all values in an array based on the separator. So you can iterate through all values.

Also notice, since you were using the same field for thumbnails and images, I have optimized the code to eliminate unnecessary code calls.

[jD-5]

Perfect. Thanks a lot Waqas. The fact that types_render_field outputs a string was irritating me. Thanks again.