YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar kecommunication asked

Widgetkit2 Popover alt attribute for image

The background image does not have an alt attribute. Please add an extra field to enter an alt and title tag!

  • Joomla
  • Widgetkit
  • Feature Request

4 Answers

-1

Avatar thomas.p Support answered

Hi kecommunication,

you can customize your popover widget to add fields for the title and alt tags of the background image as follows:

  • access your site via FTP
  • edit the file /administrator/components/com_widgetkit/plugins/widgets/popover/plugin.php with an UTF-8 capable editor
  • scroll down to line 29-33 which define the options for the background image

                    'settings' => array(  
                        'width'             => '',  
                        'image'             => '',  
                        'image_hero_width'  => 'auto',  
                        'image_hero_height' => 'auto',
    
  • directly after these lines paste the following code

                'image_hero_title'  => '',  
                'image_hero_alt'    => '',
    
  • save & close

  • edit the file /administrator/components/com_widgetkit/plugins/widgets/popover/views/edit.php with an UTF-8 capable editor
  • scroll down to lines 28-39 which define the fields for the background image, its width and height

                    <div class="uk-form-row">  
                        <label class="uk-form-label">{{'Image' | trans}}</label>  
                        <div class="uk-form-controls">  
                            <field-media title="item.title" media="widget.data.image"></field-media>  
                            <p class="uk-form-controls-condensed">  
                                <label><input class="uk-form-width-small" type="text" ng-model="widget.data['image_hero_width']"> {{'Width (px)' | trans}}</label>  
                            </p>  
                            <p class="uk-form-controls-condensed">  
                                <label><input class="uk-form-width-small" type="text" ng-model="widget.data['image_hero_height']"> {{'Height (px)' | trans}}</label>  
                            </p>  
                        </div>  
                    </div>
    
  • directly after these lines insert the following code

                    <div class="uk-form-row">  
                        <label class="uk-form-label" for="wk-position">{{'Image Title' | trans}}</label>  
                        <div class="uk-form-controls">  
                            <p class="uk-form-controls-condensed">  
                                <input class="uk-form-width-medium" type="text" ng-model="widget.data['image_hero_title']">  
                            </p>  
                        </div>  
                    </div>
    
                    <div class="uk-form-row">  
                        <label class="uk-form-label" for="wk-position">{{'Image Alt' | trans}}</label>  
                        <div class="uk-form-controls">  
                            <p class="uk-form-controls-condensed">  
                                <input class="uk-form-width-medium" type="text" ng-model="widget.data['image_hero_alt']">  
                            </p>  
                        </div>  
                    </div>
    
  • save & close

  • edit the file /administrator/components/com_widgetkit/plugins/widgets/popover/views/edit.php with an UTF-8 capable editor
  • scroll down to line 83 which generates the output for the background image
  • change this line from

            <img src="<?php echo $image; ?>" alt="">
    

    to exactly

            <img src="<?php echo $image; ?>" title="<?php echo $settings['image_hero_title']; ?>" alt="<?php echo $settings['image_hero_alt']; ?>">
    
  • save & close

Note that this change is not update-safe and will be overwritten by the next widgetkit update. To make it update-safe, please have a look here: Create a Custom Widget Plugin

Furthermore, the strings of the newly added backend settings will not be translated before you have added translations for them to your widgetkit language files.


The result should look like this in the backend

Image

and generate the following output

Image


Let me know if that worked for you.

Kind regards
Thomas

Edited

0

Avatar thomas.p Support answered

Hi,

if this thread can be closed: Please use the ✔ checkmark to the left of the answer that helped you and click it ONCE to "accept" it.

Image

This will highlight it green and make a solution easier to spot for others. Something you might yourself benefit from with other issues you might have.

Mind that "voting" by using the + is different from accepting a response as an answer.

Thank you
Thomas

0

Avatar kecommunication answered

I am unsatisfied with the answer, though. Because every crawler will mark a missing alt tag as an error. Your fix is only temporary until the next update.

0

Avatar thomas.p Support answered

Your fix is only temporary until the next update.

Yes, this fix is indeed not update-safe as stated before. But you can easily make it update-safe by creating your Custom Widget Plugin.

In a nutshell, simply copy the folder /administrator/components/com_widgetkit/plugins/widgets/popover/ to /administrator/components/com_widgetkit/plugins/widgets/popover-custom/, rename the files in the plugin.php to avoid conflicts and then you can apply your customizations.

Know someone who can answer? Share a link to this question via email or twitter.