Retina-images again

  • pixelcounter · Member ·

    Hi,

    is there any update on adding retina-images on a wordpress.com hosted site?

    I tried to upload an “@2x.png” version of an image on the server but it didn’t do anything when viewed on an iPhone 4 retina screen.

    However, I found out that there’re some plug-ins for that kind of job but as far as I know, one can’t install plug-ins when hosted at wordpress.com?

    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • justjennifer · Member ·

    No plugins allowed, but did you see the last reply by designsimply in your earlier thread? https://en.forums.wordpress.com/topic/adding-retina-graphics?replies=8#post-856539

  • pixelcounter · Member ·

    Thanks, I do remember that reply but the thread was closed before I could make further questions.

    So I copy-paste that code into the CSS -field? How do I insert the @2x alternative?

    Sorry for the complete lack of knowledge about the issue :)

  • justjennifer · Member ·

    You’ll have to wait until someone versed in CSS can assist you, but I am assuming yes.

  • designsimply · Member ·

    I tried to upload an “@2x.png” version of an image on the server but it didn’t do anything when viewed on an iPhone 4 retina screen.

    Simply uploading the image is not enough. You have to write some CSS to change out the image when whatever criteria you choose is met (i.e. such as min-device-pixel-ratio from the example justjennifer linked to).

    I can help walk through an example with you. What is the link to the regular image, the retina image, and a URL where the regular image currently appears on your blog?

  • pixelcounter · Member ·

    Ok, very kind of you!

    The regular image (it’s the header):

    And the 2x image (actually a placeholder, I update it later):

    Thanks!

  • designsimply · Member ·

    Here’s the current CSS that sets up that image—we need to know this so we know what to add in our media query:

    #headerimg {
	background: url(http://pixelcounter.files.wordpress.com/2012/05/pixelfitted.png) no-repeat top;
}

    Here’s what you should add to your Appearance → Custom Design → CSS page to do a straight up swap of the image:

    @media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
#headerimg {
	background: url(http://pixelcounter.files.wordpress.com/2012/07/pixelfitted2x.png) no-repeat top;
}
}
  • pixelcounter · Member ·

    I copy-pasted the latter block of code and unfortunately, the image doesn’t appear quite right: https://dl.dropbox.com/u/2312669/Photo%209.7.2012%2023.27.44.png

    Any idea what went wrong?

  • designsimply · Member ·

    Looks like you need a little more than a straight-up swap. Give this a whirl to see if it helps:

    @media
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
	#headerimg {
		background:url('http://pixelcounter.files.wordpress.com/2012/07/pixelfitted2x.png') no-repeat left top;
		background-size: 100%;
	}
}

    Better?

  • pixelcounter · Member ·

    It works!

    Thanks a lot, man.

    Could you yet provide a small hint for how’ll carry on from this? Replacing the regular images, that is.

    Thanks again.

  • designsimply · Member ·

    I’ll check into what might be available to help with this within the next few days and post back when I have more information.

  • pixelcounter · Member ·

    Very much appreciated!

  • rossau · Member ·

    Will there be some love for WP.com users without CSS?

  • designsimply · Member ·

    Apologies for the delay. Regarding regular images, we’re working on that. You won’t need to do anything to your CSS to make it work.

  • rossau · Member ·

    I found out in the meantime that it works right now.

    You just need to have an image double the size as it will show up in the WP.com blog (p. e. 400 x 200 pixels). First insert it as usual and then go to the image properties. Change the displayed image size to the half of the original image size (pixel count divided by two, in my example 200 x 100).

    Voilà: All images crisp sharp and retina ready (for MacBook Pro Retina p.e.). Have a look @ my blogs the most recent postings (mostly screenshots):

    http://retinamac.wordpress.com/
    http://rossau.wordpress.com/

    (You need to watch them with a retina display and Safari for being able to see the effect. Maybe some WP folks with a Retina MBP will confirm.)

    I didn’t find out yet how you accomplish this with the header image. But with “regular” images within blog postings IT JUST WORKS as described!

    I really don’t know HOW it works exactly but anyway, it’s great! Thanks once more to WordPress.com. Fantastic service!

  • designsimply · Member ·

    Looks like some of the work the developers have been doing to get things retina-ready are getting implemented already. Wonderful! More updates are in the works.

  • rossau · Member ·

    Yeah. The WordPress.com editor has already retina icons! That’s pretty awesome. Looks perfect on retina display. That was fast.

    Apple has set new technical standards here. Maybe it’s some months or years ahead; but sooner or later more and more displays will feature the high pixel density. I am quite sure on that.

    Important fact for every webmaster, whether he owns a retina device or not: When you care about the design of your blog and want it up-to-date and most modern, you’ll just have to upload the bitmap images double the size. It’s easy as described in my previous posting.

    Promised when you do that: WordPress.com blogs look (at least) TWICE as good as before on MBP Retina displays. Really impressive!

  • pixelcounter · Member ·

    Hi again,

    cool thing that WordPress.com now supports retina-ready images.

    However, now my header doesn’t work even though I uploaded a double-resolution version of it. The previous CSS-hack did work on iPhone but not on retina-iPad, so I tried removing the CSS and uploading the said 2x -version of it since the other images now work that way.

    Any ideas?

  • designsimply · Member ·

    I suspect that header images aren’t retina-ified yet, but I’ll double check to find out.

  • designsimply · Member ·

    Regarding using CSS to target an iPad, you probably need to add an additional @media query for it. Here is a good set of examples from css-tricks.com to check out:
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Also see the first example at
    http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/

    And note that the order matters, see
    http://stackoverflow.com/questions/9780189/retina-ipad-specific-css

1 2
  • The topic ‘Retina-images again’ is closed to new replies.