| <!DOCTYPE html> |
| |
| |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| |
| <!-- Bootstrap --> |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> |
| |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
| <!--[if lt IE 9]> |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
| <![endif]--> |
| <title>HApi sample content</title> |
| </head> |
| |
| <body> |
| |
| <div class="container"> |
| <div class="header"> |
| <h3 class="text-muted">Hypermedia API sample content - PIC 001</h3> |
| </div> |
| <div class="row"></div> |
| |
| <div class="row" data-sly-use.card="${'org.apache.sling.hapi.HApiUse' @type='/apps/sling/hapi_sample/types/pic_card'}" |
| data-sly-attribute="${card.itemtype}"> |
| <div class="col-lg-6"> |
| <div class="card-asset"> |
| <img data-sly-attribute="${card.itemprop.thumbnail}" class="show-grid" src="assets/preview1.png" alt=""> |
| </div> |
| </div> |
| <div class="col-lg-6"> |
| <div> |
| <h4 data-sly-attribute="${card.itemprop['title']}">PIC 001</h4> |
| |
| <p>Type: <span class="type">PSD</span></p> |
| |
| <p data-sly-attribute="${card.itemprop.resolution}" |
| data-sly-use.resolution="${'org.apache.sling.hapi.HApiUse' @type=card.proptype.resolution}" class="resolution"> |
| <span>Resolution:</span> |
| <span data-sly-attribute="${resolution.itemprop.width}">1620</span> x <span |
| data-sly-attribute="${resolution.itemprop.height}">670</span> |
| </p> |
| |
| <p>Size: </p><span data-sly-attribute="${card.itemprop.size}" class="size">249KB</span></p> |
| <meta data-sly-attribute="${card.itemprop.disabled}" content="false"/> |
| <div class="myinfo"> |
| <p class="mymodified"> |
| <i>Modified</i> |
| <span data-sly-attribute="${card.itemprop.modified}" class="date">2 days ago</span> |
| <span>Admin</span> |
| </p> |
| </div> |
| </div> |
| </a> |
| </div> |
| </div> |
| |
| <!-- /container --> |
| <footer class="footer"> |
| <p>HApi sample</p> |
| </footer> |
| </div> |
| |
| </body> |
| </html> |
