{"id":1793,"date":"2007-04-04T09:38:18","date_gmt":"2007-04-04T15:38:18","guid":{"rendered":"http:\/\/8stars.org\/a\/2007\/04\/04\/page-placards\/"},"modified":"2007-04-04T09:38:18","modified_gmt":"2007-04-04T15:38:18","slug":"page-placards","status":"publish","type":"post","link":"https:\/\/8stars.org\/a\/2007\/04\/04\/page-placards\/","title":{"rendered":"Page placards"},"content":{"rendered":"<p>There&#8217;s a growing trend towards using thumbnails of web pages&#8211;on those annoying <a href=\"http:\/\/www.snap.com\/\">Snap<\/a> previews, <a href=\"http:\/\/tokerud.typepad.com\/blog\/2007\/02\/netnewswire_3_a.html\">tabs in NetNewsWire 3<\/a>, <a href=\"http:\/\/www.omnigroup.com\/images\/images-5\/features\/tabs.png\">tabs in omniweb,<\/a> the front page of <a href=\"http:\/\/del.icio.us\/\">del.icio.us<\/a>, etc. These thumbnails are simple screen-grabs of the page in question.<\/p>\n<p>This may be an improvement over a text description of the item in question, but it compresses a lot of detail into oblivion. What if, rather than relying on the client to generate the thumbnail, the author generated it? I&#8217;m calling this a page placard.<\/p>\n<p>Each page could use the <code>link<\/code> element to refer to its placard, So for this page, the link might look something like this:<\/p>\n<pre><code>&lt;link rel=\"placard\" \n      type=\"image\/png\"\n      href=\"https:\/\/8stars.org\/a\/2007\/04\/04\/page-placards\/placard\/\"\n      title=\"page placard for blog entry 'page placards'\" \/&gt;<\/code><\/pre>\n<p>I&#8217;m imagining 128 x 96 pixels as a suitable placard size. In the simplest case, the placard would be a static graphic&#8211;like a favicon on steroids. So for this blog, it might be something like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/8stars.org\/a\/content\/placard1.png\" height=\"98\" width=\"130\" alt=\"static page placard\" \/><\/p>\n<p>A more sophisticated approach would be to generate the placard on the fly (and, of course, caching it) using <a href=\"http:\/\/www.imagemagick.org\/\">ImageMagick<\/a> or the like: for a blog, it might be using a branding icon and post title text; for flickr or a photo-gallery app, it might be a thumbnail of the current graphic with a branding icon as a screen-bug. <\/p>\n<p>So a more sophisticated version of the above placard might look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/8stars.org\/a\/content\/placard2.png\" height=\"96\" width=\"128\"alt=\"dynamic page placard\" \/><\/p>\n<p>A placard for a photo page on Flickr might look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/8stars.org\/a\/content\/placard3.png\" height=\"96\" width=\"128\"  alt=\"Dynamic placard for flickr image\" \/><\/p>\n<p>Whenever a client needs a thumbnail of a page, it looks for the placard link first, and if available, uses that. Letting the author control the appearance of the placard should result in more relevant and immediately legible thumbnails.<\/p>\n<p>This also suggests that even in the absence of an author-defined placard, it would be possible for the client to cobble together something like a placard using, say, the favicon and an element or two from the RSS feed. Heuristics or templates could be used with popular sites to customize how those placards were generated.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An idea for improved web-page thumbnails<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[140,286,287,310,326,434],"class_list":["post-1793","post","type-post","status-publish","format-standard","hentry","category-net-stuff","tag-delicious","tag-metadata","tag-microformats","tag-netnewswire","tag-omniweb","tag-thumbnail"],"_links":{"self":[{"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/posts\/1793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/comments?post=1793"}],"version-history":[{"count":0,"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/posts\/1793\/revisions"}],"wp:attachment":[{"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/media?parent=1793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/categories?post=1793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/8stars.org\/a\/wp-json\/wp\/v2\/tags?post=1793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}