Discussion Forums  >  Uncategorized

Replies: 9    Views: 339

R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
02/19/11 06:32 PM (15 years ago)

Image sizing

I'm trying to get some header images working properly. (Loading from a URL) I believe the screen resolution of the iPhone4 is 640 w x 960 h. In portrait view, when I use an image that I have as 640 pixels wide, I'm finding I need to set the Header Image Layout > Image Width Small Device value to 320. That's half what I would expect. When I swapped out my image with one at 320 wide, then set the Image Width Small Device to 320, it fit perfectly. Just odd (to me) that it's not doing 640 here. I guess where I'm going with this is, would it be possible to express dimensions in % of screen size (such as in CSS). That way you could use the same image for all devices, and just tell it to display at 100% of width, or 90% of width if I want a margin, etc. Also, this might adjust properly for landscape mode, if you wanted a full-width header there also. (I'm guessing if I wanted to do full width in landscape, I'd insert the appropriate image for that width (480?) and just have it chopped off in portrait view.) I'm also thinking ahead to deployment on other devices, such as the mystical iPad2 or iPad3 or iPhone5 or the legion of androids, all with different resolutions. Keeping image sizing in the realm of % might overcome irregularities between devices and make for a much simpler design approach. Right now it's considerable sidework to prep images in various sizes and get them all in the right place, type in URLs and all that stuff. Bringing back theimage uploader/cropper tool in buzztouch will make this less of a task, and ultimately mean faster development.
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
02/19/11 09:13 PM (15 years ago)
I think the answer here is the cropper, it did make things so much easier. Also, it may make sense to allow or dissallow a screen to rotate to landscape. If it won't rotate to landscape (many times it shouldn't) then it's one less image to worry about. I'm not sure how the percentage calculations would work out, gonna have to think about that logic. It's easy enough to apply an arbitrary calculation, just not sure how to make it work across the devices (like you mentioned). Another thing that could help tons. Look at the advanced properites for a screen's background image, you can set the 'scale type.' This logic in the header image isn't being used - probably should be.
 
R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
like
02/19/11 10:00 PM (15 years ago)
Agreed, I do like the scale tyle logic for the backgrounds and it would be effect for headers with less concern over exact sizing.
 
R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
like
02/20/11 11:55 AM (15 years ago)
As far as the logic on % calculation, I'm just basing that idea on CSS/HTML's ability to set an image size as a % rather than # pixels. Not sure if the iOS has that kind of flexibility. But if it needs to be fed to iOS as a static # pixels, you could create a matrix of values for conversion, with each possible device output in mind. At the moment, you're adapting to two devices (Small Device aka iPhone and Large Device aka iPad) but this will grow someday. I noticed something odd last night. Haven't used the Show Device Info type page so I put one in and checked it out. It is telling me: iPhone: iPhone OS 4.2.1 Still Camera: YES Video Camera: YES Display: 320 x 480 Can Make Calls: YES Can Send Email: YES Can Send SMS: YES Cache: 105.4 KB (5 files) Clear Cache What I'm looking at is the Display: 320 x 480 Is buzztouch just treating all iPhones as 320 x 480 for images? My understanding is that iOS is rendering the text and all that appropriately and that's giving it full 640 x 960 resolution, but are the photos only rendered at half resolution? A close look with my untrained eye is telling me yes in the case of a header image I'm looking at right now, but this is still a guess. Of course this is just a 320 w header image I put in there. I'll have to look at a 640 w image again, set to 320 and compare.
 
R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
like
02/20/11 12:03 PM (15 years ago)
Ok, so tried the 640w image and ran into my original problem (duh). If I set the width to 320w, it's only giving me the center 320 pixels, and cropping off 160 pixels each on the left and right sides. So, yes, it appears the image support is only providing half resolution on the iPhone 4. Not a big deal. I'm just trying to get a good understanding of the tool and how I need to prepare images. I'm going to experiment with the Image Gallery feature next and see how that works, but thinking that 320w is probably the max there also?
 
R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
like
02/20/11 12:14 PM (15 years ago)
Image Gallery does respect the full resolution (640w) of the iPhone 4. Whether I put in a 320w or 640w image, it is automatically shown fully edge to edge across the width of the screen in both portrait and landscape modes. I presume I could drop in a 960w image and it would show full res across the width of the screen in landscape mode, too. Stretch to zoom is also active and effective. The difference in clarity between the full resolution and half resolution images is astonishing. The Image Gallery is a GREAT feature that I will be using quite a bit, I think!
 
R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
like
02/20/11 12:28 PM (15 years ago)
Bug Report: Image Gallery control panel When I add a new photo to the Image Gallery (from a URL), I can put the name of the photo (whatever I want to name it in the list) and then the URL in the appropriate fields. I realize it says Enter an image file name or an image URL, not both. The purpose here, as I understand it is to give you the option to either add by name (the name of the image you would drop in the source code's BT_Images folder), or by a URL. But if I fill out both, it is giving me the label of the image name that I choose. Is this intentional? It does not affect performance, so not really a bug. However, when I click on an Image Name in the list of images in the gallery, it opens up the Image Properties shadowbox. If I attempt to change the Image Name field here, it gives me an error: Error Saving! Enter an image file name, or a URL, not both So not much of a bug just a variance in behavior. Perhaps the error should result in the first case as well so that it is identical behavior. It does point out perhaps there could be a Title field added, so that I could self title the images. Then these titles could be used in the display of the gallery. Further, a subtitle or description field might allow for additional text. This way, the image gallery could contain not just images but a title and description of each image. Have you given any thought to flickr integration? I use flickr api to feed java animated slideshows to my website. That way by updating my flickr folders with new images, I am automatically changing what appears on my website at the same time. Maybe you could have a Flickr Image Gallery page type to do a similar thing. The goal here is to unify the data. I add a new photo to Flickr and it's automatically going to pop up on my website and my iOS app. No need to upload the same photo 3 times in 3 places, ya dig? R2-D2 P.S. Even better, I can upload a picture to a Tumblr feed, but have my blog app put the picture on Flickr and present it to the Tumblr feed, at the same time updating a Twitter Feed, maybe a Facebook Feed, then my main website slide show, and the iOS app. That's a new photo on 6 services all with one action. Now if I could just figure out how to install this darn printer driver....
 
R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
like
02/20/11 12:29 PM (15 years ago)
You know, I think I might be able to integrate a Flickr slideshow using a custom HTML page. I'll look into it.
 
R2-D2
Apple Fan
Profile
Posts: 95
Reg: Jan 20, 2011
East Coast USA
950
like
02/20/11 12:52 PM (15 years ago)
For those interested, Flickr can be accessed by using an RSS Feed or as a custom URL link directly to the album or stream you want to share. I'll look further into an API implementation for more of a cleaner slideshow/gallery look, but its not a high priority for me right now.
 
David @ buzztouch
buzztouch Evangelist
Profile
Posts: 6866
Reg: Jan 01, 2010
Monterey, CA
78,840
like
02/20/11 10:09 PM (15 years ago)
I like the text/description with photos. Fact is, we need way more image showcase screens. Flickr: I made a neat RSS Flikr feed a few weeks ago - worked good ;-)
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.