Anyone familiar with XSLT? Can't figure something out!
I'm not sure if this type of question is even allowed on this site but I can't seem to get help from anywhere else. I'm needing help in creating a product type of page where the "products" are three columns wide by X amount of rows. ANY help would be appreciated! Please delete if not allowed! Thanks in advance!
I am familiar with XSLT - but the question does not really give enough information to help you.
Basically what I'm needing to do is take an XML document that has, for this instance, 6 nodes in it (there could be more) and using Bootstrap, create a 3x6 grid style layout.
What I am needing the HTML to look like at the end is this...
<div class="card-group scrollable">
<div class="card p-2 m-2 border border-primary rounded">
<img class="card-img-top" src="{VideoThumbnailPath}" alt="Card Thumbnail"/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">
<xsl:value-of select="VideoTitle"/>
</h5>
<p class="card-text">
<xsl:value-of select="VideoDescription"/>
</p>
<button type="button" class="btn btn-lg btn-block btn-primary mt-auto">Start Training</button>
</div>
</div>
<div class="card p-2 m-2 border border-primary rounded">
<img class="card-img-top" src="{VideoThumbnailPath}" alt="Card Thumbnail"/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">
<xsl:value-of select="VideoTitle"/>
</h5>
<p class="card-text">
<xsl:value-of select="VideoDescription"/>
</p>
<button type="button" class="btn btn-lg btn-block btn-primary mt-auto">Start Training</button>
</div>
</div>
<div class="card p-2 m-2 border border-primary rounded">
<img class="card-img-top" src="{VideoThumbnailPath}" alt="Card Thumbnail"/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">
<xsl:value-of select="VideoTitle"/>
</h5>
<p class="card-text">
<xsl:value-of select="VideoDescription"/>
</p>
<button type="button" class="btn btn-lg btn-block btn-primary mt-auto">Start Training</button>
</div>
</div>
</div>
My Problem is that I can't get the first div (<div class="card-group scrollable">) to end after three xml nodes have been looped.
I hope this is okay to post! I know it's a lot. I'm willing to email it back and forth too if need be. Thanks for your help!
Doing this here is all but ideal. IIUC you want to turn:
into something along the lines of
Correct?
Essentially, yes.
XSLT is FP. Have a look at this SO post.
That said I don't think it's a good idea to do this in XSLT. It's better to transform the node into a list of products and then use CSS to lay them out the way you want. This can be done quite easily with CSS grid or flexbox.
I’d recommend that you use a framework to help. Bootstrap, Tailwind and Foundation are all popular. You can also purchase a boilerplate theme that you can modify for a few dollars which are typically made from other indie hackers. Good luck.
I'm using Bootstrap as my framework. Thanks!