blurry thumbnails

  • Resolved ronevansspace

    (@ronevansspace)


    4 months, 2 weeks ago

    Hello all, I’m facing some blurry thumbnail images in WordPress using the event calendar newsletter plugin and going into Mailchimp. I don’t think it is the plugin — I think it is WordPress settings on image compression, though I have disabled everything that might be contributing, forced resizing of the thumbnails, etc. You can see the blurry thumbnail here:

    https://sjdastg2024.wpenginepowered.com/wp-content/uploads/DTSJ-Calendar-19-1-150×150.jpg

    I’ve worked out a possible workaround — in the code, instead use the 300×300 image:

    https://sjdastg2024.wpenginepowered.com/wp-content/uploads/DTSJ-Calendar-19-1-300×300.jpg

    and then add width and height attribute to scale the 300×300 to 150×150 for use in Mailchimp: 

    <img src="https://sjdastg2024.wpenginepowered.com/wp-content/uploads/DTSJ-Calendar-19-1-300x300.jpg" width="150" height="150"alt="" />

    This works great and looks very nice in Mailchimp. I realize that the file size is larger for the 300×300 images. My question is, how can I add the width=”150″ and height=”150″ to each image in the html results in the plugin, so that when I copy/paste in the html code from the plugin into Mailchimp, all 300×300 images will be displayed at 150×150? Thank you!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Brian Hogg

    (@brianhogg)

    Hi @ronevansspace !

    The size of image used can be adjusted under Event Calendar Newsletter > Settings. There’s a note there about re-generating thumbnails, but there’s a number of reasons it might appear blurry. For example your hosting might be automatically compressing the images, or a plugin or the theme on your site doing the same.

    As for customizing the HTML, you could use the {event_image_url} tag when creating a Custom e-mail design:

    https://eventcalendarnewsletter.com/docs/tags/#event_image_url

    So you could use this to manually enter the img tag with the width/height added.

    Hope that helps! If so feel free to mark this conversation as resolved ??

    Thread Starter ronevansspace

    (@ronevansspace)

    Hi, Brian — thank you for your response. But I’m not seeing how this works. Are you saying I should do something like:

    {event_image_url width=”150″ height=”150} or something? That doesn’t seem to work. If I just use the {event_image_url} tag, I get the url in the output, but it doesn’t display any images, just the url.

    I’d like to just be able to add width=”150″ height=”150″ to the template code, so that it affects the output of all of the images used in the many events that I’m trying to output. I’m hoping you don’t mean that I need to manually go in an add the width and height info to every single image somehow. That would be.. a lot. I guess I could do a find and replace on the html results. ??

    Thanks!

    • This reply was modified 4 months, 2 weeks ago by ronevansspace.
    Plugin Author Brian Hogg

    (@brianhogg)

    Hi @ronevansspace !

    In the documentation there’s an example of adding the HTML for the image tag, and using the {event_image_url} tag within it. For example:

    <img src="{event_image_url}">

    In your case you’re also wanting to add in the width/height:

    <img src="{event_image_url}" width="150" height"150">

    This would need to be done in the “Text” tab of the custom editor since if you put it in the “Visual” tab, it’ll just literally write <img… instead of showing an image.

    Hope that clarifies! ??

    Thread Starter ronevansspace

    (@ronevansspace)

    That did it, thank you!

    • This reply was modified 4 months, 2 weeks ago by ronevansspace.
    Plugin Author Brian Hogg

    (@brianhogg)

    That’s great to hear!

    If you’re happy with the plugin and support, we’d love it if you could take a moment to write a quick review. It’d be greatly appreciated ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.