How to add multiple images for a gallery in a post using MIGX?

Development
1

I’m building a page of reviews for visitors to see. I’m using MIGX to create each individual post (i.e. Review title, description, contact info, etc.). But I only know how to add an individual image to each review, such as a post thumbnail using “inputTVtype”: “image”.

How can I add a series of images like this so that I can feature them as a gallery on each review? The only way I can think of this is to add them as images in a richtext format and then use javascript or something to extract the images and build the gallery. But there’s got to be an easier way of going about this.

I’ve always used inputTVtype, but maybe something with just inputTV?

Any help would be appreciated.

Thank you!

2

You can nest MIGX grids. Inside your MIGX config for the reviews, use “migx” as the inputTVtype for the images and create another config for this.

3

Do I understand this right, that you are setting migx as the inputTVtype within the parents migx json config? So you don’t have to create a separate TV but just another config with the same field (?) name in the migx CMP? If so, I never knew this was a thing…

I’ve always created a second migx TV and referred to that within the parent one, by including it as a inputTV. Just make sure your TV and your field name are not the same, as this will cause issues.

Then in the template of your parent getImageList call you can place another getImageList call but this time use the &value property instead of &tvname to refer to your field holding the nested TV:

[[getImageList?
  &value =[[+fieldname]]   // field name that holds the nested TV

Here is also an older thread with an example.

4

Yes, you don’t have to create a TV for the nested grid.

In the outer config (tab “Formtabs” → “Fields”) set “Input TV type” to migx and “Configs” to the name of the nested MIGX configuration.

1 Like
5

If this will get a lot of posts, I would store them into a custom table.
This doesn’t work much different, than storing it all into a MIGX TV, but has many benefits.

6

This is very interesting, but I didn’t think I’d get it right on the first try. When I go to add an item, I’m just seeing a spinning wheel. I tried to do this in the Image Gallery. Here’s what I did:

[{
    "caption": "Review Info",
    "fields": [
      {
        "field": "reviewTitle",
        "validation": "required",
        "caption": "Title",
        "inputTVtype":"text"
      },
      {
        "field": "reviewCategory",
        "validation": "required",
        "caption": "Category",
        "inputTVtype":"listbox-multiple",
        "inputOptionValues": "Man||Bear||Pig",
        "configs":"{\"typeAhead\":true}"
      },
      {
        "field": "reviewDescription",
        "validation": "required",
        "caption": "Description of Work",
        "inputTVtype":"richtext"
      },
      {
        "field": "reviewGallery",
        "caption": "Image Gallery",
        "inputTVtype": "migx",
        "configs": [{
          "caption": "images",
          "fields": [
            {
              "field": "reviewImages",
              "caption": "Upload Images",
              "inputTVtype": "image"
            }
          ]
        }]
      }
    ]
  },
  {
    "caption": "Neighbor Info",
    "fields": [
      {
        "field": "reviewerAddress",
        "caption": "Neighbor Address",
        "inputTVtype": "text"
      },
      {
        "field": "reviewerPhone",
        "caption": "Neighbor Phone Number",
        "inputTVtype": "text"
      }

    ]
  },
  {
    "caption": "Contractor Info",
      "fields": [
        {
          "field": "reviewCompany",
          "validation": "required",
          "caption": "Company",
          "inputTVtype":"text"
      },
      {
          "field": "reviewCompanyAddress",
          "caption": "Company Address",
          "inputTVtype":"text"
      },
      {
          "field": "reviewCompanyPhone",
          "caption": "Company Phone Number",
          "inputTVtype":"text"
      },
      {
          "field": "reviewCompanyWeb",
          "caption": "Company Website",
          "inputTVtype":"text"
      }
    ]
  }
]```
7

is there a KB article somewhere for this? I’m not sure how to set that up.

thanks

8

Are you adding this JSON manually to the “Input Options” tab of the TV?
Try using a MIGX configuration instead. (In the top menu “Extras” → “MIGX”).

I made this video, that shows the process.

1 Like