Can I set the thumbnail use the first pic of a Carousel?
This is an open discussion with 9 replies, filed under General.
Search
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.
@mprofitl This is very cool,I studied,thank you.
Create an account or sign in to comment.
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?