eStore – Button image URL is very low resolution

[dennas]

The text on my button images is super-chunky! It makes my site look pretty bad. Is there a way to make a larger image smaller on the page, so that the resolution is like everything else?

[wzp]

Please provide a LIVE LINK to a test page with the button in question.

[dennas]

[https://theartinstructor.com/full-year-offer/]

[wzp]

I don’t understand what is supposed to be wrong, with these buttons:

[https://pasteboard.co/H4Ca2sc.png]

[admin]

The plugin simply uses whatever image you give it. Make a new button image according to what you want then use that image in the plugin’s configuration.

[dennas]

You must not have a high-res monitor. The image you sent looks quite bad to me. I forgot so quickly how things used to look after getting my high res laptop a few years ago. If you view this on a tablet or phone, you will notice the difference.

So many plugins now have a double pixel rate for retina images, because the screen resolution is so high. But these buttons are set to be very small, at only 65 px high so that they look like a good size for a button. If I make them 130 px high, they become double-sized buttons and make the layout look weird.

The way retina or high res is usually handled, is to set an actual size for the image to display:

<div style=”width:150px; height:200px”></div>

And then use an image that is double: 300px x 400px, so on high res displays you see a high res image in the smaller space. It looks crisp. So is there a way to add CSS to the button images for products that will restrain the size that the button displays?

thank you

[wzp]

You must not have a high-res monitor.

On the contrary, my screen resolution is 1920 by 1080.

The way retina or high res is usually handled, is to set an actual size for the image to display:

Please see the reply from @admin.

[dennas]

I guess I do not understand how to add the code, which I show in my last reply, to an image that is set via the plugin settings page and a field, instead of directly in the page. All I know to do is add the image in the field. Can I add code in that field too? If so what would that look like?

All I know is to add an image, and then it displays at a standard low resolution

[admin]

You shouldn’t need to add any code. Whatever image you upload, will get used by the plugin. The exact same resolution that you upload will be used. Are you saying the image you are using look different in your computer but after you upload it the quality goes does down?

I am going to send you an email so you can send me the original image from your computer so I can check what the difference is after you upload the image.

---

Update: Below is the updated response from the user.

I did not know that “editing” the size of an image in the WordPress library only changed the display size and not the actual image. It occurred to me to try it and see, and I found out that I can change the size in the library and then these display at high resolution.

[Author]

Posts