Image format in Tooltip

[Lars]

Hi,

On your demo site here: http://wpshindig.com/events/ you have a proportional image in the Tooltip. On our site we see a 150×150 square cropped version of our images/logos in the Tooltip.

How do we change this to a proportional goodlooking image format as on your demo?

Thanks

[George]

Hey Lars,

To get proportional images as your tooltip thumbnail images, you should first filter the tooltip JSON array and modify what image source is used for the image – you can do this if you were to add code like in this Gist I made for you to your theme’s functions.php file:

https://gist.github.com/momnt/1fd766c56f44a22abe63

Now, if you notice, there’s a function being used here called wp_get_attachment_image_src() – this function lets you call a specific size of the image to get, so you could change the ‘thumbnail’ text in the version of the code I shared here to something like ‘medium’, ‘small’, ‘full’, etc.

These image sizes are themselves where any cropping and proportional-layout look comes from – you can learn about what sizes exist by default, and how to add your own sizes with your own settings, by reading about this function here → https://codex.wordpress.org/Function_Reference/add_image_size

If you use that code to add a custom image size, for example ‘lars-proportional-small’, then you could just change the ‘thumbnail’ text in my original Gist above to ‘lars-proportional-small’.

That should work – if you don’t notice a change in the image at first, then one extra step is required: install this awesomely-built, free plugin and run it once, it will regenerate the images on your site and cause the proper image size to be loaded in your tooltips → https://wordpress.org/plugins/regenerate-thumbnails/

There’s a lot of information here, but work with it for a while and let us know if it helps!

Thanks,
George

[Lars]

Thanks George!

Works just fine 🙂

[George]

Awesome! Thanks for the update Lars – best of luck with your project, and be sure to keep good backups of your site and database 🙂

I’ll close up this ticket for now, but if other issues or questions arise, come back and open a new ticket at any time!

Cheers,
George

[Author]

Posts