Support » Plugin: Easy FancyBox » tag does not have an ALT attribute defined".

  • Resolved Mark6174

    (@mark6174)


    Bing webmaster tools keeps telling me that there are “116 <img> tags that do not have an ALT attribute defined”.

    I have the easy fancybox plugin and it’s the current version 1.5.7. I have a custom theme with a layout-gallery.php template.

    The gallery page on my website is href=”http://www.carversgilders.com/gallery”>

    How can I resolve the 116 missing <img> tag?

    The Alt Text is filled out in each photo in the wordpress gallery settings.

    I can see the following code in the layout-gallery.php template:
    <img src=”<?php $large = wp_get_attachment_image_src($img, ‘full-gallery-images’); echo $large[0]; ?>”>

    and I think an <img> alt code needs to go underneath this command but have no idea what it should be.

    Have looked at lots of forums – the box is checked to allow title from ALT in Settings Media Page and I’ve also tried removing the Title from each image in the hope that it will take the Alt text instead but that doesn’t work either.

    Can you help a really desperate novice to resolve this?
    Thanks in advance

    https://wordpress.org/plugins/easy-fancybox/

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author RavanH

    (@ravanh)

    Hi,

    The option “Allow title from ALT” is only there to allow FancyBox to use the alt attribute to get and display an image title in the light box. It does not actually change your source code to add an alt tag. If it’s not there, it cannot use it and the option becomes useless.

    And if it’s not there, Bing will indeed remark the obligatory attribute as missing. The problem lies with your theme so you could either ask the theme developers to fix it or try it yourself, but be aware that any theme update will overwrite your custom fix.

    If it’s your own theme, then there is no problem… Go ahead and try this:

    You can start with modifying the gallery source code to

    <img src="<?php $large = wp_get_attachment_image_src($img, 'full-gallery-images'); echo $large[0]; ?>" alt="">

    This will add an empty alt attribute which should make Bing complain less. But it will not be very helpful to those that actually need this attribute like screen readers (for visually impaired) or search engines. So if you want to go the full mile, you’ll need to try something like:

    alt="<?php echo trim(strip_tags( get_post_meta($img, '_wp_attachment_image_alt', true) )); ?>"

    You are a genius! One slight hitch though – my images are now left aligned in the gallery href=”http://www.carversgilders.com/gallery and not centred with the Title. Can’t seem to find how to centre the image back – can you help?
    Many thanks

    Just noticed that the <img> tag is also missing in the data slide index at the bottom of my gallery so your really helpful code has only resolved 58 of the 116 missing img tags that don’t have the Alt Attribute defined. I’m really sorry to ask again but clearly I need code to go underneath the following command in my layout-gallery.php file:

    <?php foreach ($img as $item) { ?>
    ” href=””><img src=”<?php $thumb = wp_get_attachment_image_src($item, ‘small-gallery-images’); echo $thumb[0]; ?>”>

    and also a solution to centre my main image back in the gallery http://www.carversgilders.com/gallery.

    Thanks so much – I’m sorry to have to ask again but I’d really appreciate your help

    Plugin Author RavanH

    (@ravanh)

    No problem 🙂 … can you post your current code again but this time use the code button (or wrap the code block in back-ticks) because the forum ate part of it.

    Plugin Author RavanH

    (@ravanh)

    The thumbnails loop should look something like:

    <?php foreach ($img as $item) { ?>
      <a data-slide-index="<?php echo i++; /* or whatever counter method */ ?>">
        <img
            src="<?php $thumb = wp_get_attachment_image_src($item, 'full-gallery-images'); echo $thumb[0]; ?>"
            alt="<?php echo trim(strip_tags( get_post_meta($item, '_wp_attachment_image_alt', true) )); ?>"
        />
      </a>
    <?php }; ?>

    Note that the alt"..." part must lie within the <img ... /> part. There must be NO closing > sign before the alt attribute!

    Same goes for the large images loop.

    Hi – here’s the code from the layout-gallery.php file – I don’t know how to centre the images now that you’ve solved the img alt issue. Hope I’ve copied this into this forum OK! Thanks

    <div class="spacer"></div>
    
    <div class="home_content_introduction">
    
      <div class="m">
    
        <div class="spacer"></div>
    
        <div class="breadcrumbs">
            <?php if(function_exists('bcn_display'))
            {
                bcn_display();
            }?>
        </div>
    
          <div class="page">
              <div class="three_third">
                <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  
    
                    <style type="text/css">
                    .gallery  {display: none}
                    </style>
    
                    <h1><?php the_title(); ?></h1>
                    <?php the_content(); ?>
    
                    <?php 
    
                      $post_content = get_the_content();
                      preg_match('/\[gallery.*ids=.(.*).\]/', $post_content, $ids);
                      $array_id = explode(",", $ids[1]);
    
                    ?>
    
                <?php endwhile; else: ?>
                <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
                <?php endif; wp_reset_query(); ?>
    
    <div class="clear"></div>
    
                <div class="property-gallery-border">
    
                    <div class="property-gallery">
    
                        <div class="main_images">
    
                            <ul class="bxslider" id="gallery">
                                <?php foreach ($array_id as $img) { ?>
                                    <li>
    				  <?php
                                            $images = get_post($img);
                                            if ( $images->post_excerpt != '' ) {
                                               echo '<div class="caption">'.$images->post_excerpt.'</div>';
                                            }
                                        ?>
                                        <img src="<?php $large = wp_get_attachment_image_src($img, 'full-gallery-images'); echo $large[0]; ?>">
    					alt="<?php echo trim(strip_tags( get_post_meta($img, '_wp_attachment_image_alt', true) )); ?>" 
    
                                    </li>
                                <?php } ?>
                            </ul>
    
                        </div>
    
                        <?php $array_id = array_chunk($array_id, 9) ?>
                        <div class="custom_gallery_pager_logic">
    
                            <div id="pager">
    
                                <?php $data_id = 0; ?>
                                <?php foreach ($array_id as $img) { ?>
    
                                    <div class="image-group">
    
                                        <?php foreach ($img as $item) { ?>
                                            <a data-slide-index="<?php echo $data_id; ?>" href=""><img src="<?php $thumb = wp_get_attachment_image_src($item, 'small-gallery-images'); echo $thumb[0]; ?>"></a>
                                            <?php $data_id++; ?>
                                        <?php } ?>
    
                                    </div>
    
                                <?php } ?>
    
                            </div>
    
                        </div>
    
                    </div>
    
                </div>
    
                <script type="text/javascript">
    
                    $(document).ready(function(){
    
                        $('.property-gallery #gallery').bxSlider({
                            pagerCustom: '#pager',
                            controls: false
                        });
                        $('.property-gallery #pager').bxSlider({
                            pager: false,
                            nextText: '>',
                            prevText: '<'
                        });                 
    
                    });
    
                </script>
    
              </div>
              <div class="clear"></div>
    
            </div>
    
        </div>
    
    </div>
    Plugin Author RavanH

    (@ravanh)

    The problem is here:

    ...
    	<img src="<?php $large = wp_get_attachment_image_src($img, 'full-gallery-images'); echo $large[0]; ?>">
    		alt="<?php echo trim(strip_tags( get_post_meta($img, '_wp_attachment_image_alt', true) )); ?>"
    ...

    Notice how there is a > at the end of the line before the new line with the alt attribute. The result is that the alt attribute is living outside the img tag, which makes it useless.

    Change it to:

    <img src="<?php $large = wp_get_attachment_image_src($img, 'full-gallery-images'); echo $large[0]; ?>" alt="<?php echo trim(strip_tags( get_post_meta($img, '_wp_attachment_image_al true) )); ?>" />

    Plugin Author RavanH

    (@ravanh)

    Next, find:

    ...
    
          <a data-slide-index="<?php echo $data_id; ?>" href=""><img src="<?php $thumb = wp_get_attachment_image_src($item, 'small-gallery-images'); echo $thumb[0]; ?>"></a>
    ...

    and change that line to:

    <a data-slide-index="<?php echo $data_id; ?>" href=""><img src="<?php $thumb = wp_get_attachment_image_src($item, 'small-gallery-images'); echo $thumb[0]; ?>" alt="<?php echo trim(strip_tags( get_post_meta($item, '_wp_attachment_image_al true) )); ?>" /></a>

    Hi – thanks so much for your help. Looks like the img alt issue has now gone away and my images in the gallery are all centre aligned. However, in other pages where I have six images to a page all used to be nicely separated and now they’re all bunched together. I can see that they are all still thumbnail size (300 x 175) but there used to be a space between each image – like how they are displayed on http://www.carversgilders.com/wood-carving but these aren’t using the fancybox – all subpages are – i.e. http://www.carversgilders.com/carved-memorials

    How can I get the pages and subpages that use fancy box to space the images back as they were?

    I am really sorry that I keep coming back to you with another problem but I can’t see how to fix this – can you please help me?

    Plugin Author RavanH

    (@ravanh)

    Hi Mark,

    Open the theme stylesheet assets/css/theme.css in a text editor or in the WordPress theme editor and find (all the way near the end) the lines:

    .gallery-item > .gallery-icon > .fancybox > img {
    	width:100%;
    }

    Now either remove the three lines or edit to deactivate that rule like this:

    .gallery-item > .gallery-icon > .fancybox > img {
    	/* width:100%; */
    }

    Hi – thanks again for replying. I’ve edited the theme.css file in wordpad through my FTP site as you’ve suggested and hiding the command with the */ doesn’t change it and removing the 3 lines doesn’t work either. I’ve then also gone into the stylesheet.css file in wordpress in appearance editor to update it so that it retrieves the updated theme.css file and that doesn’t make any difference. Any other ideas? Thanks a lot – Mark

    Plugin Author RavanH

    (@ravanh)

    It looks like the modifications did not ‘stick’. If I open http://www.carversgilders.com/wp-content/themes/woodcarver/assets/css/theme.css and scroll down all the way to the end, the rule is still there.

    Did you upload the modified theme.css? Make sure you put the modified file in the same directory, overwriting the original with an FTP program like Filezilla. Check if there are no errors reported after the upload.

    Best not edit in a rich text editor like WordPad. If you have to use an editor, use the most simple one you have. On Windows that’s usually Notepad. Otherwise use the WordPress internal Theme Editor (admin Appearance > Edit) to modify theme files.

    In any case, make a backup of your theme!

    Next, revisit your site but make sure this is with an empty browser cache. Otherwise, you’ll still be looking at the old (cached) stylesheet.

    Hi – Success! Not sure what’s happened during the day but just looked at my site before doing anything in Filezilla and it all seems to now be OK so a huge thank you for all of your help – amazing! 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘tag does not have an ALT attribute defined".’ is closed to new replies.