I am trying to: Call to custom post type fields used in a CRED form to pull image data into a WordPress shortcode for automatically creating an image gallery.
Link to my site: hidden link
I expected to see: I have a standard WordPress gallery displaying now, but I want to be able to use specific custom image fields in the WordPress shortcode instead of the standard image ID.
Instead, I got: Right now I can only use the image ID to add specific images to a custom post gallery, but I want to be able to use specific custom post image fields (non-repeating) in the view template, otherwise the default WordPress gallery shortcode will automatically pull in ALL images associated with the post. This is an example of the image fields - pc-extra-image-1, pc-extra-image-2, ... etc. and an example of the fields in the CRED form:
[cred_field field='pc-extra-image-1' post='party-expo' value='' urlparam='']
</div>
<div class="cred-field cred-field-pc_extra_image_2">
<label class="cred-label">
Upload Extra Image 2: Max. file size = 1MB.
</label>
[cred_field field='pc-extra-image-2' post='party-expo' value='' urlparam='']
</div>
How can I call to these fields in the WordPress gallery shortcode in place of the [gallery id="xyz"] ?
Thanks!
The WordPress gallery shortcode requires a comma-separated list of image IDs in the "ids" attribute. Custom image fields in Types store an image URL, but not an image ID. So you would have to implement some custom code that gets image IDs based on their stored URLs, then uses those IDs to construct a comma-separated list of IDs.
Another ticket in the forum has some information about this. Please add the following code to functions.php:
function prefix_get_img_ids($atts) {
global $post;
$postid = isset($atts['post_id']) ? $atts['post_id'] : $post->ID;
$images[] = get_post_meta($postid, 'wpcf-pc-extra-image-1', true);
$images[] = get_post_meta($postid, 'wpcf-pc-extra-image-2', true);
// if you want to include more images, copy + paste here with the appropriate image field slug
$ids = array();
global $wpdb;
foreach($images as $img) {
$query = "SELECT ID FROM {$wpdb->posts} WHERE guid='$img'";
$id = $wpdb->get_var($query);
if($id)
$ids[] = $id;
}
return implode(",",$ids);
}
add_shortcode("get_image_ids", "prefix_get_img_ids");
If you have more than these two image fields, you must copy + paste a line for each image field you wish to show in the gallery.
Then you can use the custom shortcode like so:
[gallery ids="[get_image_ids post_id='24']"]
Replace the 24 with the ID of whatever post contains your custom field, or the wpv-post-id shortcode.
Ok - I'm following you up to this point except that I want use the shortcode in a content template so that the images are automatically pulled from each custom post when there are actual images submitted using the CRED front end form.
How do I automatically insert each post ID into the shortcode so it knows which images to assign to each post?
Will this work:
<div><p>[gallery ids="[get_image_ids post_id='[wpv-post-id]']"]</p></div>
Thanks!
I think this looks good. You should register get_image_ids as 3rd party shortcode argument in Toolset > Settings > Front-end Content > Third-party shortcode arguments. There's a description of this here: https://toolset.com/documentation/user-guides/shortcodes-within-shortcodes/
So it worked fine except that if all the extra image fields are empty, then it acts like the default WordPress gallery shortcode when no image ID has been designated, and pulls any image associated with the post instead of just the custom extra image fields.
How would I make sure that is all the custom extra image fields are empty, it doesn't display any gallery?
Thanks!
This is how the WordPress gallery shortcode is designed to work, and Toolset does not modify that functionality. If you include the gallery shortcode with empty image IDs, it will try to get another image from the post.
Instead, you can disable the gallery by wrapping the entire gallery shortcode in a conditional statement. Test the values of all the custom fields, and only show the gallery if at least one of them is not empty. Example:
[wpv-conditional if="( -insert your conditional code here- )"]
[gallery ids="[get_image_ids post_id='[wpv-post-id]']"]
[/wpv-conditional]
More information about setting up conditional HTML in Views:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/
I tried adding the conditional code, but it didn't seem to work, but I might have used the wrong conditional settings, so I'm gonna try again this evening after reviewing the documentation again, and will let you know if I get it to work.
Thanks!
Sure, I'm here if you get stuck.
Christian - It works like a charm. Thanks for your assistance.