Jetpack 1.6: Retina and Pinterest

Right now I want to tell you what it means for you, a sophisticated Jetpack user:

We’ve updated all the icons in Jetpack, including the Sharing ones, all the dashboard graphics, to be HiDPI.

Many retina updates for core weren’t ready for the 3.4 release, so we’ve bundled a hotfix that brings all the Retina improvements for 3.5 to Jetpack blogs, today. You won’t have to wait for December 5th to get all the improvements, download or update Jetpack today.

All Gravatars, mshots, and images embedded from *.files.wordpress.com will show up high-resolution.

Finally as a bonus, this release includes the much-requested Pinterest share buttons.

I’m a big Jetpack fan but I’m not happy today. After updating this morning, the Live Preview of the sharing buttons bears no resemblance to the reality. Instead of a nice row of buttons, there’s a very ugly bullet pointed list, and the Pinterest button only shows as text. Please help!’

It’s a nice idea but I get this error message where the sharing buttons should be if I choose “Official buttons”:

“Warning: require(/var/www/web916/html/wordpress/glotpress.dir/gp/locales/locales.php) [function.require]: failed to open stream: No such file or directory in /var/www/web916/html/wordpress/wp-content/plugins/jetpack/modules/sharedaddy/sharing-sources.php on line 640”

The new sharing widget is way too subtle, you hardly see it on the page… Not sure I’m going to get many clicks going forward… Would be great to be able to choose between the two styles (old and new). Additionally, would it make sense to have the option of not having text on the arrow icon, but having text on the sharing icons? After all, an arrow pointing down is self-explanatory, right? With the new layout it’s either text on arrow + sharing buttons or on none.

Anyone having issues with the official sharing buttons? If I select this option only half the page loads.

Not always. 🙂 We’ve run lots of experiments with 1x and 2x PNG images, SVG vector images, and our own custom web icon fonts. Ensuring that every user seems things at their very best requires us to use separate artwork specifically tailored for 1x screens in addition to our high resolution art. Simply replacing everything with SVGs looks great for those with retina screens, but is too blurry for standard screens. Icon fonts let us specify 1x and 2x assets together, but are limited to a single color per character for obvious reasons (it’s a font). So we use a combination of all of those techniques, depending on the use case.

I think I know why, btw. It’s like the icons/buttons wants text before it. “Share this”, as it is displayed on this page for example. But I don’t use text, just the buttons, and therefore there’s a gap before the buttons.

I am actually using the “share” text, and there is still a large gap after the share text, which looks a bit odd. Any way to have the sharing icons appear right after “share?” Also, I’ve noticed the email sharing function is not working. Otherwise, thanks for the great update!

Another thing is the comments. I LOVE the jetpack comments. Except one little thing which makes me not use it at all.

I do not want users to go through the jetpack-site when comments are sent. “Sending comments” it says, and there the user is directed to the jetpack site and then back. Why can’t it just be an interface, why does it have to sync with something on the site? I just want users to be able to login through facebook and twitter, I won’t ever use login through wordpress. So I don’t need it to go through wordpress/jetpack.

Hmm, yeah, I can understand the part about why it goes through wordpress. I’m glad I don’t have to register my api keys, that part is a BITCH for at least facebook. So that’s good.

But why does it take so much time for my site? In the post from Matt it says it shouldn’t be noticeable. But when I test it out the redirecting-part where “Sending comment” is displayed takes 5-10 SECONDS! That’s unacceptable I’m afraid.

Is there something with wordpress which is the cause? Can I do anything to tweak it? When I comment on this site it seems to be working.

I know it’s not my site or host since everything else works smoothly. Publishing ordinary comments never takes more than 1 second, perhaps 2 on heavy load.

Just a heads up for people who use JetPack alongside the WordPress SEO plugin – if you have ‘Redirect ugly URL’s to clean permalinks’ enabled you’ll need to add ‘share’ to the list of variables not to clean, otherwise the sharing buttons won’t work.

I want to use the official sharing buttons on my blog but when I do there are huge gaps between them causing the buttons to flow down across three lines, and not neatly. Is there a way to reduce the space between the official buttons?

I can’t find any rules that are changing the LIs to have disc type. I’m looking in my global.css. A friend of mine customised the theme so I’m not sure if there’s something else going on. Is there anything else that I could look for that might be affecting this?

If you want to have your own images served at Retina resolutions, you should start a WordPress.com site, store your images there, and then embed them in your WordPress.org site. We will serve those at Retina resolutions for you.

Do we just upload the images to WordPress.org, and then use the image URL in our WordPress.com site?

Currently, you would need to upload your images to WordPress.com and use the image URL on your WordPress.org site.

In order to take full advantage of retina displays, without maxing out storage space on WP.com, what is the maximum necessary resolution (dimensions) for pictures?

It depends on the display dimensions you intend for the image. A “retina-ready” image is twice the size of the regular image, so if you intend to display something at 600px x 600px, a retina version would be 1200px x 1200px.

For larger, more complex images (screenshots or photographs), I recommend using JPG format, otherwise PNG is fine. If using Photoshop, you can use File -> Save for Web, which will help compress your images to save file space and load time. You can also use an optimizer to “crush” PNGs to reduce file size further. A search for “PNG crush” will turn up several possibilities.

I do not like the new look of the button – the old one is much more attracting. I managed to change my CSS to get the old one with the blue plus back .. but for some reason I lost Google + in my sharing field. It seems that it\’s just displaying 4 social plugins now … and yeah, the gap does not look good at all.

I am looking forward to a Jetpack version where I can choose between the button styles, without struggling around with gaps and CSS.

I found that google+ was breaking my https, so I removed it. Suddenly none of the images are shown, just a bullet list and text. I cleared my cache, etc, nada. I checked the source code, and no images are being called. Is there a fix for this?

Thanks for the update! Glad to see both Retina and Pinterest. The Pinterest button does seem to be giving me a few problems though. First, when there are multiple images in a post, it will only grab one (Does it grab the_post_thumbnail by default?). Is there a way to allow the user to select which image in the post to pin? Also, when I am on an attachment page, if I click the Pinterest button it doesn’t select an image to pin. The description is filled in correctly, but the preview box for the picture is just a solid yellow and when I click pin it is not actually pinned to a board. Again, thanks for the update, but I just wanted to share my feedback and see if anyone else has been experiencing similar issues.

Please add support for Russian social media sites Vkontakte.ru, Mail.ru, Odnoklassniki.ru, Yandex.ru and Mail.ru. All of these are very big in Russia, especially Vkontakte.ru so it would be nice to see support for those.