iOS Presenting Wordpress content?

truehybridx · Jan 10, 2012

Background: my app is an extension to a wordpress blog. It downloads a json containing the blog articles, parses them into individual articles (title, id, thumbnail, content) then displays them in a tableView. This part all works and looks nice.

Problem: Im looking into a good looking way to present the articles when the user taps one from the tableView. I would like it too look something like TUAW's or BGR's apps but I'm stuck -_- I would also like to keep the article formatting as intact as possible.

Libraries in use: SBJSON, ASIHTTPRequest, SDWebImage

Any advice

Heres my code that puts the webView in use

Code:

- (void)loadMyArticleData
{
    //create the beginning of the html string
    NSMutableString *html = [NSMutableString stringWithString: @"<html><head><title></title></head><body style=\"background:transparant;\">"];
    
    // Remove the iframe junk that wordpress has
    NSString *htmlText = [myArticle objectForKey:@"content"];
    NSRange range1 = [htmlText rangeOfString:@"<iframe"];
    NSRange range2 = [htmlText rangeOfString:@"</iframe>"];
    if (range1.location != NSNotFound && range2.location != NSNotFound) {
        htmlText = [NSString stringWithFormat:@"%@%@",
                    [htmlText substringToIndex:range1.location],
                    [htmlText substringFromIndex:(range2.location+range2.length)]];
    }
    
    
    // finish our html code
    [html appendString:htmlText];
    [html appendString:@"</body></html>"];
    
    //make the background transparent
    [webView setBackgroundColor:[UIColor clearColor]];
    
    NSURL *baseURL = [NSURL URLWithString:@"http://leimobile.com"];
    
    //pass the string to the webview
    [webView loadHTMLString:[html description] baseURL:baseURL];
}

Heres the content i got from the JSON off wordpress

Code:

"content":"<!-- Start Shareaholic LikeButtonSetTop Automatic --><!-- End Shareaholic LikeButtonSetTop Automatic --><p>The new app called <a href=\"http:\/\/click.linksynergy.com\/fs-bin\/click?id=ZjtqkHRXAuU&subid=0&offerid=146261.1&type=10&tmpid=3909&RD_PARM0=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fbreathaleyes-bac-scanner%2Fid477771569%3Fmt%3D8&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fbreathaleyes-bac-scanner%2Fid477771569%3Fmt%3D8\">BreathalEyes<\/a> determines your blood alcohol content level based on the movements in your eye. The App detects rapid eye movement caused by drinking and the creators claim that it is based on 40 years of research yet they say the app is for Entertainment Only.<br \/>\nBy detecting and analyzing Horizontal Gaze Nystagmus (HGN), BreathalEyes approximates a subjects Blood Alcohol Content (BAC). BreathalEyes allows the owner the ability to test anyone at anytime once downloaded onto their smartphone. All you need to help your friends and family make better informed decisions when drinking alcohol is BreathalEyes on your smartphone and a few seconds of their time.<br \/>\n<a href=\"http:\/\/click.linksynergy.com\/fs-bin\/click?id=ZjtqkHRXAuU&subid=0&offerid=146261.1&type=10&tmpid=3909&RD_PARM0=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fbreathaleyes-bac-scanner%2Fid477771569%3Fmt%3D8&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fbreathaleyes-bac-scanner%2Fid477771569%3Fmt%3D8\">Breathaleyes<\/a> cost $0.99 and is available on the App Store now.<br \/>\n<object width=\"640\" height=\"360\" classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowScriptAccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/sMHqEJS98Ck&hl=en_US&feature=player_embedded&version=3\" \/><param name=\"allowfullscreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><embed width=\"540\" height=\"360\" type=\"application\/x-shockwave-flash\" src=\"http:\/\/www.youtube.com\/v\/sMHqEJS98Ck&hl=en_US&feature=player_embedded&version=3\" allowFullScreen=\"true\" allowScriptAccess=\"always\" allowfullscreen=\"true\" allowscriptaccess=\"always\" \/><\/object><\/p>\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Fleimobile.com%2Fbreathaleyes-app-are-you-too-drunk-to-drive%2F&layout=standard&show_faces=true&width=300&height=25&action=like&font=arial&colorscheme=light\"  id=\"fbLikeIframe\" name=\"fbLikeIframe\"  scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\"  class=\"fbLikeContainer\"  style=\"border:none; overflow:hidden; width:300px; height:25px; display:inline;\"  ><\/iframe><div class=\"shr-publisher-5467\"><\/div><!-- Start Shareaholic LikeButtonSetBottom Automatic --><div style=\"clear: both; min-height: 1px; height: 3px; width: 100%;\"><\/div><div class='shareaholic-like-buttonset' style='float:none;height:30px;'><a class='shareaholic-googleplusone' data-shr_size='standard' data-shr_count='false' data-shr_href='http%3A%2F%2Fleimobile.com%2Fbreathaleyes-app-are-you-too-drunk-to-drive%2F' data-shr_title='BreathalEyes+app%3A+Are+you+too+Drunk+to+Drive%3F'><\/a><\/div><div style=\"clear: both; min-height: 1px; height: 3px; width: 100%;\"><\/div><!-- End Shareaholic LikeButtonSetBottom Automatic -->"},"previous_url":"http:\/\/leimobile.com\/noaccsplash-updated-to-1-0\/","next_url":"http:\/\/leimobile.com\/breaking-apple-releases-ios-5-1-beta-3-to-developers\/"}

I figured i could first get the youtube link out of the content, strip the junk out and add this swapping for the correct link? But I'm horrible at stripping and manipulating strings this much

Code:

<iframe id="yt" class="youtube-player" type="text/html" width="280" height="186" src="http://www.youtube.com/embed/sMHqEJS98Ck" frameborder="0">

Search

Search

iOS Presenting Wordpress content?

truehybridx

macrumors member

Our Staff