• optimystery

• in reply to: Multiple empty tags on a simple text field
• July 27, 2020 at 9:00 pm

I figured out that tags need to be added outside the for loop, and each field can be wrapped in a separate for loop. Works as expected now.

<h3>
<b>
{% for therapist_full_title in item %} {{ therapist_full_title.therapist_name }}
{% endfor %}
</b>
{% for therapist_full_title in item %}
{{ therapist_full_title.therapist_accreditation }}
{% endfor %}
</h3>

(edit: code format was stripping out one of the fields)

• optimystery

• in reply to: Flexible field is appearing twice on admin page
• February 13, 2020 at 8:33 am

I had to manually delete a json file that had another version of the field group.
I tried renaming the field and then reverting it back to the original name.
For some reason the list of fields in admin showed one group with that name but the page was pulling in both versions.

Maybe it’s a bug?

• optimystery

• in reply to: Cannot get srcset to output anything
• March 29, 2019 at 5:27 am

One last note is that I found it very useful to disable the http cache in FF Developer.
Now I can quickly test different viewports without worrying about whether the image is cached or not 🙂

Thanks for the explanation. That makes sense!

• optimystery

• in reply to: Cannot get srcset to output anything
• March 29, 2019 at 5:09 am

I was following the MDN example, which explicitly set the sizes, but it seems 100vw is sufficient.

According to this SO post:
https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working

it seems like browser cache hides the results. Testing FF Developer in Incognito showed the correct images loading in Network tab.

Thanks for your help, and hope this info is useful for others. It may be worth adding to the docs!

• optimystery

• in reply to: Cannot get srcset to output anything
• March 29, 2019 at 4:32 am

Hm, I’ve tried this. Re-uploaded my images but still only 1 size is being output in the sizes attribute

Isn’t $image_size = ‘project-full’; effectively saying to use only that image size?

Seems to be the same thing happening with this function:

function awesome_acf_responsive_image($image_id,$image_size,$max_width){

	// check the image ID is not blank
	if($image_id != '') {

		// set the default src image size
		$image_src = wp_get_attachment_image_url( $image_id, $image_size );

		// set the srcset with various image sizes
		$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );

		// generate the markup for the responsive image
		echo 'src="'.$image_src.'" srcset="'.$image_srcset.'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';

	}
}

• optimystery

• in reply to: Cannot get srcset to output anything
• March 29, 2019 at 4:06 am

Could you provide an example using get_field?
I couldn’t figure out how this is meant to work..

• optimystery

• in reply to: Cannot get srcset to output anything
• March 29, 2019 at 3:37 am

I went through all the sizes and made sure they were exactly 3:2 to the pixel.
I was adding new images after changing these, but still had to run regenerate thumbnails to get this to work. The srcset now appears, but the code output is:

<img width="1320" height="880" src="https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048.jpg" class="attachment-project-full size-project-full" alt="test alt" srcset="https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048.jpg 1320w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-732x488.jpg 732w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-768x512.jpg 768w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-540x360.jpg 540w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-1500x1000.jpg 1500w" sizes="(max-width: 1320px) 100vw, 1320px" />

Should the sizes attr not output all of the available sizes, or should this be specified like an array?

Currently the same full size image is being served everywhere.