Panorama Heidenheim - Using tumblr on iOs to post to PW

[Philipp]

Have a look at those sad panoramas at http://panorama.philippreiner.de/

It's just a little idea I've had this afternoon.

I wanted to post easily from my iPhone to a Processwire installation without using the admin backend*

(*= Because I have to login, navigate to the site, click through pages,...)

1. I'm using the tumblr iOs App to post to a Tumblog. (Screen) .
   
2. Now I'm using apeisas Data Import to get the data from the Tumblr API . I'm using the old v1.1 API because the XML is easier to fetch. The posts are now saved to PW
   
3. Because I wasn't able to programm a better solution, I'm downloading the images from the URL stored in a field to the original images field. I can now use the PW image functions.
   
4. Now I can use them as normal pages, do the simple template and start posting.
   

Only problem, the images from tumblr are resized down to 1280px on the long edge.

Also, the site is responsiv and the images are loading with lazyload using a <noscript> fallback for older browsers.

[ryan]

This is really awesome Philipp! Thanks for posting. Now I want one of these. I wonder if there's some way to do it without Tumblr. Would be great to have an app that you just take a pic, tap "looks good" and it shows up on the site. iPhone doesn't give us many options when it comes to uploading pics, so I'm guessing an intermediary like Tumblr really is necessary. Really a beautiful solution and site you've put together there.

[horst]

Hi Philipp, hi Ryan,

the idea of Philipp was very inspiring to me. So I have thought a bit about that and came to conclusion that the most common denominator is Email. Every smartphone supports Imagesharing via Email, and also one can put up an Image from DesktopPC.

I've put together some php-classes to access POP3-Accounts, retrieve and parse Messages to (first find ) and extract Images. I have uploaded it as a first 'proof of concept'. In this state it retrieves the _first_ image from Message, regardless if it is attached, inline-attached, if it is a Textmail or HTML-Mail or from other MultiPart-Mails. The Subject from Email could be the Title of a Post.

Adding Bodytext could be an option, but is not very foolproof with that lot of different Email-Mime-Types, but would be posible with some more amount of coding-time.

Interesting Option could be to send Title in MailSubject and a Image-URL in MailBody - fetch the Image from URL and process it.

Also sending multiple Images could be possible.

- So, as I can do the above stuff by myself, I'm not able to put the ProcessWire-Part together at this time. (Maybe next year, - but not for now ;-) )

My question is: "Philipp, can you provide the code / example for the Import into ProcessWire?" If you like, we can put it together to become it a Plugin Module, maybe?

At current state my class provides a array with str-Title and str-Imagedata per Mail. (processing till there is on the fly without using diskfiles)

The current Setup can be viewed here: http://biriba.de/pw_pop3/pw_pop3_test.php

But, please, no stress-tests!

Emailadress is in the top-left corner, you may send a picture by mobilephone to it (around 500 px or smaller would be fine, because all images get scaled down to 320px for the test) and reload the page after a minute or two.

Horst

[Philipp]

Hi,

using the E-Mail is really a nice idea and you could bypass the limitations of the tumblr API (1280px Images,..). On the other hand, you do not need any special tool (as you said, nearly every smartphone has a share-by-mail feature integrated)

I'm just using apeisas Process Data Import Plugin and this is "my code" behind writing the PW pages. You could say, my example site was more like a proof-of-concept by using the modules and tumblr. Sorry, can't help you here.

But maybe this helps:

		// Here we create the pages
		foreach($values as $item) {
			$pageName = $this->sanitizer->pageName($item[1], true); // 1 is ID for title field
			$p = $curPages->get("template=$template, name=$pageName");
			if (isset($p->id)) {

				// We already have the page, just update the values
			} else {
				$p = new Page();
				$p->template = $template; 
				$p->parent = $this->pages->get($parent_id);
				$newPages++;
			}

			foreach($item as $key => $value) {
				$field = $this->fields->get($key);
				$fName = $field->name;
				$p->$fName = $value;
			}

			$p->name = $pageName;
			$p->save();
		} 

https://github.com/apeisa/ProcessDataImport/blob/master/ProcessDataImport.module#L379

(from apeisas module)

The Cheatsheet might help.

[horst]

Hi Philipp,

many thanks for these tips.

The main part what I have not understand till now is how you have passed the image-data or imagefile to the importer-module.

But maybe I first should install it and play around a bit with xml-feeds to see and learn how it works.

Horst

[Nico Knoll]

Here's a part of my latest code. Should help: (I added some comments)

if($input->post->save) {

		$gallery->setOutputFormatting(false); 

		// Get the path for the temp file
		$tmp_path = $config->paths->assets.'tdotTmp/';

		// Create the temp file
		$filename = $tmp_path.time().'.png';
		$handle = fopen($filename, 'w+');

		// $input->post->dataUrl is the base64 encoded png image
		// This line replaces the "image/png;base64," to get the raw base64
		$uri = substr($input->post->dataUrl,strpos($input->post->dataUrl,",")+1);
		$encodedData = str_replace(' ','+',$uri);
		
		// Decode the base 64 data
		$decodedData = base64_decode($encodedData);

		// write the encoded data in the tmp file
		fwrite($handle, $decodedData);
		fclose($handle);

		// Upload the temp file as a new file in the gallery
		$gallery->upload_image->add($filename); 

		$gallery->save();

	}

[ryan]

Horst, I think I can help with this. I don't think that XML feeds will apply since you are pulling from email and putting directly into ProcessWire (rather than Tumblr, where the XML feed is used). I think a PW site profile or module that essentially does this: "read image attachments from email and post to pages" would be pretty fantastic… I'd use it myself. It seems like you are already mostly there.

Just spouting off ideas, which you may have already covered, but:

• Email sent to a confidential email address from a recognized sender's email (any other security necessary?)
• Create a new page in ProcessWire using a predefined template and parent.
• Use the email subject line as the 'title' of the page.
• Use the email body as the 'body' of the page.
• Add any image attachments to an 'images' field.

I wanted to make sure I understood the code side of what you've already got. Is the source also available to these includes?

    require_once( dirname(__FILE__) . '/mime_parser.php' ); 
    require_once( dirname(__FILE__) . '/rfc822_addresses.php' ); 
    require_once( dirname(__FILE__) . '/pop3.php' ); 
    require_once( dirname(__FILE__) . '/sasl.php' ); 
    require_once( dirname(__FILE__) . '/hn_basic.class.php' ); 
    require_once( dirname(__FILE__) . '/hn_picts.class.php' ); 

Also wanted to mention a typo:

if( preg_match( '#^image/[jpeg|png|gif].*$#', $p['Headers']['content-type:'] )!==1 ) 

You want to replace the "[jpeg|png|gif]" with "(jpeg|png|gif)" -- basically replacing the square brackets with parenthesis. Otherwise, the regex is asking "Match any one of these characters: "jpegpnggif|". Whereas I think what what you wanted to ask is: match either "jpeg", "png" or "gif". 

[horst]

Hi Ryan,

this is very nice to provide some help.

Just spouting off ideas, which you may have already covered, but:

• Email sent to a confidential email address from a recognized sender's email (any other security necessary?)

Email must be strictly confidential, also a list of valid sender emails or a single sender email.

Additionally one could define any Email-Header as mandatory, - this maybe very individually depending on Mobilephone, Email-Provider, etc.

 

• Use the email body as the 'body' of the page.

Yes, this will be the difficulty part of that thing, because many Mailer send mixed plainText and HTML Mails or MultipartMessages with 3, 4 and more Bodyparts.

Also many people will use automatic added Mailsignatures what should not be passed into every post

Maybe something like a defined start- and end- string or Tag is best solution, because one can parse all Bodyparts to match this. ??

I wanted to make sure I understood the code side of what you've already got. Is the source also available to these includes?

    require_once( dirname(__FILE__) . '/mime_parser.php' ); 
    require_once( dirname(__FILE__) . '/rfc822_addresses.php' ); 
    require_once( dirname(__FILE__) . '/pop3.php' ); 
    require_once( dirname(__FILE__) . '/sasl.php' ); 
    require_once( dirname(__FILE__) . '/hn_basic.class.php' ); 
    require_once( dirname(__FILE__) . '/hn_picts.class.php' ); 

Yes these are phpclasses from Manuel Lemos, licensed under http://opensource.org/licenses/bsd-license.html .

The classes are hosted at http://hn273.users.phpclasses.org/browse/author/1.html

The two classes beginning with hn_... are mine and also free for use. I PM you a url with ZIP of the whole package that you can have a closer look to it.

Also wanted to mention a typo:

if( preg_match( '#^image/[jpeg|png|gif].*$#', $p['Headers']['content-type:'] )!==1 ) 

Uuups. RegEx are not my friend

Thank's.

Horst

[ryan]

For anyone else following this thread, Horst and I are collaborating on building a module for this, but the discussion moved to email.

[diogo]

Thanks for telling Ryan. Can't wait to know about the result.

[ryan]

Good news, we actually have a working version of the module. When I woke up this morning, I got an email from Horst -- he had built the libraries and had them ready to go. With those, I was able to build most of the rest of it today. We'll probably send it back and forth once or twice to test, and then we'll post a version 1.0 hopefully within the next day or two here! 

[horst]

I have installed the very first version of the module four hours ago, and I like it.

With my Mailserver all behaves as expected, where as Ryan has an issue what needs to be solved.

Have send a new version to him and need some feedback, - and also some sleep now.

-

[ryan]

We've got this module just about ready for release. Here's an example of the module up and running and the [largely unstyled] output:

http://processwire.com/email-images/

[Pete]

Love it and I think it's an amazing module idea!

Can it handle multiple photos per email as was originally suggested earlier in this thread? I just don't see any groups under one title in your example gallery ryan, though this could easily just be that you haven't sent an email with multiple photos yet

It might be time to split this off from the original topic though as I only read this one by chance and wasn't expecting all this. Either that or when it's ready for release I suppose the new module topic can just link back here. I dunno... just mumbling to myself

[ryan]

Can it handle multiple photos per email as was originally suggested earlier in this thread? I just don't see any groups under one title in your example gallery ryan, though this could easily just be that you haven't sent an email with multiple photos yet

That's funny you mention that because while posting my photos I emailed Horst to see if it was possible. He said that it is. I told him I thought it would be the first request we got, and sure enough -- the request came even sooner than I expected. I've updated the module to support it, and just need to wait for his update before we can test it out. Once we've got that, we will go ahead and release the module. 

[Nico Knoll]

Is there a way to send texts, too, or only images?

[ryan]

An image has to be present before it'll import it. But it can include subject line text (which becomes the 'title' field) and body text. Because emails often contain a lot of extra junk (client specific stuff, signatures, etc.) you do have to clarify what is your intended body text by surrounding it with an opening and closing tag of your choice.