Range with index and front matter variable in shortcode

I would like to range over a data file and get a certain data set based on a variable set in the front matter.

I have a page about a product, then I have various details about that product in a data file (easier to maintain there).

data file items are like:

canvas wraps:
  - file: canvas-wrap-on-wall.jpg
    alt: 16x24 Canvas Wrap
  - file: roes-canvas-preview.jpg
    alt: ROES ordering screen with preview of wrapped sides.
  - title: Canvas Wrap Sizes - 8x8 up to 40x60
    body: We offer dozens of sizes from 8x8 up to 40x60, the most popular sizes are 16x20, 16x24, 20x30 and 24x36. Looking for an odd size? we can do any size between 8x8 and 40x60. 
  - title: Shipping Available up to 24x36
    body: Shipping and Drop Shipping are available on all canvas wraps up to 24x36. See our <a href="/shipping/">Shipping page</a> for more info.

there is more than one type of product in the one data file - canvas wraps is just one of them.

In the front matter of this products page I would like to have:
detail: canvas wraps

then in a shortcode I have:

<div class="row-container">
	<div class="column-50">
   {{ range (index .Site.Data.details .Params.detail).images }}
   <img src="/assets/img/details/{{.file}}" alt="{{.alt}}" class="img-responsive-hm img-shadow">
   <p class="photo-caption">{{.alt}}</p>
   {{ end }}
 <div class="column-50 details-text">
 {{ range (index .Site.Data.details  .Params.detail).info }}   <h4 class="pad-top-h">{{ .title }}</h4>
   <p>{{ .body }}</p>{{ end }}

But I get an error at <.Params.detail>: can't evaluate field detail in type interface {}

I can get it to work by passing in a parameter with the shortcode, and then using scratch, but it seems like I should be able to do it with the front matter variable. The Index Function docs have an example just like this except it is not in a range.