nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Image Component

biman

Hi All,
I am trying to create one image component,
I have written Appearance XML and XSL
{Datum ID="D02" Name="BusinessImage" Type="Image">
{Image Width="200" Height="100"}
{Path}$URL_PREFIX/sites/Company/logo.gif{/Path}
{Description}Shop Now{/Description}
{/Image}
{/Datum}

===============================================
{div}
{xsl:variable name="imagePath"}
{xsl:value-of select="/Properties/Data/Datum@Name='BusinessImage']/Image/Path" /}
{/xsl:variable}
{xsl:variable name="ImagePath" select="$imagePath" /}

{img alt="image not found" width="200" height="100"}
{attribute name="src"}
{xsl:value-of select="$ImagePath" /}
{/attribute}
{/img}
{/div}

And when I am previewing the component it's not showing the image. Instead it is providing the path as follows
/iw/cci/meta/no-injection/iw-mount/default/main/Lang/Country/Vendor/WORKAREA/Offshore_Content/sites/Company/logo.gif

Can anyone tell what I am doing wrong?
Any help is most appreciated.

-- biman --

Find more posts tagged with

Comments

AlexC

Is the image deployed to /default/main/Lang/Country/Vendor/WORKAREA/Offshore_Content/sites/Company/logo.gif

If not what is the path for your logo.gif?

The path before that is preview through a proxy that lets you access the information directly. $URL_PREFIX is setting the correct path for it and it will reflect the actual site at runtime.

biman

Is the image deployed to /default/main/Lang/Country/Vendor/WORKAREA/Offshore_Content/sites/Company/logo.gif

If not what is the path for your logo.gif?

The path before that is preview through a proxy that lets you access the information directly. $URL_PREFIX is setting the correct path for it and it will reflect the actual site at runtime.

Hi Alex,
Image is deployed to the said location, only thing is that it's not displaying the image while previewing the page, as you said it might be rendered at runtime. Thank You!!

-- biman --

Samir_Friend

Hi All,
I am trying to create one image component,
I have written Appearance XML and XSL
{Datum ID="D02" Name="BusinessImage" Type="Image">
{Image Width="200" Height="100"}
{Path}$URL_PREFIX/sites/Company/logo.gif{/Path}
{Description}Shop Now{/Description}
{/Image}
{/Datum}

===============================================
{div}
{xsl:variable name="imagePath"}
{xsl:value-of select="/Properties/Data/Datum@Name='BusinessImage']/Image/Path" /}
{/xsl:variable}
{xsl:variable name="ImagePath" select="$imagePath" /}

{img alt="image not found" width="200" height="100"}
{attribute name="src"}
{xsl:value-of select="$ImagePath" /}
{/attribute}
{/img}
{/div}

And when I am previewing the component it's not showing the image. Instead it is providing the path as follows
/iw/cci/meta/no-injection/iw-mount/default/main/Lang/Country/Vendor/WORKAREA/Offshore_Content/sites/Company/logo.gif

Can anyone tell what I am doing wrong?
Any help is most appreciated.

-- biman --

If your code is exactly the way use are using it, I think you're missing this "[" in this line:

[html]

[/html]

biman

If your code is exactly the way use are using it, I think you're missing this "[" in this line:

[html]

[/html]

Samir,
"[" this is there in my component, by mistake i missed that in code posted here.
-- biman --

Firenze

Typically if you want to use the xsl:attribute function then you can't have already declared attributes.

You may want to try.
<xsl:element name="img">
<xsl:attribute name="alt">image not found</xsl:attribute>
<xsl:attribute name="width">200</xsl:attribute>
<xsl:attribute name="height">100</xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="$ImagePath" /></xsl:attribute>
</xsl:element>

Stokes

Biman,

Could it be that linewraps are appearing in your resulting HTML? I've seen that happen before with XSL similar to yours, where the output looks like:

<src img="
/iw/cci/meta/no-injection/iw-mount/default/main/Lang/Country/Vendor/WORKAREA/Offshore_Content/sites/Company/logo.gif 
" />

In such cases, the URL looks right, but those line wraps or whitespace can cause the browser to not display the image. If so, then you might change the way you're defining the $imagePath variable to fix it. Just an idea.

Stokes.

biman

Biman,

Could it be that linewraps are appearing in your resulting HTML? I've seen that happen before with XSL similar to yours, where the output looks like:
<src img="
/iw/cci/meta/no-injection/iw-mount/default/main/Lang/Country/Vendor/WORKAREA/Offshore_Content/sites/Company/logo.gif 
" />
In such cases, the URL looks right, but those line wraps or whitespace can cause the browser to not display the image. If so, then you might change the way you're defining the $imagePath variable to fix it. Just an idea.

Stokes.

Hi Stokes,
This is the HTML code generated ,

{img height="100" width="200" alt="image not found"}{attribute name="src"}/sites/Company/logo.gif{/attribute}{/img}

I guess I might have some preview server problem as I had right src for this image in html , only thing what I need is I want to remove the prefix "/" form img src like
src="sites/Company/logo.gif"
Can you figure out this problem.
Thank You.....
--biman--

Stokes

Oh!! I just caught that. In your XSL, the <attribute> tag is missing the xsl: namespace prefix.

I think you have:

<img alt="image not found" width="200" height="100">
  <attribute name="src">
    <xsl:value-of select="$ImagePath" />
  </attribute>
</img>

and it should instead be:

<img alt="image not found" width="200" height="100">
  <xsl:attribute name="src"><xsl:value-of select="$ImagePath" /></xsl:attribute>
</img>

Stokes.