Footer widgets: Images not sized correctly!

You need to change your image style attribute.

Currently it is like:

Change to:

Here is a screenshot with corrected style values for the first image of the first column. You need to do the same thing for all.

https://prnt.sc/ei5k53

What you need to do:
1. Remove img which occurs before style="..." for each image
2. Change width="94" height="141" to width="100%" height="auto"
3. Remove ?w=100%25 appearing at the end of each src attributes. I don’t think you need this unless there is a specific reason you have added this for.

Let me know if this resolves your issue.

Thank you for the great info. However, I have not added those attributes. Here is a snippet of code copied directly from my footer widget entry area (for the same image you’ve referenced):

<A HREF="https://www.hdofscottsdale.com" TARGET="_blank"><IMG SRC="https://ianeric.com/wp-content/uploads/2016/11/harleysundayslong2.jpg" align="center" width="100%" img style="border: 3px solid orange"></A>

That’s all there is. I currently have 4 images per column, and I separate them using a double <BR> tag at the end of each image to add a “space” between them.

I’ve used this same basic code structure for a long time without issue. I have no idea where those additional attributes are coming from!

Then you can make the above mentioned changes at least for one image in your above snippet first and then paste it at least for one. Let me know how it goes.

I’m sorry if I’m not understanding, but where exactly would you suggest I make these changes?

The copied snippet I posted already includes the “width=100%” attribute (as well as an “align=”center” attribute), yet somewhere (I have no idea where), it’s being changed to the fixed image size you found with the Inspector.

Really hard to understand. Is the snippet you pasted above all you are getting or there is anything else? Where are you generating these snippets from? Is this possible to share?

Ok sorry if I wasn’t clear – but the snippet is from what I have entered directly in the “widget” section of my WordPress dashboard; Appearance > widgets > First footer area (I also have 2nd and 3rd footer areas being used).

Here’s a screenshot if it helps: https://ianeric.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-10-at-3.21.19-AM.png

The entire HTML entered in that first footer area is as follows:
<A HREF="https://www.hdofscottsdale.com" TARGET="_blank"><IMG SRC="https://ianeric.com/wp-content/uploads/2016/11/harleysundayslong2.jpg" align="center" width="100%" img style="border: 3px solid orange"></A><BR><BR><A HREF="https://www.nicantonis.com" TARGET="_blank"><IMG SRC="https://ianeric.com/wp-content/uploads/2017/03/nicantonis-widget.jpg" width="100%" align="center" img style="border:3px solid #00F500"></A><BR><BR><A HREF="https://www.jjmadisons.com" TARGET="_blank"><IMG SRC="https://ianeric.com/wp-content/uploads/2016/05/JJmad-long.jpg" width="100%" align="center" img style="border:3px solid orange"></A><BR><BR><A HREF="https://www.brasstapbeerbar.com/mesa" TARGET="_blank"><IMG SRC="https://ianeric.com/wp-content/uploads/2016/05/brasstap-long.jpg" width="100%" align="center" img style="border:3px solid red"></A>

This is the code I’ve used for quite some time to place clickable images in these footer columns, centered, with a 100% width so they display properly on mobile and auto-resize if I decide to use 4 columns, etc. I have no clue why you are finding those new HTML attributes, but everything was fine at least up until a few days ago when I rearranged some images. Everything displayed perfectly at that point. Tonight, they’re suddenly resized and no longer centered. I’m not sure, but I think there may have been a WordPress core update recently, and perhaps something’s gone glitchy between that update and the Parabola theme?

What I can see from the generated snippet is an addition img attribute with each image tag! What is this for I don’t understand!

However, let’s try this:

If you are using a child theme (always recommended), then create a file called functions.php at your child theme’s root and put the following code into that.

add_filter( 'post_thumbnail_html', 'remove_image_dimension_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_image_dimension_attribute', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_image_dimension_attribute', 10 );

function remove_image_dimension_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}

In case you are not using a child theme, then your main theme should have one function.php in the root of theme folder. Open it and add the above snippet into it.

The above code prevents WP to automatically add image dimensions like width="94" height="20" etc.

Save the file and refresh the browser. Go to page view source and see if those dimensions are removed. If yes, now things should work your way. If removed and still images are still coming up as they were, then you can modify image attributes in widget box the way I mentioned in my previous message.

Let me know if this makes things any better for you!

Well – that didn’t work at all. In fact, it “broke” my site with a “syntax error – unexpected $end”. Thanks for trying – I certainly don’t intend to sound unappreciative!

Again – I have no clue why these additional attributes are being added, nor where I can change them. I’ve already got the “width=100%” command in my widget box, and it’s being ignored/overridden, along with the “align=center” command.

I’m truly at a loss.

Just FYI – I was able to get in and fix my site by removing that code you recommended.

I’ve found a workaround – for now. I set the width to 300%. The images now fit the columns. Still looks a bit off on mobile version, but it’ll work temporarily. I also fixed the centering issue by using a universal <center>...</center> on each widget box, instead of the align="center" attribute. I may change the width to 275% or similar to try to center them better on mobile view.

I’m still fairly convinced that there is a theme issue here….somehow, Parabola is “shrinking” the widget size to about 1/3 of its actual width, so using 100% width command only brings the image to about 100 pixels wide.

I appreciate your help on this – and hoping Cryout does a theme update soon to resolve!

Good to hear you solved it!
As far as ‘syntax error – unexpected $end’ is concerned it seems probably something missed in the code. That code is work very well and I have it implemented in my number of sites.

The most important thing is you have a work-around finally, even it is temporary ??

Well I finally found the issue – it is Jetpack’s “Photon Image Optimization” causing the image resizing. Turning off this feature allowed me to once again size my images to my liking.