Image Size Using Twig / Block Builder

David Newton
Home / Meta Box Builder / Image Size Using Twig / Block Builder

Custom Fields
Re-Envisioned › Support › Meta Box Builder › Image Size Using Twig / Block Builder

  • Creator
    Topic
  • October 23, 2020 at 3:30 AM #22540
    Resolved David Newton
    Participant

    This should be pretty simple, but we're still not quite finding how to make it work. We just need to control the size of an image that is being added via a field and then rendered with Twig.

    If we load it as {{ single_image_psweo3wlxf }} then it loads a thumbnail size image. How do we load it as some other WordPress/custom image size?

    Thanks for your help!

    David Newton

  • Creator
    Topic
Viewing 10 replies - 1 through 10 (of 13 total)
1 2
  • Author
    Replies
  • October 23, 2020 at 9:47 AM #22544
    Long Nguyen
    Moderator

    Hi David,

    We can access other image sizes and settings with the format:

    {{ fieldID_single_image.image_size.setting }}

    The default image sizes of WordPress are thumbnail, medium, large and more if your theme/plugin defines it.

    And find the setting here https://docs.metabox.io/fields/single-image/#template-usage.
    ID, url, width, height ...

    Use the image size and settings with the <img> tag to show the image:

    <img src="{{ single_image.large.url }}" width="{{ single_image.large.width }}" height="{{ single_image.large.height }}" alt="{{ single_image.large.alt }}">

    If you use the extension MB Views, it supports to choose the image size very easy, see https://share.getcloudapp.com/E0uryrlB.

    October 23, 2020 at 9:16 PM #22558
    David Newton
    Participant

    That's excellent! Thank you for your help with that specific topic and even more so for pointing me to the correct part of the documentation for such things going forward.

    October 23, 2020 at 9:35 PM #22559
    David Newton
    Participant

    It seems like maybe I'm still misunderstanding, though. This is what I have based on I understand you to be saying:

    Code for building block

    But, the result I get is this when I add that block:

    Results of code

    October 23, 2020 at 10:59 PM #22561
    Long Nguyen
    Moderator

    Hi David,

    Please try to use the proxy mb. to get a field value in the Twig template

    {% set my_image = mb.rwmb_meta( 'fieldID_single_image', '', post_id ) %}

{{ my_image['sizes']['medium']['url'] }}

    You can print out the array my_image to see all settings

    <pre>
{{ mb.print_r(my_image) }}
</pre>
    October 23, 2020 at 11:45 PM #22562
    David Newton
    Participant

    I'm still not getting anything back from that.

    The field ID is: single_image_psweo3wlxf

    So, I have the following under Settings -> Render Options -> Code for that field group:

    {% set my_image = mb.rwmb_meta( 'single_image_psweo3wlxf', '', post_id ) %}

{{ my_image['sizes']['medium']['url'] }}

<pre>
{{ mb.print_r(my_image) }}
</pre>

    It doesn't return anything at all right now.

    October 24, 2020 at 11:18 AM #22566
    Long Nguyen
    Moderator

    Hi David,

    There are two cases to create the single_image field:

    1. In the same block as you are doing, please use this code:
    <p>Showing block single image:</p>
{% set block_single_image =  mb.mb_get_block_field( 'block_single_image' ) %}

{{ block_single_image['sizes']['medium']['url'] }}

<pre>
{{ mb.print_r( block_single_image ) }}
</pre>

    See more in the documentation https://docs.metabox.io/extensions/mb-blocks/#render_callback.

    1. The post meta, please use the code above:
    <p>Showing post meta single image:</p>
{% set post_meta_single_image = mb.rwmb_meta( 'post_meta_single_image', '', post_id ) %}

{{ post_meta_single_image['sizes']['medium']['url'] }}
<pre>
{{ mb.print_r( post_meta_single_image ) }}
</pre>

    See more in my screen record: https://share.getcloudapp.com/OAuJjLy7.

    October 27, 2020 at 12:29 AM #22584
    David Newton
    Participant

    That did work, thank you. Is there something different that needs to be done when using groups / cloning? For all the other fields, we're able to get the right results, but with the images it's not working.

    Thanks!

    October 27, 2020 at 12:46 AM #22585
    David Newton
    Participant

    To be clear, it was working just fine as you described in your most recent response, but then inside of a group, we can't get the same thing to work.

    We've tried quite a few variations on what you wrote above and with adding "clone." in various positions, and nothing has quite worked.

    The only thing that loads anything at all is {{clone.single_image_psweo3wlxf}} but that is only loading the image ID number.

    October 27, 2020 at 9:24 AM #22591
    Long Nguyen
    Moderator

    Hi David,

    For a cloneable field or sub-field in a group, the value returns an array, so you have to use the loop to iterate over the array.

    <p>Showing block single image:</p>
{% set block_single_image =  mb.mb_get_block_field( 'cloneableID_or_groupID' ) %}
{% for item in block_single_image %}
    {{ item['sizes']['medium']['url'] }}
{% endfor %}

    Use this code to print out the array structure:

    <pre>
{{ mb.print_r( block_single_image ) }}
</pre>

    For more information, please follow the documentation
    https://twig.symfony.com/doc/3.x/tags/for.html
    https://docs.metabox.io/extensions/meta-box-group/#getting-sub-field-value

    April 8, 2021 at 5:19 AM #27036
    Robert
    Participant

    Hi Long,

    I have the same issue and for some reason I cannot get the url of medium image (single image field) in gutenberg block. I tried your method with print_r, but it just returns 1 and nothing else. Any idea what can be the problem?

  • Author
    Replies
Viewing 10 replies - 1 through 10 (of 13 total)
1 2
  • You must be logged in to reply to this topic.