nk-crew / lazy-blocks

Use Lazy Blocks plugin to rapidly build custom blocks without ever leaving your WordPress editor
https://www.lazyblocks.com/
GNU General Public License v2.0
337 stars 41 forks source link

Image sizes #68

Open mattpilott opened 5 years ago

mattpilott commented 5 years ago

Could we please get an image size selection and urls for all sizes

thanks

bfiessinger commented 5 years ago

73 could cover this

iannacone commented 5 years ago

hi, i created an handlebar helper for it:

$handlebars->registerHelper('img', function($img) {

    $srcset = wp_get_attachment_image_srcset($img['id']);
    $info = wp_get_attachment_image_src($img['id'], 'large');
    // $width = $info['width'];
    $width = $info[1];

    return '<img src="' . $img['url'] . '" alt="' . $img['alt'] . '" class="wp-image-' . $img['id'] . '" srcset="' . $srcset . '" sizes="(max-width: ' . $width . 'px) 100vw, ' . $width . 'px" />';

});
iannacone commented 5 years ago

if you have to do something more complicated you can push a variable inside the handlebar context:

$handlebars->registerHelper('img-metadata', function($img, $id, $options = null) {

    $metadata = wp_get_attachment_metadata($img['id']);
    $options['context']->push([$id => $metadata]);

});

usage: {{img-metadata my_image_variable 'my_new_image_variable_name'}}

pixeldesignstudio commented 4 years ago

Pleeeease add this as an easy option!! I don't know how to use those handlebars.

bfiessinger commented 4 years ago

Pleeeease add this as an easy option!! I don't know how to use those handlebars.

You can use PHP code as well if you don't want to use handlebars. https://lazyblocks.com/documentation/blocks-code/php/

pixeldesignstudio commented 4 years ago

Pleeeease add this as an easy option!! I don't know how to use those handlebars.

You can use PHP code as well if you don't want to use handlebars. https://lazyblocks.com/documentation/blocks-code/php/

Thx, I tried but I think I am too stupid for this and I am not a beginner.

rawsta commented 4 years ago

When using PHP, have you tried this?:

<?php
$image = get_lzb_meta( 'control_meta_name' );
echo wp_get_attachment_image( $image['id'], 'large');

that should give you a bit more control over the sizes.

pixeldesignstudio commented 4 years ago

When using PHP, have you tried this?:

<?php
$image = get_lzb_meta( 'control_meta_name' );
echo wp_get_attachment_image( $image['id'], 'large');

that should give you a bit more control over the sizes.

Yes, I managed to do it by the PHP handle. But switching the complete code to PHP instead of handlebars is a bit of a turndown.

netzgestaltung commented 3 years ago

Hi there, just in case someone else is searching for that topic:

I made a helper that implements wp_get_attachment_image. https://github.com/netzgestaltung/wordpress-snippets/blob/master/lazyblocks.php

Usage: {{{ wp_get_attachment_image control_name 'thumbnail' }}}

/**
 * Additional lazy blocks Handlebars helper
 */
function myPlugin_lazyblocks_handlebars_helper($handlebars){

  /**
   * wp_get_attachment_image Handlebars helper
   * @link https://github.com/nk-o/lazy-blocks/issues/68
   * @see  https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
   * 
   * @example
   * {{{ wp_get_attachment_image control_name 'thumbnail' }}}
   */
  $handlebars->registerHelper('wp_get_attachment_image', function($image, $size=null){
    if ( isset($image['id']) ) {
      return wp_get_attachment_image($image['id'], $size);
    }     
  });
}

// lazy block Handlebars helper
add_action('lzb/handlebars/object', 'myPlugin_lazyblocks_handlebars_helper');  
claytonschase commented 2 years ago

@pixeldesignstudio not sure if you were needing to accomplish the same thing that I was working on but I found a pretty solid solution for selecting the sizes in the frontend block settings.

I created a dropdown control and assigned the default image options and values so the user can choose the appropriate size when adding the block. Then using the below code in the block I just output the user selected size. Seems to work great. Anyway, I hope this helps anyone else trying to achieve the same thing.


<?php
$size = $attributes['image-size'];

if ( isset( $attributes['image']['id'] ) ) {
    echo wp_get_attachment_image( $attributes['image']['id'], $size );
}
?>