Search

There is a carousel in products page,How can I use the first slide as the product's thumbnail?and I must create a Image Field set the thumbnail?

Hi. I think you're going to have to post a lot more detail in order for people to be able to help you.

I have a company website, and each product has a carousel, the carousel contains multiple images. I want to automatically call the first picture of the carousel as thumbnails in Product List page.

Can you know my meaning?

Company-Home
   -About
   -Products list page
                     --Product entry page
   -contact page
...

like this above.

<div class="carousel-inner">
                    <xsl:for-each select="products-img/item">
                        <div class="item">
                            <xsl:if test="position() = 1">
                                <xsl:attribute name="class">
                                    <xsl:text>item active</xsl:text>
                                </xsl:attribute>
                            </xsl:if>
                            <img src="{$workspace}{image/@path}/{image/filename}" alt=""/>
                            <div class="carousel-caption">
                                <xsl:value-of select="title"/>
                            </div>
                        </div>
                    </xsl:for-each>
                </div>

I want to automatically call the first picture of' products-img/item'.

It's fairly simple, if you want the first image you can set [1] in your xsl

if you just want the first image you can use the following:

<xsl:variable name='first-image' select="products-img/item[1]">
 <img src="{$workspace}{$first-image/@path}/{$first-image/filename}" alt=""/>

@gunglien thanks very much. but now the image do not display because the url is "http://xxx.com/workspace/".

and the page xml debug is:

<products>
    <section id="10" handle="product">xxx</section>
    <entry id="60">
        <name handle="xxx">xxx</name>

        <desc2>
            <item id="42" handle="xxx" section-handle="parameters" section-name="">xxx</item>
        </desc2>
        <promote>No</promote>
        <published>Yes</published>
        <products-img>
            <item id="56" handle="xxx-1" section-handle="product-image" section-name="">
                <title handle="xxx-1">xxx-1</title>
                <image size="129 KB" bytes="132210" path="/uploads/products" type="image/jpeg">
                    <filename>img_1023-2-1-54a8df7c7e8bd.jpg</filename>
                    <meta creation="2015-01-04T14:36:44+08:00" width="1200" height="800" />
                    <clean-filename>img_1023-2-1.jpg</clean-filename>
                </image>
            </item>

and the xsl is:

<xsl:template match="products">
    <!-- Recent Works -->
    <div class="owl-carousel-v1 owl-work-v1 margin-bottom-40">
        <div class="headline"><h2 class="pull-left">Recent Works</h2>
            <div class="owl-navigation">
                <div class="customNavigation">
                    <a class="owl-btn prev-v2"><i class="fa fa-angle-left"></i></a>
                    <a class="owl-btn next-v2"><i class="fa fa-angle-right"></i></a>
                </div>
            </div><!--/navigation-->
        </div>

        <div class="owl-recent-works-v1">
            <xsl:for-each select="entry">
                <div class="item">
                    <a href="{$root}/products/detail/{url}">
                        <em class="overflow-hidden">
                            <img class="img-responsive" src="{$workspace}{$first-image/@path}/{$first-image/filename}" alt=""/>

Where does the problem?

Sorry made a mistake in the code - I was not selecting your image node find the corrected version here

<xsl:variable name='first-image' select="products-img/item[1]">
 <img src="{$workspace}{$first-image/image/@path}/{$first-image/image/filename}" alt=""/>

The first image variable gives you the whole node so $first-image/title would give you the image title if you wanted to use that as an alt text

Ok,thanks.let me try.

...

Ok,This issue is resolved.

I just put the variable on the top of xsl, but i found it does not work, then I put that on top of img class after it.is OK.

thank you very very much.

To put it at the top, you will need to use the full path. eg /data/products/entry/products-img/item[1]

Hello nonozone,

do I understand correctly that the thumbnail is to be shown on a page together with thumbnails of all other products? I have this in a project, too, and I resolved it differently to make the product list page faster.

I have a datasource that lists product images but it a filter selects only the first picture. The images section has a "entry order" field and the filter applies to this field. I am attaching a screenshot.

The xml produced contains only the images I need. This speeds up my page (the database query is faster than the xml transformation, as far as I know).

There is one downside to it: The images need to be ordered. I need to rearrange at least one image in the backend. Otherwise none has the order "1" and no image wil be shown. For me this is totally all right because I order my images anyway.

Attachments:
product image.jpg

@mprofitl This is very cool,I studied,thank you.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details