In the Gridlock Gallery (Gridorama), how can I put text in some of the cells (instead of images)?

Hi,

Like the title says.

Thanks!

Hello Diego,

Thanks for writing in! The Gridorama: Gridlock Gallery is using the Looper Provider JSON. You will have to edit the JSON code and replace the image with text and its text content value:

[
  {
    "cells" : [
      {
        "type"        : "title",
        "xStart"      : "2",
        "xEnd"        : "14",
        "yStart"      : "1",
        "yEnd"        : "4",
        "xSpanMobile" : "2",
        "text"        : "Beauté Moderne"
      },
      {
        "type"        : "image",
        "xStart"      : "14",
        "xEnd"        : "27",
        "yStart"      : "8",
        "yEnd"        : "19",
        "xSpanMobile" : "2",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-08.jpg"
      },
      {
        "type"        : "prev",
        "xStart"      : "9",
        "xEnd"        : "14",
        "yStart"      : "21",
        "yEnd"        : "24",
        "xSpanMobile" : "1"
      },
      {
        "type"        : "next",
        "xStart"      : "20",
        "xEnd"        : "26",
        "yStart"      : "5",
        "yEnd"        : "8",
        "xSpanMobile" : "1"
      },
      {
        "type"        : "image",
        "xStart"      : "1",
        "xEnd"        : "7",
        "yStart"      : "11",
        "yEnd"        : "16",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-05.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "14",
        "xEnd"        : "21",
        "yStart"      : "19",
        "yEnd"        : "25",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-11.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "27",
        "xEnd"        : "31",
        "yStart"      : "10",
        "yEnd"        : "18",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-12.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "7",
        "xEnd"        : "14",
        "yStart"      : "4",
        "yEnd"        : "16",
        "xSpanMobile" : "2",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-06.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "3",
        "xEnd"        : "9",
        "yStart"      : "16",
        "yEnd"        : "20",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-01.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "14",
        "xEnd"        : "20",
        "yStart"      : "1",
        "yEnd"        : "8",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-02.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "3",
        "xEnd"        : "7",
        "yStart"      : "6",
        "yEnd"        : "11",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-03.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "9",
        "xEnd"        : "14",
        "yStart"      : "16",
        "yEnd"        : "21",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-09.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "21",
        "xEnd"        : "26",
        "yStart"      : "19",
        "yEnd"        : "24",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-10.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "6",
        "xEnd"        : "9",
        "yStart"      : "20",
        "yEnd"        : "24",
        "xSpanMobile" : "2",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-04.jpg"
      }
    ]
  },










  {
    "cells" : [
      {
        "type"        : "title",
        "xStart"      : "17",
        "xEnd"        : "29",
        "yStart"      : "1",
        "yEnd"        : "4",
        "xSpanMobile" : "2",
        "text"        : "Forme Brutaliste"
      },
      {
        "type"        : "image",
        "xStart"      : "9",
        "xEnd"        : "17",
        "yStart"      : "1",
        "yEnd"        : "9",
        "xSpanMobile" : "2",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-06.jpg"
      },
      {
        "type"        : "prev",
        "xStart"      : "3",
        "xEnd"        : "9",
        "yStart"      : "7",
        "yEnd"        : "10",
        "xSpanMobile" : "1"
      },
      {
        "type"        : "next",
        "xStart"      : "20",
        "xEnd"        : "27",
        "yStart"      : "17",
        "yEnd"        : "20",
        "xSpanMobile" : "1"
      },
      {
        "type"        : "image",
        "xStart"      : "20",
        "xEnd"        : "31",
        "yStart"      : "6",
        "yEnd"        : "12",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-03.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "1",
        "xEnd"        : "9",
        "yStart"      : "10",
        "yEnd"        : "17",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-08.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "11",
        "xEnd"        : "15",
        "yStart"      : "17",
        "yEnd"        : "24",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-01.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "17",
        "xEnd"        : "20",
        "yStart"      : "4",
        "yEnd"        : "9",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-09.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "9",
        "xEnd"        : "15",
        "yStart"      : "9",
        "yEnd"        : "17",
        "xSpanMobile" : "2",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-02.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "20",
        "xEnd"        : "24",
        "yStart"      : "12",
        "yEnd"        : "17",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-11.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "24",
        "xEnd"        : "30",
        "yStart"      : "12",
        "yEnd"        : "17",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-04.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "5",
        "xEnd"        : "11",
        "yStart"      : "17",
        "yEnd"        : "22",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-05.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "15",
        "xEnd"        : "20",
        "yStart"      : "9",
        "yEnd"        : "20",
        "xSpanMobile" : "1",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-12.jpg"
      },
      {
        "type"        : "image",
        "xStart"      : "15",
        "xEnd"        : "24",
        "yStart"      : "20",
        "yEnd"        : "25",
        "xSpanMobile" : "2",
        "image"       : "https://xsupport.local/wp-content/uploads/2022/02/tell-it-slant-10.jpg"
      }
    ]
  }
]

In your Slide element, you will then have to remove the Image element and use the Text element where you insert the {{dc:looper:field key="text"}} dynamic shortcode to display the text content you have added in the JSON code.

Best Regards.

Thanks @ruenel!

The point is that I would like to keep some cells as images and use others for text. So I guess I should keep the Image element and simply add a Text or a Heading element. In the JSON code I would change the value fortype from image to something else, for example, to text whenever I want a cell to show text instead of an image, that way, because the Image element already has the condition {{dc:looper:field key="type"}} is image it would simple would not be output. The other way around I would create a condition for the new Text or Heading element as follows: {{dc:looper:field key="type"}} is text so the element won’t be output if the cell has an image and no text. Do you think this approach is the right one?

PS: the existing Image element, in fact, is a Div element (cornerstone element) that has been named “Image”. I created the new (named) Text element (a Div element) duplicating the existing (named) Image element and disabling its lower background layer and placing the text (via dynamic content {{dc:looper:field key="text"}}) using the background upper layer selecting the “Custom” option, stylyng the text box using custom CSS. This way we keep the animations right.

Thanks!

Hello Diego,

Yes, that should do it. And if you are unsure about your solution, to better assist you with your issue, can you please share us the page URL where we can see your grid? If you wouldn’t mind, please provide us your WP credentials as well. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Hi @ruenel,

I was able to achieve the desired result and everything seems to be working fine. I appreciate your help.

Thanks!

Best Regards

You are most welcome. We are glad we were able to help you out.
Please feel free to create another thread if you need any further information.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.