A photo upload is typically how photo posts are created.
The term “photo” can also refer to a profile photo.
- 1 Why
- 2 How
- 3 IndieWeb Examples
- 4 Notes with image examples
- 5 Discussion
- 6 Silos
- 7 Brainstorming
- 8 Software
- 9 Sessions
- 10 See Also
You should own your photos like you own any other content you create. Many photos sites have gone down over the years, taking invaluable personal memories with them.
There are different approaches to posting photos. E.g.
- As a note with a primary image
- As an image, with text (caption) only following
- the image is the focus of the post, and text is in service of the image.
- Hosting variations - image files hosted on
How to markup
Be sure to markup your actual photo image (or hyperlink to higher quality image)
class="u-photo". A photo post could look like this:
<div class="h-entry"> <img class="u-photo" src="photo.jpg"> <p class="p-content">Look at this awesome sunset!</p> <p>published on <time class="dt-published">2013-03-07</time> by <a href="/" class="u-author">me</a> </div>
(could be rephrased better) This also means, don't go marking up every random image in every random post with "u-photo", unless you really want every random post being mistaken for a photo post.
Tagging (AKA annotating) photos, initially popularized by Flickr, has become a key motivation for publishing photos. Here are a number of ways you can tag photo posts, both directly in a post, and as a response to a photo post!
Implemented / in practice:
- tag / tag-reply - tag a photo with a word or phrase
- person-tag / person-tag-reply - tag a photo with a person
Research / Brainstorming:
- location / location-of - setting/suggesting the location of a photo is colloquially referred to as tagging a photo with a location.
- area-tag / area-tag-reply - tagging a specific area of a photo, either with text, or a person-tag.
Consider adding research from analyzing IIIF prior and current work.
- Flickr - as a backup, for Creative Commons distribution
- Bridgy Publish supports POSSEing to Flickr!
- Instagram (as much as you can fake a POSSE post to Instagram using ownyourgram to PESOS then link back to the IG photo with u-syndication)
- Wikimedia Commons - as a commons rather than a silo, it may make sense to start POSSEing here as a backup/distribution/CDN mechanism
In addition, it makes sense to POSSE to generic silos, despite the fact that they will only retain a (likely) lower resolution copy of your photo:
- Twitter - as a native Twitter photo tweet for your friends on Twitter to see your photos
- using TwitterAPI, or
- using Bridgy Publish
- Facebook - similarly for your friends on Facebook to see your photos
- using Bridgy Publish - which also supports copying over person-tags (of anyone person-tagged with their indieweb site who is signed up on Bridgy, or with Facebook profile URLs with profile IDs)
You should POSSE any person-tags on your photo to any POSSE copy as well.
Sorted by earliest photo posts first.
- multi https://snarfed.org/2014-12-23_12146
- very much looks like a photo
- no explicit photo post markup, rather, it's marked up as an article with a nested check-in inside.
- Facebook POSSE: https://www.facebook.com/snarfed.org/posts/10101422243050323
- as a multi-photo post with location information (rather than a check-in) with individual photo permalinks:
- http://bret.io/2013/02/26/pictures-from-portland/ (first photo post)
- http://bret.io/2014/05/18/ownyourgram/ (first photo post with ownyourgram)
Ben Werdmuller uses idno to post photos (including taking them with a mobile web upload interface that uses the camera!) on werd.io (since ????-??-??), and POSSEs them to Facebook and Flickr (since ????-??-??)
- e.g. ??? a photo post permalink on werd.io
- mobile photography and posting demonstrated live at IndieWebCamp 2013 in Portland.
- e.g. https://kylewm.com/photo/2014/05/17/1 (OwnYourGram)
- https://kylewm.com/photo/2014/06/29/1 (direct upload)
- multi-photo: https://kylewm.com/2014/06/untitled-1 (possed to Facebook and Twitter as a simple link)
- http://adactio.com/notes/7021 - first photo POSSEd to both Twitter and Flickr:
Calum Ryan has been posting photos directly to his website and then syndicating to Twitter since 2015-07-19. Examples:
- Uploads the photo(s) to G+ albums purely for storage
- Publishes a photo(s) post on his own site
- (Semi-)automatically POSSEs to Twitter as a photo post via Bridgy, since 2014-08-30
- Manually POSSEs to G+.
- 2014-07-27 single https://kartikprabhu.com/notes/dusty-rhodes-watershed
- POSSEd as a note to Twitter: https://twitter.com/kartik_prabhu/status/493622610929152000
- POSSEd as photo to G+: https://plus.google.com/117114060857732496623/posts/h73UJiUcCvU
- 2014-07-28 multi https://kartikprabhu.com/notes/owen-engine
- POSSEd as a note to Twitter: https://twitter.com/kartik_prabhu/status/493868886283280384
- POSSEd as multiple photos to G+: https://plus.google.com/+KartikPrabhu/posts/abVAnynme5w
- Usually uses Instagram iOS client to post a photo there.
- Sometimes to Wikimedia commons instead.
- Sometimes to IndieWebCamp wiki instead.
- Writes & posts a note on his own site that starts with a direct .jpg URL of the photo image, then a space/linebreak, then permalink of the Instagram post, then caption.
- That "note" is auto-upgraded by CASSIS's
auto_linkfunction into a photo post by putting the
u-photoclass name on the auto-embed
<img>of the JPG, since it's the first URL in the "note".
- Falcon automatically uses Bridgy Publish to POSSE the photo as a photo post to Twitter & Facebook (since 2015-11-08 including POSSEing Facebook person-tags since 2015-12-05), and Flickr (since 2016-02-01, manually since 2016-01-16 of a 2016-01-01 photo), saving the resulting syndication URLs in storage.
- 2015-244 (09-01) http://tantek.com/2015/244/t1/did-entire-npsf-trackattack
- POSSEd as note to Twitter: https://twitter.com/t/status/638755285159559168
- abbreviated text, with permashortlink to full post on own site
- Manually POSSEd as photo to Facebook: https://www.facebook.com/photo.php?fbid=10101862796233213
- with entirety of text, including whitespace like line-breaks.
- POSSEd as note to Twitter: https://twitter.com/t/status/638755285159559168
- 2015-254 (09-10) http://tantek.com/2015/253/t1/wakeupthesun-gasworkspark-np-sea
- POSSEd as complete note to Twitter: https://twitter.com/t/status/641956534994501632
- Manually POSSEd as photo to Facebook: https://www.facebook.com/photo.php?fbid=10101877363580133
Since this was an auto-upgrade change, it is likely that there are older notes that got upgraded to photo posts as well.
- 2015-312 (11-08) http://tantek.com/2015/312/t2/yesterday-cat-mocha-caturday
- multi-photo: http://tantek.com/2015/352/t1/building-lights-clouds-heels-cab
- has two photos
- only first was POSSEd via Bridgy Publish to Twitter and Facebook
- with person-tags: http://tantek.com/2015/352/t2/freedom-tower-np-nyc-winter
- though none of the person-tags made it through
- 2015-346 (12-12) http://tantek.com/2015/346/t2/eiffel-tower-small-world
- Photo posted/hosted at Wikimedia commons instead of Instagram
- First self-hosted photo: https://gregorlove.com/2015/08/i-found-some-silers/
- Earliest example with photo hosted on Flickr: https://gregorlove.com/2014/07/ladies-via-sarah5/
j4y_funabashi is backfilling his site with ~10 years worth of photos
- I think this is the first photo I posted http://j4y.co/p/20160405164556_5703ddb45dbf0
- First example: https://martymcgui.re/2016/04/28/133049/
- First example: https://martymcgui.re/2016/08/28/114014/
- Panoramas work like a regular photo post with a couple of exceptions:
- The large image size can lead to failed uploads or server rejections
- A panoramic photo is differentiated from a non-panoramic photo by EXIF XMP tag "ProjectionType=equirectangular"
- First example: https://sixtwothree.org/photos/1
- One-click POSSE to Flickr and Twitter
- Flickr copy (e.g. https://www.flickr.com/photos/jgarber/23207722914/) includes title, description, and tags from original post as well as a link back to the original's URL
- Twitter copy includes title and link back to original's URL
- Automated POSSE to Facebook using IFTTT
- Manual POSSE to Instagram using a custom Workflow (iOS app) action
Notes with image examples
Notes with embedded photos that are not marked up with
u-photo are similar to photo posts.
- 2017-07-21: the image src in this post is dead currently
- gRegor Morrill: I don't understand the distinction between 'photo' and 'note with photo.' It was suggested in chat by mko that a 'photo' post would be a photo with no other content. However, this page indicates caption text may follow the photo. Per discussion, the caption would be the p-summary/p-name of the photo post. This seems to make it no different than a regular note, then, as far as microformat parsing. Example: http://gregorlove.com/notes/2014/07/15/2/ — IRC log
- Per further discussion, mko explained that the caption would not appear in the e-content, as it does in my example. He offered these code examples to demonstrate the difference: https://gist.github.com/mko/f05e8cb0d2423f6deaa7
- On a photo post, text is directly "related to the photo", where text in a note can be "conversational" or tangential.
<mko> Another example, from my own experience. I was the design lead at hi5. We did research into how users were using the Photos feature versus the Status Update feature (which had the ability to post a photo). Users posted photos without any text the vast majority of the time. When users posted status updates with photos, on the other hand, they almost never did so without accompanying text. On top of that, we found that when there was text accompanying a photo in the Photos section, it was almost always a caption related to the photo (with very few exceptions), whereas those in a status update that would go on the Friend Feed typically was conversational and not directly related to the photo.
- Kartik: I do not understand what would be the UI/UX difference in posting/reading a "photo with caption" vs "note with photo" ? Some examples (silo/indieweb) distinguishing these cases would be good.
- Kylewm.com: I would consider this post about going to a museum a note with a photo that is not a photo post — The text stands alone; the image is secondary
- Wwelves.org perpetual-tripper facebook example of posting with embedded photo, which in turn has its own description
The following silos specialize in photo posting/hosting/sharing:
In addition, the following silos support photo posts in addition to other types of posts:
Here are some notes on specific silo treatment of photos:
With Facebook, you have the options of:
- creating an actual photo post (preferred)
- Note that the POSSE_to_Facebook#See_Original trick does not work with photo posts
- or posting a status update (note) and linking to the original photo or if you're linking to a permalink on your own site (e.g. as part of POSSEing), optionally using OGP to specify the image to use for a preview.
Creating an actual photo post looks much better. More detail: POSSE_to_Facebook#Posting_Photos_via_the_Facebook_API
People Area Tagging
More brainstorming about POSSEing photos!
Distinguishing Photos from Notes
Bridgy Publish has a concrete use-case where it would be useful to mechanically differentiate posts where the photo is primary, vs. notes with an included image that is not the focus of the note. Photo posts should be POSSEd as native photo post types on Facebook and included as attached media on Twitter. POSSEd notes would prefer to link to the original post, and possibly include the image as a link-preview.
The problem is that both types have the same mf2 representation: p-name/e-content for caption and u-photo for the image.
Simplest solution is to treat all
posts notes with a
u-photo as photo posts.
Why POSSE rather than TwitterCard
(Not sure if this belongs here or on Twitter page, but capturing as part of this for now.) Advantages to POSSEing actual photos to Twitter, rather than just a link to a photo post on your site with Twitter Cards metacrap markup:
- Further distribute the use of Twitter kind of like a CDN for your photos
- People see a larger version of the photo via a phototweet than a Twittercard
- Usual avoid metacrap (silo-specific meta tags) advantage
- Photo tweets appear inline in tweet list views (e.g. Twitter timeline / homepage) whereas twitter cards won't appear inline automatically (require twiddling open).
- Photo tweets work immediately, whereas photo cards require that Twitter whitelist your domain for cards in general (and maybe in particular for photo cards?)
- Using the TwitterAPI hides the proprietariness, whereas using twittercards means your own website has proprietary metacrap on it
- Twittercards set a worse example (proprietary metacrap) for others that may view source
Two reasons why:
- Your own convenience / ease of use. Some silos have nice/easy person-tagging UIs, i.e. that often auto-suggest who to tag in a photo with a simple one button (Yes) UI to do it (as you select/hover faces), e.g. Facebook. Thus it may be easier to implement backfeeding person-tags than implementing your own person-tagging UI (and facial recognition support too!)
- Person-tags from friends. Some silos let your friends tag people they know in your photos (e.g. Facebook, Flickr), and thus they're likely to do so. You should backfeed these person-tags from your friends back to your original photo post.
Bridgy backfeed does not yet support backfeeding person tags from POSSE copies of photo posts.
- gRegor Morrill When I start hosting my own photos, I have thought about using the Coral CDN. http://www.coralcdn.org/
- Tantek Çelik I'm hosting by using static private igx.4sqi.net JPG URLs currently (occasionally similar direct static JPG URLs from Wikimedia posts or IndieWeb uploads), but want to switch to my own images.tantek or photos.tantek etc. URLs that redirect.
We need to collect the different ways people are marking up the caption of a photo post, e.g. in which properties (name, summary, content, several thereof?), in same property as u-photo images themselves (e.g. in e-content), and then come up with one or a few recommended ways to markup the caption of a photo.
Inside the e-content
- I have been wrapping the
img class="u-photo"and caption in the
e-content. Mainly because I initially set up my templates to wrap the post's content that way -- for use with notes and articles. I'm open to changing that for photos. Currently, removing the
e-contentand putting the caption in a
p-name p-summarysounds like a good recommendation. gRegor Morrill 18:25, 22 December 2017 (PST)
add other variation
Software you can install on your IndieWeb server to host your own photos
IndieWebCamp sessions about photo posts and photos in general: