Yes, I did try that earlier today, with no luck. Was just trying to follow what that page link said and I noticed their missing “s” in some places. At this point, ACF has entirely quite offering any output at all in my template. (unordered or otherwise) I have obviously flubbed something up.

$site_features = get_field('site_features');
if( $site_features ): ?>
<ul>
<?php
// notice the missing "s"
foreach( $site_features as $site_feature ): ?>
<li><?php echo $site_feature; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
What does this do?
foreach( $site_features as $site_features ):
The first iteration of this loop sets $site_features (an array) to the string of whatever is in the first array value. This is the same as doing
$site_features = $site_features[0]
and this breaks your loop. Lets say that the first value of that array is “Some String”, then the next itteration will set $site_features equal to the second character of the string.

I don’t understand what you mean by “the intrinsic size”. What part of the image tag are your referring to?
<img
loading="lazy" src=".../test-the-kings-wark-pub-historical-pub-edinburgh-741x1000.jpg" width="741" height="1000" alt=" Image of dish at The Kings Wark pub" title="test-the-kings-wark-pub-historical-pub-edinburgh" class="size-medium wp-image-249" srcset=".../test-the-kings-wark-pub-historical-pub-edinburgh-741x1000.jpg 741w, .../test-the-kings-wark-pub-historical-pub-edinburgh-1037x1400.jpg 1037w, .../test-the-kings-wark-pub-historical-pub-edinburgh-768x1037.jpg 768w, .../test-the-kings-wark-pub-historical-pub-edinburgh-1137x1536.jpg 1137w, .../test-the-kings-wark-pub-historical-pub-edinburgh.jpg 1481w" sizes="(max-width: 741px) 100vw, 741px" /></div><div
class="lower-image">
The image tags look as I would expect them to look.
Now seems to work. Do I need to re-save all my posts again manually in order to have this rules applied?
May I add something to my question? Maybe it explain better my issue:
I am getting those posts in my CPT from somewhere (is an external software). The posts are automatically saved in WP with a title that looks like: title-one-2345
Is it possible to apply the rule you proved above automatically?

This is how I would do this…
The basics
Upload all of the flag images to a folder on the server, for this example I will assume I have put them in /wp-content/themes/your-theme/flags/. The file names of these flags would include information I want to display. For example the file name for the US flag might be “US-USA-United_States.png”. I will explain US is the 2 character ISO country code, USA is the 3 character ISO code and ‘United_States” is the country name. These 2 parts are separated with hyphens and spaces are replaced with underscores. You can use whatever you want here based on what text you want to appear for selection.
I would create a select field for the flag. “Stylised UI = Yes” this will allow images to be shown and will also create search using select2.
I would dynamically generate the choices for this field from the files that exist in the folder.
add_filter('acf/prepare_field/name=your-flag-field-name', 'populate_flag_field', 20);
function populate_flag_field($field) {
$choices = array();
$dir = get_template_directory().'/flags';
$files = scandir($dir);
if ($files) {
foreach ($files as $file) {
if (is_dir($dir.'/'.$file)) {
// skip folders
continue;
}
// only allow png images
$file_info = pathinfo($file_name);
if ($file_info['extension'] != 'png') {
continue;
}
// build label
$label = $fileinfo['filename'];
// pretty it up
$label = str_replace('-', ' - ', $label);
$label = str_replace('_', ' ', $label);
// add image
$label .= ' <img src="'.get_template_directory_uri().'/flags/'.$file.'" />';
// add choice
$choices[$file] = $label;
} // end foreach file
} // end if files
return $choices;
} // end function
The I would create an acf/format_value filter
add_filter('acf/format_value/name=your-flag-field-name', 'format_flag_field', 20, 3);
function format_flag_field($value, $post_id, $field) {
if ($value) {
$value = '<img src="'.get_template_directory_uri().'/flags/'.$value.'" />';
}
return $value;
}
@hube2 The problem with this:
red : <img src="url-of-red.jpg">
yellow : <img src="url-of-yellow.jpg">
Is that , when adding post type, it saved the value (red or yellow)
When you want to load the public page to include the Image (<img..) , you don’t get it , so you end up getting the value only
@hube2
I created a custom post 1, added ACF fields (image name and image to return image URL).
Then on the ACF fields groups of another custom post 2, I selected Post Object field to return ID then…. On the Add New post of the Custom Post 2, i get a drop-down (select field) of the ACF fields meant for custom Post 1.
On the public page, I used the exact code as above and I get the image correctly.
$iconImage = get_field('icon_image', $section['icon_selector']);
---
<img src="<?php echo $iconImage; ?>" alt="<?php get_field('icon_name', $section['icon_selector']); ?>">
My challenge is the Drop Down/Select on the custom post 2 to select the image. It only shows the title of the record saved in custom post 1. How can I make this select field show image also?
`

No, you asked
I am not sure how to start the next loop to get these arrays into grouped CPT display lists?
That is how you would loop over the group array and the nested posts in each group

Is this just for aesthetic reasons? because you want it to be “book” instead of “books”. If that’s the case I would leave it alone because the field already has data in it. The sub field name really does not matter.
Changing the sub field name in the DB will require changing every instance of the meta key in the DB. There are 2 entries in the DB for every field and all of them would need to be changed.
// field meta key
"{$repeater_field_name}_{$row_index}_{$sub_field_name}"
// acf reference field
"_{$repeater_field_name}_{$row_index}_{$sub_field_name}"
There really is not a way to do a search and replace unless you to it for every potential row index and this would be messy and prone to errors.
Like I said, if the reason you want to change it because you don’t like the way it looks the my suggestion is to leave it alone. I was just working on a site an noticed that I spelled a field name wrong, or I should say I spelled the label wrong and ACF added the field name based on that label. I copied and pasted the field name to my code and everything was working. I just changed the spelling on the label and left the name alone. The code is working and that’s really all that matters. Changing the field name would have been too much work.

I could be mistaken, you said
The values come from an external software so I cannot change it.
so I assumed it was not an acf field.
If you are getting the value from somewhere else and storing it in an acf field then the solutions is similar, you must test for the value you want.
$value = get_field('doors');
if ($value == 'YES')
?><div class="feature">With doors</div><?php
}
You are attempting to use ACF to get a field that is not an ACF field. The only reason that it works at all is that it is a simple text field.
Since this is not an ACF field then you need to use get_post_meta() and you need to test the value to see if it is yes or no
$value = get_post_meta($post->ID, 'doors', true); if ($value == 'YES') ?><div class="feature">With doors</div><?php }
I will test this, thanks :). BTW, what do you men is not an ACF field?
I am using ACF to create the Text field called Doors …

You are attempting to use ACF to get a field that is not an ACF field. The only reason that it works at all is that it is a simple text field.
Since this is not an ACF field then you need to use get_post_meta() and you need to test the value to see if it is yes or no
$value = get_post_meta($post->ID, 'doors', true);
if ($value == 'YES')
?><div class="feature">With doors</div><?php
}
Hi John,
My image dimensions aren’t 1000×1000, it’s actually just a portrait image but I wanted it to display with a max height of 1000px and I figured the width could then never exceed that given it’s taller than it is wider so I just did a max width of the same. I have read somewhere that you can do 1000 x 9999 aswell?
I just wanted a max height of 1000px and I don’t care what the width is because I am using object fit:cover anyway.
If I add more sizes that all use 9999 as the width, will they be considered the same ratio and show up?
If not, because I am using object fill for all my images except in the gallery, I suppose I could just make them all an equal ratio that was good enough anyway, close to 1:1 but maybe something a little more in line with Landscape or portrait.
Sorry, I appreciate your patience.
Hi John,
Sorry for my confusing posts!
I will have to try this in the morning, but to start, I made my custom image 1000px by 1000px. Even though this is a different ratio from the original size, this seems to work now?
I thought it would just choose which hit 1000px first (the width or the height) and the other would be proportionate. For example, one of my ACF fields uses my custom image size and now outputs this which seems to be doing as I described
img width=”741″ height=”1000″ src=”https://www.website.com/wp-content/uploads/2021/08/website-image-741×1000.jpg” alt=”Image of dish” followed by all the other sizes
I need to make the other images sizes more custom, they are all theme defaults except the home_portriat one of 1000px by 1000px. Is this not correct?
I have found the whole responsive images side of ACF incredibly confusing. I understand srcset and retina image when defining set images in html but I can’t get my head around how to use them with ACF.
I was expecting it to be something that looked a little more like media queries, a bit like
$home_portrait[‘sizes’][‘medium’]
@media (max-width:480px) {
$home_portrait[‘sizes’][‘small’]
}
that kind of thing (I realise this code is just completely invented but it’s just to illustrate how I thought it would work)
I also would have preferred more control because I am using object fit for images which complicates things a little.

Trying to follow your various posts but it’s a little confusing.
But, you will not be able to set the “title” attribute of an image using wp_get_attachment_image(). “title” is not one of of the attributes set by this function and is not an attribute that is accepted in the forth argument of the function. https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
This is how I create responsive images using ACF fields….
But before I do I would like to mention that in order to get WP to generate an srcset that there must me multiple images sizes that result in the same image width to height ratio. WP will only include images that are the same ratio. For example.
In order to generate an image tag that includes the “title” attribute you will need to use the WP function wp_get_attachment_image_src() and then built your own image tag.
// first get the image of the size you want.
$image_id = get_field('your-image-field'); // acf image field that returns ID
// size should be the larges image you want to show
$size = 'large';
// get the image
$image = wp_get_attachment_image_src($image_id, $size);
if ($image) {
// generate all tag
$alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
// get the image title
$title = get_the_title($image_id);
// set image class, this class is what will cause WP to generate src set
$class = 'size-'.$size.' wp-image-'.$image_id;
// generate image tag
$image_tag = '<img src="'.$image[0].'" width="'.$image[1].
'" height="'.$image[2].'" alt=" '.$alt.
'" title="'.$title.'" class="'.$class.'" />';
// this WP function will add the srcset and other attributes to the tag
wp_filter_content_tags($image_tag);
echo $image_tag;
}
Thank you both for replying.
John, unfortunately your plugin did not work. I haven’t had a chance to troubleshoot as in disable other plugins, check logs. The temporary screen doesn’t appear.
I also cranked the PHP settings by adding two zeroes to the already huge numbers I had the time-related settings to. That, and upon my advisement client switched to a higher tier hosting package, at Bluehost, and nothing has changed. Still get the same error, we simply cannot save the page.
The hosting upgrade was also a nightmare as we ended up with all sites down for hours! It was almost as if Bluehost had never ever done that before.
I told the client that we could upload all of the files that still need to be saved which is one PDF upload per row for 400 rows, via FTP, and manually copy and paste the file address into the database. I don’t wanna do that but I have to get this done with him somehow
This site was Hebrew and English site which I did layer of complexity the whole way.
The client does can use Selenium script to fill in the fields so yes I can get these fields working, the data entry part is easy. What boggles my mind is 10 fields and 400 rows all are now filled in and it’s just this one 11th field and most of those instances that needs a file uploaded to.
I will take a closer look at seeing if I can get your plug in to work John because that is exactly what we needed.
I know a little bit of mySQL but don’t write it, I know my way around phpMyAdmin though. I wonder if MySQL could be written in PHP MyaAdmin to insert the URL of each uploaded PDF into each row…
What do you think?
Yes, i do that thing like this. But here only one repeated field pass to this function, is there any way to pass multiple fields and its values like an array. It’s a combination of image and input fields or textarea.
function insert_repeater_row_attachment($files,$post_id,$mainrepeater,$repeaterfield)
{
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
require_once(ABSPATH . "wp-admin" . '/includes/file.php');
require_once(ABSPATH . "wp-admin" . '/includes/media.php');
$count = 0;
$galleryImages = array();
foreach ($files['name'] as $count => $value)
{
if ($files['name'][$count])
{
$file = array(
'name' => $files['name'][$count],
'type' => $files['type'][$count],
'tmp_name' => $files['tmp_name'][$count],
'error' => $files['error'][$count],
'size' => $files['size'][$count]
);
$upload_overrides = array( 'test_form' => false );
$upload = wp_handle_upload($file, $upload_overrides);
$filename = $upload['file'];
$parent_post_id = $post_id;
$filetype = wp_check_filetype( basename( $filename ), null );
$wp_upload_dir = wp_upload_dir();
$attachment = array(
'guid' => $wp_upload_dir['url'] . '/' . basename( $filename ),
'post_mime_type' => $filetype['type'],
'post_title' => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
'post_content' => '',
'post_status' => 'inherit'
);
$attach_id = wp_insert_attachment( $attachment, $filename, $parent_post_id );
$attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
wp_update_attachment_metadata( $attach_id, $attach_data );
}
// Repeater child field name - "file"
$file_row = array( $repeaterfield => $attach_id );
// Repeater parent field name - "attachments"
add_row($mainrepeater, $file_row, $post_id);
}
}

function my_tabout_shortcode() {
ob_start();
$tabout = get_field('tabout', 'option');?>
<div class="tabout" id="tabout"><span> <?php echo $tabout; ?> </span></div>
<?php
return ob_get_clean();
}
add_shortcode( 'my_tabout', 'my_tabout_shortcode' );
Like this?
// About us
ob_start();
function my_tabout_shortcode() {
$tabout = get_field('tabout', 'option');?>
<div class="tabout" id="tabout"><span> <?php echo $tabout; ?> </span></div>
<?php
}
add_shortcode( 'my_tabout', 'my_tabout_shortcode' );
return ob_get_clean();
Good point, here is the code to create the short code, the way we have it is that we made the option page, and from there editors will add the text. With the short code we will place it on the design website (this is about us), with its design, on the text editor (in this case (fusion builder), then theoretically it will display the text with the new look on the about us page. Right now, the text shows up on top of the content, and the design of it under it (without, ignoring any relation).
https://gesher.creativewebdesign123.com/about/
// About us
function my_tabout_shortcode() {
$tabout = get_field('tabout', 'option');?>
<div class="tabout" id="tabout"><span> <?php echo $tabout; ?> </span></div>
<?php
}
add_shortcode( 'my_tabout', 'my_tabout_shortcode' );
See for example,
<h2>[mytitle]</h2>
<h1 style=”color:red; margin:15px, width:200px”>[my_fptitle]</h1>

I am assuming you got this worked out due to your later question.

Another way to do this.
Create another field, this field does not have to be an ACF field. It will be a true/false field of sorts holding either a 1 or a 0. This flag will indicate if the event dates have passed.
Create a CRON (https://developer.wordpress.org/plugins/cron/), there may be plugins that let you do this. That queries events where the date has passed and sets this flag to 1.
Order posts by this field first, then the start and end date.

I was assuming from your code that you were using a pre_get_posts filter and that is where this code would be added if I used it.
Honestly, I would probably not use it, it means that your main query will require 3 queries and this will reduce performance. I would likely just show current and future events archive page and then build a separate page for showing past events. I would only do this if the client insisted and first I would explain that there was a potential for this slowing down the page load and make sure they understood that before I did it.
Thank you. I know more now.
But I don’t know where to add it.
To the main query (archive-event.php) or in the pre_get_posts filter?

You can only order the posts a specific field once.
The only way you can accomplish what you want to do, having past events after current future events would be to do 2 queries.
// current and future
$meta_query = array(
'relation' => 'OR',
'event_start' => array(
'key' => 'start_date',
'value' => $now,
'compare' => '>=',
'type' => 'DATETIME'
),
'event_end' => array(
'key' => 'end_date',
'value' => $now,
'compare' => '>=',
'type' => 'DATETIME'
)
);
$orderby = array(
'event_start' => 'ASC',
'event_end' => 'ASC'
);//
// past events
$meta_query = array(
'event_end' => array(
'key' => 'end_date',
'value' => $now,
'compare' => '<',
'type' => 'DATETIME'
)
);
$orderby = array(
'event_end' => 'ASC'
)
I’m not sure how else to explain this. “start_date” and “end_date” is each one field. It does not matter how many clauses you add to the meta query, the posts can only be ordered by the field once. Your query is basically returning ALL event posts, no matter what the dates are and ordering them by the first 2 clauses in your orderby. The second 2 clauses have no effect because the posts have already been ordered by the fields that they refer to.
In the end you cannot get the order that you want based on a single query and to be quire honest, I do not believe that what you want can be achieved without a significant amount of work.
There is one way that I can see this being done but it means that your main query would need to do 3 queries. I am assuming this is on the main query and in a pre_get_posts filter because you are using query->set()
// $post__in will collect the post IDs in the order to display
$post__in = array();
// query all current and future posts
// returning only an array of ID values
$current_future_args = array(
'post_type' => 'event',
'posts_per_page' => -1,
'fields' => 'ids',
'meta_query' => array(
'relation' => 'OR',
'event_start' => array(
'key' => 'start_date',
'value' => $now,
'compare' => '>=',
'type' => 'DATETIME'
),
'event_end' => array(
'key' => 'end_date',
'value' => $now,
'compare' => '>=',
'type' => 'DATETIME'
)
),
// order current => future posts how you want them
'orderby' => array(
'event_start' => 'ASC',
'event_end' => 'ASC'
)
);
$current_future = new WP_Query($current_future_args);
if (count($current_future_args->posts)) {
$post__in = $current_future_args->posts;
}
// query past events returning IDs
$past_args = array(
'post_type' => 'event',
'posts_per_page' => -1,
'fields' => 'ids',
'meta_query' => array(
'relation' => 'OR',
'event_start' => array(
'key' => 'start_date',
'compare' => 'EXISTS'
),
'event_end' => array(
'key' => 'end_date',
'value' => $now,
'compare' => '<',
'type' => 'DATETIME'
)
),
// order past posts how you want them
'orderby' => array(
'event_start' => 'DESC',
'event_end' => 'DESC'
)
);
$past = new WP_Query($past_args);
if (count($past->posts)) {
// mergs past events in post__in
$post__in = array_merge($post__in, $past->posts);
}
// set post__in and orderby for main query
if (!empty($post__in)) {
$query->set('post__in', $post__in);
$quert->set('orderby', 'post__in');
}
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.