Support

Account

Home Forums Backend Issues (wp-admin) Issues modifying the relationship results (with custom image sizes)

Solving

Issues modifying the relationship results (with custom image sizes)

  • Hello @elliot,

    I’m trying to use the acf/fields/relationship/result filter to modify the relationship results (the tests with your provided code are OK), and when I try to use some WordPress custom image size, the images aren’t displayed.

    I’ll try to reproduce my steps below:

    My code to create a new image size:
    add_image_size( 'new_image_size_for_acf', 120, 60, true );

    My code to modify the relationship results:

    function my_new_acf_relationship_result( $html, $post ){
    	$image = get_field('my_image_field_name', $post->ID);
    	if( $image ){
    		$html = '<img src="' . $image['sizes']['new_image_size_for_acf'] . '" /> ' . $html;
    	}
        return $html;
    }
    add_filter('acf/fields/relationship/result/name=my_relationship_field_name', 'my_new_acf_relationship_result', 10, 2);

    With this code, after reloading the page that has the relationship field, I notice that the ajax try to load the images, but it fails.

    Looking this at Google chrome, the DOM inspector shows at the ul.relationship_list itens an anchor element with only two spans (<span class=”relationship-item-info”></span> and <span class=”acf-button-add”></span>) and the item label. Nothing else, neither the ‘custom image size’ url.

    In Firefox, the inspector shows me something a little bit different.
    Before the <span class=”relationship-item-info”></span>, an image element, like this:

    <img class="mdwnthatdslonjgbavxs" src="http://local-dev/site-name/wp/wp-content/uploads/2014/02/image_name_2560x1440-120x60.jpg"></img>

    For me, it seems strange not only the class (it isn’t in the code provided), but the closing tag of the image element.

    When trying to show the thumbnail size or other default size, everything works fine.

    Trying to add to the results only a url (without the img element markup), it’s ok too:
    $html = $image['sizes']['new_image_for_acf'] . ' / ' . $html;

    I wonder this could be a frontend issue?

    Thanks for your attention!

  • Hi @augusto

    Can you please explain what you mean by:
    With this code, after reloading the page that has the relationship field, I notice that the ajax try to load the images, but it fails.

    Can you use inspector to inspect the AJAX response? What is the JSON returned?

    Thanks
    E

  • Hello @elliot,
    thanks for your attention!

    the console ajax error responses are shown in the image below:

    https://www.dropbox.com/s/m3a9c8igkzh9j5p/Captura%20de%20tela%202014-02-12%2013.14.19.png

    in firefox, this is the markup shown in the elements console (the image url is correct, but look that there is a “qbfrdtrjcpyjcqxlodhz” class in the img element).

    https://www.dropbox.com/s/7v9jo4ptyvtu4bn/Captura%20de%20tela%202014-02-12%2013.22.27.png

    In this case, I have only two relationship itens.
    If I access the img url link, the image shows up.

    Additional infos: running in a local server (MAMP)

  • Hi @augusto

    When any AJAX request is sent, you can view the response data like in the attachment bellow. It is important to see what the relationship field is returning.

    This will allow you to determine if the issue is in the PHP / JSON, or if the problem lies somewhere else such as JS.

    Thanks
    E

  • Hello @elliot,

    sorry about that, I had never used this feature before!

    this is the admin-ajax.php html response:
    {"next_page_exists":0,"html":"<li><a href=\"http:\/\/dev\/spa\/wp\/destaque\/destaque-1\/\" data-post_id=\"36\"><img src=\"http:\/\/dev\/spa\/wp\/wp-content\/uploads\/2014\/02\/02082_apeacefulscottishevening_2560x1440-120x60.jpg\" \/><span class=\"relationship-item-info\"><\/span>Destaque 1<span class=\"acf-button-add\"><\/span><\/a><\/li><li><a href=\"http:\/\/dev\/spa\/wp\/destaque\/destaque-2\/\" data-post_id=\"38\"><img src=\"http:\/\/dev\/spa\/wp\/wp-content\/uploads\/2014\/02\/02014_thisoldhouse_2560x1440-120x60.jpg\" \/><span class=\"relationship-item-info\"><\/span>Destaque 2<span class=\"acf-button-add\"><\/span><\/a><\/li>"}

    and the attached image shows the json response (think you need some additional info about this JSON reponse, correct?)

  • Hi @augusto

    The json shows a correct img tag:
    <img src=\"http:\/\/dev\/spa\/wp\/wp-content\/uploads\/2014\/02\/02082_apeacefulscottishevening_2560x1440-120x60.jpg\" \/>

    Perhaps the URL is incorrect?
    Please make sure the image you are adding to the relationship HTML is vaild.

    Thanks
    E

  • Hello @elliot, thanks for your response!

    Definitely it’s correct.
    Just try to access here (the local url http://dev/spa/wp/wp-content/uploads/2014/02/02082_apeacefulscottishevening_2560x1440-120×60.jpg), and it’s ok!

    For now, I’m using one of the default WP sizes (medium), and adjusting the size with css.

    I’ll upload the project to the production server, and will test if it could be a local server problem (MAMP). Will post here the results.

    Thanks

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

The topic ‘Issues modifying the relationship results (with custom image sizes)’ is closed to new replies.