Migx and image+

General
1

Hi there!
Im trying to figure out how to show image+ pictures from my migx.
I read throught much of the documentation but this here will not work:

[[ImagePlus? 
  &value=`[[+migxImagePlusField]]`
]]

Here is my formtabs:

[{
    "caption": "Contents Page",
    "fields": [{
        "field": "title",
        "caption": "Title"
      },
      {
        "field": "description",
        "caption": "Description",
        "inputTVtype": "richtext"
      },
      {
        "field": "link",
        "caption": "Link",
        "inputTVtype": "resourcelist"
      }
    ]
  },
  {
    "caption": "Image",
    "fields": [{
      "field": "image",
      "caption": "Image",
      "inputTVtype": "imageplus",
      "sourceFrom":"migx"
    }]
  }
]

and here are my columns:

[
{
  "header": "Title",
  "width": "160",
  "sortable": "true",
  "dataIndex": "title"
},{
  "header": "Description",
  "width": "160",
  "sortable": "true",
  "dataIndex": "description"
},{
  "header": "Link to page",
  "width": "160",
  "sortable": "true",
  "dataIndex": "link"
},{
  "header": "Image",
  "width": "50",
  "sortable": "false",
  "dataIndex": "image",
  "renderer": "ImagePlus.MIGX_Renderer"
}]

I tried calling this on my frontend with:

[!getImageList?
                                        &tvname=`xxx`
                                        &tpl=`blabla_tpl`]]

and I put the imageplus code from all above into balbla_tpl with some other code. Something like this:

<div class="col-6 col-12-medium">
  <!-- Box -->
  
    <section class="box feature">
        <a href="index.php?id=[[+link]]" class="image featured">
         [[ImagePlus? 
  &value=`[[+image]]`
 &tpl=`imagetpl`
]]

      </a>
      <div class="materialenResponsive">
        <header>
          <h2>[[+title]]</h2>
        </header>
        <p>[[+description]]</p>

      </div>
    </section>

</div>

and imagetpl would look something like this:


 <picture>
            <source media=""
                    srcset="[[+image:pthumb=`w=1024&height=160`]] 1024w,
                        [[+image:pthumb=`w=640`]] 640w,
                        [[+image:pthumb=`w=320`]] 320w"
                        
                    sizes=""/>
            <source srcset="[[+image:pthumb=`[[+crop.options]]&w=640`]] 2x,
                        [[+image:pthumb=`[[+crop.options]]&w=320`]] 1x"/>
            <img src="[[+image]]" alt="[[+alt:default=`[[+title]]`]]" class= ""/>
        </picture>

Mmmmmm Im probably misunderstanding something somwhere here righty?

Best and thanks for all replies!

UPDATE:
I also tried only this in the frontend:

[[ImagePlus? 
  &value=`[[+image]]`
]]

But then I get no output at all…

2

did you try to call getImageList cached, like you do with ImagePlus?

1 Like
3

I think you have to use &type=`tpl` in your call to ImagePlus

[[ImagePlus? 
	&value=`[[+image]]`
	&tpl=`imagetpl`
	&type=`tpl`
]]

and inside the template imagetpl use [[+source.src]] instead of [[+image]].

1 Like
4

I usually create a separate Image+ TV (where I can easily manage aspect ratio and other settings) and then just link to that within migx:

{
  "field": "image",
  "caption": "Image",
  "inputTV": "img-TV"
}

This should work calling it in your template like you did (and if needed with pThumb parameters):

[[ImagePlus?&value=`[[+image]]`&options=`w=800`]]

Make sure the output of your img-TV is set to Default.

1 Like
5

Thanks for the tip! I got some steps ahead now.
Though now I get this issue, noticed on git there were some reactions about it already:

[[+source.src]] --> shows core path not absolute path.

6

woho! That did the trick. No idea why I did not think about that.
Here is what I did. I called this tpl with [[!getImageList? &tvname=‘xxx’ &tpl=xxx"]]
and then within the tpl this:

<div class="col-6 col-12-medium">
  <!-- Box -->
  
    <section class="box feature">
        
        
        <a href="index.php?id=[[+link]]" class="image featured">
        <img src="[[ImagePlus?&value=`[[+image]]`&options=`w=800`]]" alt=""> 
      </a>
      <div class="">
        <header>
          <h2>[[+title]]</h2>
        </header>
        <p>[[+description]]</p>

      </div>
    </section>

</div>

This renders an absolute path and all :wink:

Thanks!!

7

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.