3

生成格式为“网格上的 6 个图像”的时间线卡的正确 HTML/JSON 语法是什么，就像内置图像搜索生成的那样？附上样品。我希望它成为我的玻璃器皿生成的响应包的主卡。

玻璃上的图像结果

4

2 回答 2

3

您可以使用标准 CSS 和 HTML 来生成图片。下面是一个这样的示例（使用操场进行验证）并且似乎有效：

{
  "html": "<style>\n.box {\n  width: 210px;\n  height: 180px;\n  float: left;\n  border: thin solid white;\n}\n</style>\n\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n    <div class=\"box\">\n      <img class=\"box\" src=\"https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360\">\n    </div>\n\n",
  "notification": {
    "level": "DEFAULT"
  }
}

这使用带有图像的浮动 div 来实现效果。您可能也可以将表格用于相同目的。

于 2013-06-02T14:44:23.147 回答
1

您还可以使用表格或列出您想要的任何内容。只需在文章中使用此类 class=\"mosaic mosaic6\" 

  {
      "html": "<article class=\"photo\">\n  <ul class=\"mosaic mosaic6\">\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/washington.jpg)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/lincoln.png)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/obama.jpg)\"></li>\n  </ul>\n  <ul class=\"mosaic mosaic6\">\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/washington.jpg)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/lincoln.png)\"></li>\n    <li style=\"background-image: url(https://mirror-api-playground.appspot.com/links/obama.jpg)\"></li>\n  </ul>\n </article>\n",
      "notification": {
        "level": "DEFAULT"
      }
    }

在此处输入图像描述

于 2014-02-05T11:04:01.790 回答