如何使用MirrorAPI生成3x2圖像結果網格？

Question

什麼是正確的HTML/JSON語法來生成格式爲「6 imges on grid」的時間線卡，就像內置圖像搜索生成的一樣？樣品附加。我希望它是我的玻璃器皿產生的響應包的主要卡片。

Answer 1

您可以使用標準的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與圖像在他們完成效果。你也可以使用一張表來達到同樣的目的。

Answer 2

您也可以使用表或列表你想要什麼。只要使用這個類文章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" 
     } 
    }