4

I have an app that displays the html of a blog post in a WebView. The images, however, are rather large and do not fit to the screen. When viewing the post in the Android Google Reader app, however, all of the images have their width reduced to fit the screen.

The Android Google Reader will also parse out all embedded Youtube and Vimeo embeds and replace them with thumbnails with links so the dedicated Youtube player can play the video instead.

How would I go about doing this? I've tried using Jsoup to match all the images in a post and alter their width, but I don't know how to go about modifying the Youtube video embeds.

Yannick Blondeau
  • 9,465
  • 8
  • 52
  • 74
SeanPONeil
  • 3,901
  • 4
  • 29
  • 42
  • I assume if you are using a CMS like wordpress - using a mobile theme is out of the question? I have seen many sites do this including SO where I get a different theme and content is altered to help people on mobile devices. It often runs on the sub domain m.domain.com. Just a thought. – Graham Smith Jan 11 '12 at 18:48
  • I'm pulling down information from a Drupal site using their Services module. The app has to be native, so a mobile theme is unfortunately out of the question. – SeanPONeil Jan 11 '12 at 18:49
  • I have just finished a project using the same module. The only thoughts I have are that you could read the node info as a string and change all youtube embeds via regex to links. Android picks up on YouTube links and on my devices it offers me the choice to open in YouTube or via browser. – Graham Smith Jan 11 '12 at 18:52
  • Ok to cope with images you should be able to alter those again by manipulating the img url via a module like image cache, which will then build a resized image for you. I am just pitching ideas here hence this is not really a proper answer. – Graham Smith Jan 11 '12 at 18:55
  • Using regex to modify the Youtube embeds messed up the tags when I tried it last, which is what lead me to using an HTML parser like Jsoup. If you have a working regex, that would be great. – SeanPONeil Jan 11 '12 at 19:00
  • it depends what the youtube embeds look like from the response of the API. Post an example of a node's content then perhaps I can help. – Graham Smith Jan 11 '12 at 19:01
  • Here's an example https://gist.github.com/1596514 – SeanPONeil Jan 11 '12 at 20:08
  • Ok give me a while to test - I will be back! – Graham Smith Jan 11 '12 at 20:15
  • Ok this is probably not perfect and will work on single video reference. I have tested the regex on a regex tester. 1) Get the object portion of the string 2) In here get the youtube video link including src="[^"]*" 3) split on '=' get the full url of the video 4) Take url and put into new string which is URL OF VIDEO 5) Take the new string from 4) and replace the original match in 1) with what we have in 4) – Graham Smith Jan 11 '12 at 20:43

1 Answers1

7

For converting embed Youtube videos to thumbnails you can do it with mobitube.js code from Mobilize.js project:

https://github.com/mobilizejs/mobilize.js/blob/master/js/mobitube.js

Also I believe Google Reader simply resizes the images using CSS overrides.

Mobilize.js has also tools for rewriting image tags and perform "de-float" operation for them:

https://github.com/mobilizejs/mobilize.js/blob/master/js/mobilize.js#L2005

More about defloat algo:

http://webandmobile.mfabrik.com/docs/web-and-mobile/user-manual/resizing

If you want to resize images on the server-side this is a third party solution:

http://adaptive-images.com/

... though writing your own image resize proxy server from the scratch is not that challenging.

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435