Announcement

Collapse
No announcement yet.

ReadyTheme images alt and title tags

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    ReadyTheme images alt and title tags

    I'm brand new to Miva. Learning as I go. However I have discovered one thing that is annoying to me and I'm wondering if there is a way around it.

    For landing pages we are using the markup <mvt:item name="readytheme" param="image('banner-image')" /> which is all well and good.

    I was wondering why the company I just joined was not using alt tags for all images, especially hero banners on the page. That fails usability and SEO pretty hard. What I discovered is that Miva automatically loads the content from the "alt text" field both into an alt tag as well as a title tag. The title tag then creates a tooltip in the browser which is certainly NOT what the owners of our site want.

    This doc mentions the alt tag, but says nothing of the title tag: https://docs.miva.com/template-langu...-documentation

    Then I found this doc which clearly displays the "alt text as title tag" as a feature of Miva and decidedly not a bug: https://docs.miva.com/reference-guide/readytheme-images

    Why does the system auto populate title tags with non-title-tag content? Those tags have decidedly different uses in the HTML5 spec, as follows: "The alt attribute does not represent advisory information. User agents must not present the contents of the alt attribute in the same way as content of the title attribute." (https://www.w3.org/TR/html51/semanti...he-img-element)

    Is there any way around this beyond not using the ReadyTheme images anymore?

    #2
    You can use the ReadyTheme images and, instead of using the given markup, you can create you create your own output from the Template Language Function [ https://docs.miva.com/template-langu...-documentation ]:
    Code:
    <mvt:item name="readytheme" param="Load_Image('banner-image', g.banner_image)" />
    <mvt:if expr="g.banner_image:link_type NE 'N'">
        <mvt:if expr="g.banner_image:link_type EQ 'G'">
            <mvt:do file="g.Module_Feature_TUI_DB" name="l.success" value="Page_Load_Code( g.banner_image:link_dest, l.settings:rt_g )" />
            <mvt:do file="g.Module_Feature_URI_UT" name="g.banner_image:uri" value="Store_Page_URL(l.settings:rt_g, NULL)" />
        <mvt:elseif expr="g.banner_image:link_type EQ 'C'">
            <mvt:do file="g.Module_Library_DB" name="l.success" value="Category_Load_Code( g.banner_image:link_dest, l.settings:rt_c )" />
            <mvt:do file="g.Module_Feature_URI_UT" name="g.banner_image:uri" value="Store_Category_URL(l.settings:rt_c, NULL)" />
        <mvt:elseif expr="g.banner_image:link_type EQ 'P'">
            <mvt:do file="g.Module_Library_DB" name="l.success" value="Product_Load_Code( g.banner_image:link_dest, l.settings:rt_p )" />
            <mvt:do file="g.Module_Feature_URI_UT" name="g.banner_image:uri" value="Store_Product_URL(l.settings:rt_p, NULL)" />
        <mvt:elseif expr="g.banner_image:link_type EQ 'U'">
            <mvt:assign name="g.banner_image:uri" value="g.banner_image:link_dest" />
        <mvt:else>
            <mvt:assign name="g.banner_image:uri" value="NULL" />
        </mvt:if>
    <mvt:else>
        <mvt:assign name="g.banner_image:uri" value="NULL" />
    </mvt:if>
    
    <mvt:if expr="NOT ISNULL g.banner_image:uri">
        <a href="&mvt:global:banner_image:uri;" target="&mvt:global:banner_image:link_targ;">
            <img src="&mvt:global:banner_image:image;" alt="&mvt:global:banner_image:image_alt;">
        </a>
    <mvt:else>
        <img src="&mvt:global:banner_image:image;" alt="&mvt:global:banner_image:image_alt;">
    </mvt:if>
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment

    Working...
    X