MirrorAPI를 사용하여 3x2 이미지 결과 격자를 생성하려면 어떻게해야합니까?

Question

내장 이미지 검색에서 생성되는 것과 같이 '그리드에 6 개의 이미지'형식의 타임 라인 카드를 생성하는 올바른 HTML/JSON 구문은 무엇입니까? 견본 첨부. 내 유리 제품이 생성하는 응답 번들의 선두 카드가되고 싶습니다.

Answer 1

당신은 사진을 생성하는 HTML 표준 CSS를 사용할 수 있습니다. 하나의 예 (검증하는 운동장을 이용)은 다음과 작동 표시 :

{ 
    "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" 
     } 
    } 

에서이 클래스를 사용