[Resolved] How to get images out of ACF Gallery?

[Author]

Posts

[simonV-3]

Tell us what you are trying to do? Due to the situation, that I am not able to save custom post type images into Toolsets image field with Gravity Forms, I used the ACF Gallery field for it.

Now I like to show those images in a slider with the follow code:

<link type="text/css" rel="stylesheet" href="[wpv-bloginfo show='url']/wp-content/themes/Impreza-child/dist/css/lightslider.css" />                  
<script src="[wpv-bloginfo show='url']/wp-content/themes/Impreza-child/dist/js/lightslider.js"></script>
[wpv-conditional if="( $(images) ne '' )"]
  
[/wpv-conditional]

[wpv-conditional if="( $(images) ne '' )"]
<ul id="imageGallery">
[wpv-for-each field="images"]
<li data-thumb="[wpv-post-field name='images' url='true' size='thumbnail']">
    <img src="[wpv-post-field name='images' url='true' size='full']" />
</li>
</ul>
[/wpv-conditional]

[wpv-conditional if="( $(images) eq '' )"]
<ul id="imageGallery">
<li data-thumb="[wpv-post-featured-image output='url']">
    <img src="[wpv-post-featured-image size='mycustom1200' output='url']" />
</li>
</ul>
[/wpv-conditional]

Is there any documentation that you are following? I didn't found a documentation - so far, I am trying to use the similar code as I already have used - with the image field from Toolset.

But also based on: hidden link

Is there a similar example that we can see? hidden link

This should be, with the slider...

What is the link to your site? This example it not not working: hidden link

I get this out instead:

<li data-thumb="1921, 1922" class="lslide active" style="width: 666px; margin-right: 0px;">
    <img src="1921, 1922">
</li>

Those are the id's of the images I saved in the post. But I need to have for each image like this:

<li data-thumb="<em><u>hidden link</u></em>" class="clone left" style="width: 666px; margin-right: 0px;">
    <img src="<em><u>hidden link</u></em>">
</li>

[Shane]

Hi Simon,

Thank you for getting in touch.

Given that the images are stored within the ACF fields our [wpv-post-field] shortcode will only retrieve the value that is stored in the database. In this case ACF stores the ID of the images rather than the URL's.

What I would recommend that you do is to get in touch with the ACF team to see if they are able to construct a shortcode for you that will allow you to retrieve the items.

Thanks,
Shane

[simonV-3]

Dear Shane

I got a first part done:

/* slider images */
function func_display_slider($atts) {
  global $post;
  $str = '';
  $size = 'thumbnail';
  $thumb = $image['sizes'][ $size ];
  
  $images = get_field('gallery');
	
  if ($images) {
    
	$str .= '<link type="text/css" rel="stylesheet" href="<em><u>hidden link</u></em>" />';                 
	$str .= '<script src="<em><u>hidden link</u></em>"></script>';	
	$str .= '<ul id="imageGallery">';
            foreach( $images as $image ){
	$image_big = wp_get_attachment_image_src($image, 'full');
	$image_small = wp_get_attachment_image_src($image, 'thumbnail');
	$str .= '<li data-thumb="'.$image_small[0].'">';
	$str .= '<img src="'.$image_big[0].'" />';
	$str .= '</li>';
            }
	$str .= '</ul>';
	$str .= '<script type="text/javascript">';
	$str .= 'jQuery(document).ready(function() {';
	$str .= 'jQuery("#imageGallery").lightSlider({';
	$str .= 'gallery:true,';
	$str .= 'item:1,';
	$str .= 'loop:true,';
	$str .= 'thumbItem:9,';
	$str .= 'slideMargin:0,';
	$str .= 'enableDrag: false,';
	$str .= 'currentPagerPosition:"left",';
	$str .= '});';
	$str .= '});';
	$str .= '</script>';
  }
	 
  return $str;
}
add_shortcode( 'show_slider', 'func_display_slider' );

What I like to achieve now - as I still have the Toolset images in some custom post types, I like to "merge" this part:

[wpv-conditional if="( $(wpcf-my-slider-images) ne '' )"]
<ul id="imageGallery">
[wpv-for-each field="wpcf-my-slider-images"]
<li data-thumb="[types field='my-slider-images' url='true' size='thumbnail'][/types]">
    <img src="[types field='my-slider-images' url='true' size='full'][/types]" />
</li>
[/wpv-for-each] 
</ul>
[/wpv-conditional]

[wpv-conditional if="( $(wpcf-my-slider-images) eq '' )"]
<ul id="imageGallery">
<li data-thumb="[wpv-post-featured-image output='url']">
    <img src="[wpv-post-featured-image size='mycustom1200' output='url']" />
</li>
</ul>

into the function above.

How an what variable can I use for it? I am not sure exactly how and what field names I should use for it.

Regards,

Simon

[Christian Cox]

Hello, Shane is unavailable today because of the holiday over the weekend. He will return tomorrow to continue assisting you here - thank you for your patience.

[Shane]

Hi Simon,

Not sure I understand fully, you have a set of images in an ACF gallery field and you have another set of images inside the Toolset custom image field and you want to merge the images from both fields inside the php ?

If that is the case then you should be looking at the function below

types_render_field();

https://toolset.com/documentation/customizing-sites-using-php/functions/

In our case we store the URL of the image inside the field, so you can use the code above to retrieve it from the database.

For this line below in your code you can perform an array merge for the Toolset images, however you would've first needed to build a second array with the image urls to merge it to the toolset one.

$images = get_field('gallery'); // gets your acf image ids

$toolset_images = types_render_field( 'field-slug', array( 'output' => 'raw') );

However its going to be a bit tricky to get the thumbnail images for the toolset images, however you can use this function.
https://developer.wordpress.org/reference/functions/attachment_url_to_postid/

So in any case you should be able to also do this.

foreach($toolset_images as $toolset_image){
$ids = attachment_url_to_postid($toolset_image);
array_push($ids);
}

This should push the ID of the current toolset image into your acf $images variable, what i'm not sure of is if the ACF images are being returned as an Array.

Please provide some clarity for me.
Thanks,
Shane