WordPress.org

Forums

Image Widget
[resolved] How to Make Images responsive? (12 posts)

  1. hilkendesign
    Member
    Posted 2 years ago #

    Hi,

    I am using the image widget within my home widget space on the responsive theme. I have custom sized them to 265px x 265px which looks perfect on my desk top computer but they are slightly too big when I view them on my iPhone sitting outside the widget box. How can I make the images responsive without reducing the size overall?

    Thanks
    Lou

    http://wordpress.org/extend/plugins/image-widget/

  2. jedifunk
    Member
    Posted 2 years ago #

    I have roughly the same question. I'm using Bootstrap on a project and the images are breaking out of the container area.

    It looks like the plugin is adding an explicit width & height to the <img> tag itself. If these were not there we could use width:100% and height: auto for responsive sizing.

    Thoughts?

  3. hilkendesign
    Member
    Posted 2 years ago #

    Ok so I have worked this out...

    I reduced my image sizes to the exact size I wanted, to have three images on the home widget area I reduced the image size to 275 x 275px in the image edit area in word press. Then deleted the old images that were sized at 700 x 700px and uploaded the new reduced sized images to the widget area. Make sure the images size in the widget area is set to custom and in the image size box put 0 in both height & width boxes, this will make them responsive on the iPhone...

    I hope this has helped anyone else out with the same issue :-)

    Lou

  4. colourstone
    Member
    Posted 2 years ago #

    Save yourself all of the work above.
    I would suggest the following... it will work everywhere.

    Go to image-widget.php and change line 284-286 from this:

    if (!empty($instance['width'])) {
    			$attr['style'] .= "max-width: {$instance['width']}px;";
    		}

    to this:

    if (!empty($instance['width'])) {
    			$attr['style'] .= "max-width: 100%;";
    		}

    I would also suggest that the author either change this or make an option for folks to change it.

    Good luck!
    Brent

  5. Peter Chester
    Modern Tribe
    Plugin Author

    Posted 2 years ago #

    Hi Brent, thanks for offering a solution. I haven't had time to experiment with the CSS to see what the right answer is in terms of the plugin itself but as to your solution, I strongly encourage people to use filters and actions instead of modifying code so that upgrades are easy and painless. Here's some code that you could put in a functions.php file of your theme to do the same thing without modifying the code:

    function responsive_image_widget( $attr = array() ) {
    	$attr['style'] = "max-width: 100%;";
    	return $attr;
    }
    add_filter( 'image_widget_image_attributes', 'responsive_image_widget' );
  6. Peter Chester
    Modern Tribe
    Plugin Author

    Posted 2 years ago #

    Though i'm wondering if it should really be:

    function responsive_image_widget( $attr = array() ) {
    	$attr['style'] = 'max-width: 100%; height: auto;';
    	return $attr;
    }
    add_filter( 'image_widget_image_attributes', 'responsive_image_widget' );
  7. colourstone
    Member
    Posted 2 years ago #

    Hi Peter.
    Thanks for your input. I sure wasn't trying to step on any toes here, just trying to help solve the same issue that I had.
    I am by no means a php or WP expert, I only know some responsive CSS. I actually tried what you said and I'm sure that it's probably correct but unfortunately it didn't work for me. But I would love a correct solution. Actually I see no reason at all why you couldn't update the plugin. Would it be an issue for anyone not to have the max-width? Is that a possibility?
    Thanks!

  8. colourstone
    Member
    Posted 2 years ago #

    Sorry Peter, I take that back.
    The first code worked and the second one didn't.
    Any idea on why?

  9. colourstone
    Member
    Posted 2 years ago #

    My problem! It was a cache issue on my end!
    Sorry all, Peter's solution is perfect!

  10. Peter Chester
    Modern Tribe
    Plugin Author

    Posted 2 years ago #

    heh! Thanks Brent!

  11. Doug
    Member
    Posted 2 years ago #

    Peter,

    Thank you and thanks also to Brent for the update on how to make the Image Widget responsive!

    Namasté,
    Doug

  12. Anthony Somerset
    Member
    Posted 2 years ago #

    Its probably a good idea to wrap the functions.php snippet in a check to see if the plugin is activated and available so theres no errors if for some reason the code becomes active on a site that doesnt have the plugin activated

    this works well for me as well

    can we feature request this in as an optional setting in the plugin itself?

Topic Closed

This topic has been closed to new replies.

About this Plugin

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

About this Topic