Forums / Setup & design / empty ALT and TITLE tag

empty ALT and TITLE tag

Author Message

laurent le cadet

Friday 04 August 2006 2:59:21 am

Hi,

The alt and title tags texts come from {$image.text|wash(xhtml)} (datatatype/view/ezimage.tpl).

I think it should be filled by default with the image title but in my case they are empty :(

Any hint ?

Thanks.

Laurent

Greg Sanderson

Tuesday 02 December 2008 8:59:13 am

Hi

I have a way to add alt and title attributes that seems to work.

You will need the str_replace extension function from http://ez.no/developer/contribs/template_plugins/string_replace_operator

Once this is active I then altered ezimage.tpl in (my design folder)/templates/content/datatype/view/ezimage.tpl, adding:

...

{def $image_name_without_hyphens=ezstr_replace('-',' ',$image.basename)}

<img src={$image.url|ezroot} width="{$image.width}" height="{$image.height}" {section show=$hspace}hspace="{$hspace}"{/section} style="border: {$border_size}px;" alt="{$image_name_without_hyphens|wash(xhtml)}" title="{$image_name_without_hyphens|wash(xhtml)}" />

...

This simply uses the name that you give the image when you upload it as the alt and title attributes, having stripped the hyphens that get added to basename out.

This also works for embedded images through the OE editor, but use $image_variation.basename instead for those.

André R.

Tuesday 02 December 2008 9:30:48 am

No need for str_replace, the object name is mostly what you specified in the upload dialog or the image name without the file extension anyway:
content/datatype/view/ezimage.tpl

{*
Input:
 image_class - Which image alias to show, default is large
 css_class     - Optional css class to wrap around the <img> tag, the
                 class will be placed in a <div> tag.
 alignment     - How to align the image, use 'left', 'right' or false().
 link_to_image - boolean, if true the url_alias will be fetched and
                 used as link.
 href          - Optional string, if set it will create a <a> tag
                 around the image with href as the link.
 border_size   - Size of border around image, default is 0
*}
{default image_class=large
         css_class=false()
         alignment=false()
         link_to_image=false()
         href=false()
         target=false()
         hspace=false()
         border_size=0}
{let image_content=$attribute.content}
{section show=$image_content.is_valid}

    {let image=$image_content[$image_class]}

    {if and( not( $href ), $image_class|ne( 'original' ) )}{set $link_to_image = true()}{/if}
    {section show=$link_to_image}
        {set href=$image_content['imagelarge'].url|ezroot}
    {/section}
    {switch match=$alignment}
    {case match='left'}
        <div class="imageleft">
    {/case}
    {case match='right'}
        <div class="imageright">
    {/case}
    {case/}
    {/switch}

    {section show=$css_class}
        <div class="{$css_class|wash}">
    {/section}

    {section show=and( is_set( $image ), $image )}
        {if and( is_set( $image.text ), $image.text|ne("") )}
            {def $img_alt_text = $image.text}
        {else}
            {def $img_alt_text = $attribute.object.name}
        {/if}
        {section show=$href}<a href={$href}{if $link_to_image} rel="lightbox[gallery]"{/if}{section show=and( is_set( $link_class ), $link_class )} class="{$link_class}"{/section}{section show=and( is_set( $link_id ), $link_id )} id="{$link_id}"{/section}{section show=$target} target="{$target}"{/section}>{/section}
        <img src={$image.url|ezroot} width="{$image.width}" height="{$image.height}" {section show=$hspace}hspace="{$hspace}"{/section} style="border: {$border_size}px;" alt="{$img_alt_text|wash(xhtml)}" title="{$img_alt_text|wash(xhtml)}" />
        {section show=$href}</a>{/section}
    {/section}

    {section show=$css_class}
        </div>
    {/section}

    {switch match=$alignment}
    {case match='left'}
        </div>
    {/case}
    {case match='right'}
        </div>
    {/case}
    {case/}
    {/switch}
    {/let}
{/section}
{/let}

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Greg Sanderson

Thursday 04 December 2008 5:45:55 am

Yes, that's a better way

Where would $image.text usually come from? There doesn't seem to be any inputs for this when uploading an image..

Also, I was thinking that it would be even better if there were extra fields for both any caption, the alt text and the title text, instead of taking these all from the name of the image. I could add custom attributes that would apply to all embedded content for image uploads within the OE editor, but how would I do this for images through the template class structure? Only in my image class I have an XML Block called 'Caption' along with another field called 'Tags', yet I don't get a chance to input these when uploading an image.

eZ debug

Timing: Jan 18 2025 05:04:01
Script start
Timing: Jan 18 2025 05:04:01
Module start 'content'
Timing: Jan 18 2025 05:04:01
Module end 'content'
Timing: Jan 18 2025 05:04:01
Script end

Main resources:

Total runtime0.3524 sec
Peak memory usage2,048.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0095 588.8281180.8438
Module start 'content' 0.00950.0095 769.671997.9766
Module end 'content' 0.01900.3333 867.6484525.8750
Script end 0.3523  1,393.5234 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00391.1094200.0002
Check MTime0.00130.3782200.0001
Mysql Total
Database connection0.00140.398410.0014
Mysqli_queries0.292582.99211410.0021
Looping result0.00150.42921390.0000
Template Total0.333094.510.3330
Template load0.00130.355810.0013
Template processing0.331794.116610.3317
Override
Cache load0.00080.220710.0008
Sytem overhead
Fetch class attribute can translate value0.00050.150710.0005
XML
Image XML parsing0.00040.111810.0004
General
dbfile0.00772.1882200.0004
String conversion0.00000.001930.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0002 secs