Support › MB Builder › Image Size Using Twig / Block BuilderResolved
- This topic has 13 replies, 3 voices, and was last updated 3 years, 11 months ago by
Long Nguyen.
-
AuthorPosts
-
October 23, 2020 at 3:30 AM #22540
David Newton
ParticipantThis 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 #22544Long 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,largeand 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 #22558ParticipantThat'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 #22559ParticipantIt 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 #22561ModeratorHi 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 #22562ParticipantI'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 #22566ModeratorHi David,
There are two cases to create the
single_imagefield:- 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 #22584ParticipantThat 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 #22585ParticipantTo 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 #22591ModeratorHi 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-valueApril 8, 2021 at 5:19 AM #27036Robert
ParticipantHi 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 #27043ModeratorHi 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 #27069ParticipantHello,
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 #27084ModeratorHi Robert,
Have you tried to follow this reply https://support.metabox.io/topic/image-size-using-twig-block-builder/#post-22566?
-
AuthorPosts
- You must be logged in to reply to this topic.