Forum Replies Created

  • 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.

    {% for therapist_full_title in item %} {{ therapist_full_title.therapist_name }}
    {% endfor %}
    {% for therapist_full_title in item %}
    {{ therapist_full_title.therapist_accreditation }}
    {% endfor %}

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

  • 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?

  • 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!

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

    According to this SO post:

    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!

  • 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.'"';
  • Could you provide an example using get_field?
    I couldn’t figure out how this is meant to work..

  • 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.

Viewing 7 posts - 1 through 7 (of 7 total)