How to get width, height from file field within a matrix cell

Question

I have a site with a matrix field that stores images (file field) in one matrix cell and captions in another. I am trying to get the file field to output the height and width of the image. Here is my code.

{matrix_field_name}
  {gallery_image_field}{width}x{height}{/gallery_image_field}
{/matrix_field_name}

So this code does output the width and height but it also outputs the path to the file. Something like this

http://sitename.com/image/image.jpg800x600

Does anyone know how to get it to only output the dimensions?

EE 2.9.2 and Matrix 2.6.1

In answer to the question if there was more code. There is.

  <div id="project_gallery" class="my-gallery clearfix" itemscope itemtype="http://schema.org/ImageGallery">
    {cf_project_gallery}
      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="{cell_1}" itemprop="contentUrl" data-size="{cell_1}{width}x{height}{/cell_1}">
          {exp:ce_img:pair src="{cell_1}" width="92" height="69" crop="yes|left,top" allow_scale_larger="yes"}
            <img class="gallery_img" src="{made}" itemprop="thumbnail" alt="{cell_2}" />
          {/exp:ce_img:pair}
        </a>
        <figcaption itemprop="caption description">{cell_2}</figcaption>                           
      </figure>
    {/cf_project_gallery}
  </div>

This is the full code minus the channel entries tag which has a bunch more code in between so I have not included. I just used a paired down version for simplicity of explanation in my original post.

I tried just stripping down the code like in your example and it did output the correct data. I think EE was getting confused on the first {cell_1} being the opening tag which makes sense I guess. I rewrote it to this.

  <div id="project_gallery" class="my-gallery clearfix" itemscope itemtype="http://schema.org/ImageGallery">
    {cf_project_gallery}
      <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="{cell_1}{cell_1}" itemprop="contentUrl" data-size="{width}x{height}{/cell_1}">
          {exp:ce_img:pair src="{cell_1}" width="92" height="69" crop="yes|left,top" allow_scale_larger="yes"}
            <img class="gallery_img" src="{made}" itemprop="thumbnail" alt="{cell_2}" />
          {/exp:ce_img:pair}
        </a>
        <figcaption itemprop="caption description">{cell_2}</figcaption>                           
      </figure>
    {/cf_project_gallery}
  </div>

And that did the trick. I didn't notice it originally but in the first version it was not outputting the path to the image on the first cell_1 so that's what eventually clued me in.

Answer 1

With the code you provided I get the desired output (800x600). Is there more code in your template? There could be an error there.

I use EE 2.10.1 and Matrix 2.6.1.