Image Widget
[resolved] Where to edit code to make image size responsive (6 posts)

  1. Opally
    Posted 3 years ago #


    I read all the forum support threads and readme.txt and "other notes" but still don't see explicit instructions on how to convert this plugin to make the image size responsive.

    What I've gathered so far is that I need to add this code somewhere:

    image_widget_image_width = "100%";
    image_widget_image_height = "auto";

    but when I add it to my theme's customization of widget.php I get a parsing error.

    I need more than a smiley face to see how to implement these filters:
    (from readme.txt)


    Filters the display width of the image. Hint: override this to use this in responsive designs :)
    Accepts additional $args and $instance arguments.


    Filters the display height of the image.
    Accepts additional $args and $instance arguments.

    I suppose I can copy over widget-admin.php and hard code these settings into the Custom fields, but I had hoped there was a nicer way to make the plugin image responsive.

    Thank you for any guidance; I see that other people are looking for the answer to this question.


  2. Opally
    Posted 3 years ago #

    Easy enough to add a responsive select option, but not obvious to me yet where to set the $size values for it (100% width, and auto height.)

    in widget-admin.php, under $possible_sizes = apply_filters

    add near the bottom:

    'responsive'=> __('Responsive', 'image_widget'),

    But where to code in the values... hmm...

    Here's what does NOT work:
    in image-widget.php in private function get_image_size( $instance )

    if (!empty( $instance['size'] ) && $instance['size'] == 'responsive' ) {
    $instance['width'] = apply_filters( 'image_widget_image_width', abs( $instance['width'] ), '100%', $instance );
    $instance['height'] = apply_filters( 'image_widget_image_height', abs( $instance['height'] ), 'auto', $instance );

    but I don't see how to load these filter values into $size. Can't be that hard to set these filters?

  3. Cynthia Pereira
    Posted 3 years ago #

    Don't need to modify the plugin to make image size responsive.

    Insert the image normally;
    In "Size" select "Custom";
    Set the "Width" and "Height" to "0";

    Insert this in your CSS code:

    img {
         border: 0 none;
         max-width: 100%;
         vertical-align: middle;
  4. Opally
    Posted 3 years ago #

    Brilliant, Cynthia! Thank you so much!

    As my theme is already responsive, all I need to do is follow your Custom size instructions. I didn't even need to edit the CSS. Wonderful!

    It would still be a nice feature for this plugin to support the responsiveness that's showing up in more and more themes. Entering "0" is wonky, but I'm happy that it works.

    Again, muchas gracias!

  5. Peter Chester
    Modern Tribe
    Plugin Author

    Posted 3 years ago #

    Cynthia, that's fantastic!!!

  6. rwilki
    Posted 3 years ago #

    Great. I will try that and see how it works for me. Thanks so much!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Image Widget
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic