Meta Box

Image Size Using Twig / Block Builder

Support › MB Builder › Image Size Using Twig / Block BuilderResolved

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 23, 2020 at 3:30 AM #22540
    David NewtonDavid 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

    October 23, 2020 at 9:47 AM #22544
    Long NguyenLong 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 NewtonDavid 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 NewtonDavid 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 NguyenLong 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 NewtonDavid 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 NguyenLong 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 NewtonDavid 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 NewtonDavid 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 NguyenLong 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
    RobertRobert
    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?

    April 8, 2021 at 9:36 AM #27043
    Long NguyenLong Nguyen
    Moderator

    Hi Robert,

    Can you please share the code that creates the block and custom fields? I will take a closer look and check it on my site.

    April 9, 2021 at 3:22 AM #27069
    RobertRobert
    Participant

    Hello,

    This is the part of code, that works but displays only small thumbnail:

    
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:25%">                <figure class="wp-block-image size-large">{{ zdjecie_produktu }}</figure>
</div>

    What I want to do, is use medium image - thats what I tried, but it does not work:

    
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:25%">                <figure class="wp-block-image size-large"><img src="{{ zdjecie_produktu.medium.url }}"></figure>
</div>

    The field 'zdjecie_produktu' is just a regular 'Single Image' custom field, thumbnail size is set to 'Medium'. No other customizations are made.

    As I mentioned, when I try to output the complete array, I just get '1' as the output.

    April 9, 2021 at 1:00 PM #27084
    Long NguyenLong Nguyen
    Moderator

    Hi Robert,

    Have you tried to follow this reply https://support.metabox.io/topic/image-size-using-twig-block-builder/#post-22566?

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.