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.