Logo image has incorrect width attribute in markup

  • Resolved bishless

    (@bishless)


    2 years, 11 months ago

    WP: 5.8.2
    Quadmenu: 2.1.9
    Cloudinary: 3.0.0

    I want my site to display a square logo at 60x60px. I’ve set the max logo height to 60px and I’ve tried uploading an image that size and an image that’s 160×160… but for either one, the markup that Quadmenu outputs looks like this:

    <img width="160" height="60" ...

    Where is that width="160" coming from? It’s causing the image to stretch out when Cloudinary processes it. It takes that html attributes for width and height and includes the dimensions in the new URL it generates. If I disable the Cloudinary plugin, the image stops being stretched, but the markup still says width="160".

    Give me a place to specify my desired width so I can include a square aspect ratio image AND enable Cloudinary?

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

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @bishless

    Please try with a different image, the one you are using is originally stretched.
    https://res.cloudinary.com/contempo-hcm/images/w_160,h_60/f_auto,q_auto/v1639592237/logomark-160/logomark-160-png?_i=AA

    Also, some plugin like the one you mention can alter the QM setting for logo height. If still can’t make it, you can simply apply a CSS script to handle logo width & height

    Thread Starter bishless

    (@bishless)

    I’ve uploaded a 60×60 image. And a 160×160 image. Both get distorted by Cloudinary *because* Quadmenu is outputting the wrong markup.

    If I disable Cloudinary, image is no longer distorted visually, but the markup still shows the wrong width dimension AND, I lose the benefits of Cloudinary for all the other images on my site.

    Please fix the logo image markup within your menu.

    Thread Starter bishless

    (@bishless)

    Example of markup in a fresh dev site with _only_ Quadmenu installed in unmodified Twenty Twenty One theme.

    I set the max logo height to 60px and used the prepopulated image for the logo.

    screenshot showing the Quadmenu logo image being rendered at 334.933x60 in page while the markup says 'width=160 height=60' ...

    Just give us a piece of UI that lets us specify the width in addition to the height?

    • This reply was modified 2 years, 11 months ago by bishless.
    • This reply was modified 2 years, 11 months ago by bishless.

    It is evident that this “Cloudinary” plugin is changing size of images or it’s not compatible with our plugin.

    If you haven’t tried yet, I would try switching to “embed” layout for the “default menu” menu theme.

    Using this layout will discard current logo image and use the one provided by theme. So this might be a solution, but your menu will need to be configured again.

    Thread Starter bishless

    (@bishless)

    **Re-read my last post**. I setup a fresh development site w/ ONLY the Quadmenu plugin installed and activated.

    THAT’s where the screenshot is from. Cloudinary is not in the equation on that site… Your default markup inserts ‘width=”160″‘ and there’s no way to change it.

    Thread Starter bishless

    (@bishless)

    I did some more experimenting to see if the max height was actually being output at all. Change it to 64 in settings, saved… Nope. HTML still says 60 for height.

    So, went poking around… in templates/logo.php of your plugin, lines 1-3:

    
<?php if ($url): ?>
  <a class="quadmenu-navbar-brand img" href="<?php echo esc_url($link); ?>"><?php printf('<img height="60" width="160" src="%1$s" alt="%2$s"/>', esc_url($url), esc_attr(get_bloginfo('name'))); ?></a>
<?php endif; ?>

    The width and height are hardcoded. /facepalm

    • This reply was modified 2 years, 11 months ago by bishless.
    Plugin Author quadlayers

    (@quadlayers)

    hello @bishless
    sebastian is no longuer working with us
    please confirm if you’re still facing this issue

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Logo image has incorrect width attribute in markup’ is closed to new replies.