Works on JPG but not PNG or SVG files

  • Resolved dwaynetorn

    (@dwaynetorn)


    4 years, 6 months ago

    Hey team,

    We have the plugin implemented on a DIVI elegant themes website,
    I can see it half working but it only seems to work on jpg images not png or SVG files

    Why would that be, would have thought it would pick up anything in an image tag

    Secondly, I was hoping to set it up to enhance and add to the images in the event that the alt text is not populated, but appears to be replacing the alt text for the jpg images where it does work

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Pagup

    (@pagup)

    4 years, 6 months ago

    Hi,

    Thank you for contacting our support.

    About your issue, we just looked at your website, and all images, including png, svg, jpg have Alt texts (generated by Bialty plugin).

    Please check your HTML code, look for “Alt=” and you will find all of them populated by Bialty plugin.

    Or is there a specific page where Bialty is not working properly. If so, please provide thess URLs so that we can at this closely.

    About your second question, when using Bialty plugin, you can chose between 2 options:

    “Replace only missing Alt tags” (so when “Alt=” is empty)
    “Replace only already defined Alt tags” (so when “Alt=” is defined with content)

    or you can select both options…

    Meaning that you can choose to create alt tags only for those missing.

    Let us know if it helps.

    Regards

    Thread Starter dwaynetorn

    (@dwaynetorn)

    4 years, 6 months ago

    You will see in the code pull from the website below that the jpg has the alt added and the png doesnt, this is also the case for svg files.

    How does the plugin work? does it do a search and replace of Alt= tags, or will it check that the image has an Alt= at all then add it. unsure if the caching tools is cleaning up the code when minifying 

    <div class="et_pb_with_border et_pb_row et_pb_row_6 et_pb_equal_columns et_pb_gutters1">
    <div class="et_pb_column et_pb_column_1_2 et_pb_column_13  et_pb_css_mix_blend_mode_passthrough">

        <div class="et_pb_module et_pb_text et_pb_text_9 et_pb_bg_layout_light  et_pb_text_align_left">

            <div class="et_pb_text_inner">
                <p>Integrated Marketing Communications carefully link all of your digital marketing and promotional tools to work together with one key message</p>
            </div>
        </div>
        <!-- .et_pb_text -->
        <div class="et_pb_module et_pb_text et_pb_text_10 et_pb_bg_layout_light  et_pb_text_align_left">

            <div class="et_pb_text_inner">
                <p><a href="https://tornmarketing.com.au/property-marketing/land-estate-marketing-case-study-2/?utm_source=Linkedin&utm_medium=CPC&utm_content=Looking_At_You&utm_campaign=Retargeting_Display">View full case study ></a></p>
            </div>
        </div>
        <!-- .et_pb_text -->
        <div class="et_pb_module et_pb_image et_pb_image_7">

            <span class="et_pb_image_wrap "><img class="lazy-loaded" src="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x.jpg" data-lazy-type="image" data-src="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x.jpg" srcset="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x.jpg 1272w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-300x215.jpg 300w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-768x549.jpg 768w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-1024x733.jpg 1024w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-610x436.jpg 610w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-1080x773.jpg 1080w" data-srcset="" sizes="(max-width: 1080px) 100vw, 1080px"><noscript><img src="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x.jpg" srcset="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x.jpg 1272w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-300x215.jpg 300w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-768x549.jpg 768w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-1024x733.jpg 1024w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-610x436.jpg 610w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2019/01/The-Grove-REA-ad-Laptop@2x-1080x773.jpg 1080w" sizes="(max-width: 1080px) 100vw, 1080px" class="wp-image-5208"></noscript></span>
        </div>
    </div>
    <!-- .et_pb_column -->
    <div class="et_pb_column et_pb_column_1_2 et_pb_column_14  et_pb_css_mix_blend_mode_passthrough et-last-child">

        <div class="et_pb_module et_pb_image et_pb_image_8 portrait et-animated et_had_animation" style="">

            <span class="et_pb_image_wrap "><img class="lazy-loaded" src="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x.png" data-lazy-type="image" data-src="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x.png" alt="Torn Marketing project manager, Torn Marketing – Project and Real Estate Marketing – Home, Torn Marketing - Project and Real Estate Marketing" title="The Ardent logo" srcset="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x.png 600w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x-159x300.png 159w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x-543x1024.png 543w" data-srcset="" sizes="(max-width: 600px) 100vw, 600px"><noscript><img src="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x.png" alt="Torn Marketing project manager, Torn Marketing – Project and Real Estate Marketing – Home, Torn Marketing - Project and Real Estate Marketing" title="The Ardent logo" srcset="https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x.png 600w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x-159x300.png 159w, https://e8r4d9z4.stackpathcdn.com/wp-content/uploads/2018/12/the-Grove-iphone-mockup@2x-543x1024.png 543w" sizes="(max-width: 600px) 100vw, 600px" class="wp-image-5090"></noscript></span>
        </div>
    </div>
    <!-- .et_pb_column -->

</div>
    Plugin Author Pagup

    (@pagup)

    4 years, 6 months ago

    Hi,

    Could you please provide the URL concerned with this code ?

    Thanks

    Thread Starter dwaynetorn

    (@dwaynetorn)

    4 years, 5 months ago

    The page I need help with: https://tornmarketing.com.au/

    Plugin Author Pagup

    (@pagup)

    4 years, 5 months ago

    Hi,

    Thank you for these details … !

    First of all, could you please disable cache to check whether it’s Bialty issue or a conflict with cache plugin. It might be the cache minifiying plugin removing alt from certain png/svg images.

    Also, ….

    By default, the way it works … WordPress adds alt=”” for all images. Bialty plugin looks for image tag “<img”, then looks for alt= and, according to settings defined on setting page, add Alt text (Title page, site name &/or Yoast keyword), whether to replace them or not.

    However, if you manually code a page or template file with images or shortcodes which do not include “alt=” attributes then unfortunately, Bialty plugin won’t be able to do the job. Which, we think, is the case here.

    How to fix this ?

    Make sure to include “alt=” attributes in svg images and any other png image (added manually) so that Bialty plugin can find them and add Alt text (based on your settings).

    PS: In the case where Bialty plugin would not have been able to do the job properly, it would have shown empty alt=”” or the default text added by default.

    Hope this helps.

    Let us know.

    Plugin Author Sajjad Ali

    (@the-rock)

    4 years, 5 months ago

    Hello @dwaynetorn

    The problem is that SVG files doesn’t have alt=”” tag, that’s why Bialty is not working for them. Bialty plugin look for <img, then it look for alt= and then do stuff based on if its empty or not or both. WordPress adds alt tags by default for all images. If you manually add an image whether its png/svg/jpg in Text (HTML) editor, directly inside theme code or via shortcode which doesn’t add alt=”” then Bialty won’t do anything.

    You just need to add alt tag for all image/svg files and it should work fine. Let us know if there is still issue.

    Kind Regards

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Works on JPG but not PNG or SVG files’ is closed to new replies.