Custom Fields
Re-Envisioned › Support › Meta Box Builder › Image Size Using Twig / Block Builder
- This topic has 9 replies, 2 voices, and was last updated 4 months ago by
Long Nguyen.
-
CreatorTopic
-
October 23, 2020 at 3:30 AM #22540
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
-
CreatorTopic
-
AuthorReplies
-
October 23, 2020 at 9:47 AM #22544
Long Nguyen
ModeratorHi 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 #22558David Newton
ParticipantThat’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 #22559David Newton
ParticipantIt seems like maybe I’m still misunderstanding, though. This is what I have based on I understand you to be saying:
But, the result I get is this when I add that block:
October 23, 2020 at 10:59 PM #22561Long Nguyen
ModeratorHi 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 #22562David Newton
ParticipantI’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 #22566Long Nguyen
ModeratorHi David,
There are two cases to create the
single_image
field:- 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.
- 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 #22584David Newton
ParticipantThat 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 #22585David Newton
ParticipantTo 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 #22591Long Nguyen
ModeratorHi 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 -
AuthorReplies
- You must be logged in to reply to this topic.