You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by sommeralex <al...@gmail.com> on 2012/08/13 18:09:03 UTC
macbook retina support
Hello!
The apple doc describe 3 ways for supporting retina images. My question,
before i start to replace everything with javascript or css, is, if there
will be an update of tapestry supporting the automatic retina with this
syntax: src="${context:/img/img.png}
because if not, i have to use javascript..
https://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1
--
View this message in context: http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: macbook retina support
Posted by Christian Riedel <cr...@googlemail.com>.
A few days ago I made a little tapestry-add-on to support a json-binding.
Just have a look at the sources and you'll know how to implement the equivalent for your use-case!
https://github.com/criedel/tapestry-json-binding
Best
Christian
Am 13.08.2012 um 18:09 schrieb sommeralex:
> Hello!
>
> The apple doc describe 3 ways for supporting retina images. My question,
> before i start to replace everything with javascript or css, is, if there
> will be an update of tapestry supporting the automatic retina with this
> syntax: src="${context:/img/img.png}
>
> because if not, i have to use javascript..
>
> https://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1
>
>
>
> --
> View this message in context: http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
macbook retina support
Posted by Lance Java <la...@googlemail.com>.
If I were doing this myself, I would want to know the "isRetina" boolean on
the serverside. You could include a common js script on each page that
redirects /foo/bar to /retina/foo/bar for retina clients. You could then
use URL rewriting to store the boolean in an environmental.
Take a look at this thread where I provide an example which does URL
rewriting and storing values in the environment. You can then use the
environmental value to perform custom serverside logic.
http://tapestry.1045711.n5.nabble.com/Adding-a-dynamic-sub-directory-to-URL-td5714532.html
Re: macbook retina support
Posted by Christian Riedel <cr...@googlemail.com>.
Having all @media switches in one css file might make your mobile clients download a lot of useless rules. You can split the files up and include just those files that are applicable for the device that is loading your pages. Check out this project: https://github.com/scottjehl/eCSSential#check-out-the-demos
Am 15.08.2012 um 10:40 schrieb sommeralex:
> the window device ratio was the wrong example (due it is JS)
>
> apple mentions two others ways, but it seems they are "CSS" solutions
>
> header {
> background: -webkit-image-set( url(images/header.jpg) 1x,
> url(images/header_2x.jpg) 2x);
> height: 150px; /* height in CSS pixels */
> width: 800px; /* width in CSS pixels */
> }
>
> OR
>
> header {
> background-image: url(images/header.jpg);
> background-size: cover;
> height: 150px;
> width: 800px;
> }
> /* ... more 1x CSS rules ... */
> @media screen and (-webkit-min-device-pixel-ratio: 2) {
> header {
> background-image: url(images/header_2x.jpg);
> }
> /* ... more 2x CSS rules ... */
> }
>
>
> i guess the simplest hack is just to use higher resolutions images but
> forcing a fixed height and width.
>
>
>
> --
> View this message in context: http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342p5715434.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: macbook retina support
Posted by sommeralex <al...@gmail.com>.
the window device ratio was the wrong example (due it is JS)
apple mentions two others ways, but it seems they are "CSS" solutions
header {
background: -webkit-image-set( url(images/header.jpg) 1x,
url(images/header_2x.jpg) 2x);
height: 150px; /* height in CSS pixels */
width: 800px; /* width in CSS pixels */
}
OR
header {
background-image: url(images/header.jpg);
background-size: cover;
height: 150px;
width: 800px;
}
/* ... more 1x CSS rules ... */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
header {
background-image: url(images/header_2x.jpg);
}
/* ... more 2x CSS rules ... */
}
i guess the simplest hack is just to use higher resolutions images but
forcing a fixed height and width.
--
View this message in context: http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342p5715434.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: macbook retina support
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Tue, 14 Aug 2012 21:23:09 -0300, sommeralex
<al...@gmail.com> wrote:
> the only thing this binding should do is
>
> 1. to check if the window.devicePixelRatio >= 2 and if, check if a
> my_2x.png pic exists on the same location has the my.png - and if so, it
> should take the _2x.png
The binding code is completely server-side. window.devicePixelRation is a
JavaScript object, right? If yes, I don't think this can be done without
JavaScript and the new binding wouldn't solve the problem. On the other
hand, you could write a MarkupWriterListener or a mixin to add this
JavaScript and/or CSS automatically.
--
Thiago H. de Paula Figueiredo
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: macbook retina support
Posted by sommeralex <al...@gmail.com>.
i would prefer to write a "binding" like src="${context:/img/my.png}" but as
some poster has mentioned before named "retina" so i can use it that way:
"${retinaContext:/img/my.png}"
the only thing this binding should do is
1. to check if the window.devicePixelRatio >= 2 and if, check if a my_2x.png
pic exists on the same location has the my.png - and if so, it should take
the _2x.png
2.
but i have no idea how to write such a binding.
The Apple Doc describes three ways:
way 1 (bad one without JS enabled)
function loadImages() {
var header = document.querySelector('header');
if(window.devicePixelRatio >= 2) {
header.style.background = 'url(images/header_2x.jpg)';
}
else {
header.style.background = 'url(images/header.jpg)';
}
}
way 2 with media queries
header {
background-image: url(images/header.jpg);
background-size: cover;
height: 150px;
width: 800px;
}
/* ... more 1x CSS rules ... */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
header {
background-image: url(images/header_2x.jpg);
}
/* ... more 2x CSS rules ... */
}
way 3 with image sets
header {
background: -webkit-image-set( url(images/header.jpg) 1x,
url(images/header_2x.jpg) 2x);
height: 150px; /* height in CSS pixels */
width: 800px; /* width in CSS pixels */
}
--
View this message in context: http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342p5715428.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: macbook retina support
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 13 Aug 2012 13:09:03 -0300, sommeralex
<al...@gmail.com> wrote:
> Hello!
Hi!
> The apple doc describe 3 ways for supporting retina images. My question,
> before i start to replace everything with javascript or css, is, if there
> will be an update of tapestry supporting the automatic retina with this
> syntax: src="${context:/img/img.png}
It would be nice if you provided a summary of what these approaches are.
Anyway, you can solve that with a custom binding or maybe some decoration
or advice of the AssetSource service (and the Tapestry documentation does
show you how to decorate and advise services, hehehe).
--
Thiago H. de Paula Figueiredo
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: macbook retina support
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 13 Aug 2012 13:34:16 -0300, sommeralex
<al...@gmail.com> wrote:
> and where is the documentation to write custom bindings? :-)
We already know that the Tapestry documentation needs to be improved. ;)
Please fill a documentation JIRA when you find something like that. ;)
--
Thiago H. de Paula Figueiredo
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: macbook retina support
Posted by sommeralex <al...@gmail.com>.
and where is the documentation to write custom bindings? :-)
2012/8/13 Lance Java [via Tapestry] <
ml-node+s1045711n5715343h75@n5.nabble.com>
> You could write your own custom binding prefix.
>
> Eg src="${retina:/foo/bar.png}"
>
> See here for custom binding prefix examples
> wiki.apache.org/tapestry/Tapestry5HowTos
>
> On Monday, 13 August 2012, sommeralex <[hidden email]<http://user/SendEmail.jtp?type=node&node=5715343&i=0>>
> wrote:
>
> > Hello!
> >
> > The apple doc describe 3 ways for supporting retina images. My question,
> > before i start to replace everything with javascript or css, is, if
> there
> > will be an update of tapestry supporting the automatic retina with this
> > syntax: src="${context:/img/img.png}
> >
> > because if not, i have to use javascript..
> >
> >
> <a href="
> https://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1
> ">
> https://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1
> >
> >
> >
> > --
> > View this message in context:
> http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342.html
> > Sent from the Tapestry - User mailing list archive at Nabble.com.
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]<http://user/SendEmail.jtp?type=node&node=5715343&i=1>
> > For additional commands, e-mail: [hidden email]<http://user/SendEmail.jtp?type=node&node=5715343&i=2>
> >
> >
>
>
> ------------------------------
> If you reply to this email, your message will be added to the discussion
> below:
>
> http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342p5715343.html
> To unsubscribe from macbook retina support, click here<http://tapestry.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=5715342&code=YWxleGFuZGVyLnNvbW1lckBnbWFpbC5jb218NTcxNTM0MnwxMDUzMzQxMzM4>
> .
> NAML<http://tapestry.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>
--
View this message in context: http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342p5715344.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
Re: macbook retina support
Posted by Lance Java <la...@googlemail.com>.
You could write your own custom binding prefix.
Eg src="${retina:/foo/bar.png}"
See here for custom binding prefix examples
wiki.apache.org/tapestry/Tapestry5HowTos
On Monday, 13 August 2012, sommeralex <al...@gmail.com> wrote:
> Hello!
>
> The apple doc describe 3 ways for supporting retina images. My question,
> before i start to replace everything with javascript or css, is, if there
> will be an update of tapestry supporting the automatic retina with this
> syntax: src="${context:/img/img.png}
>
> because if not, i have to use javascript..
>
>
https://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1
>
>
>
> --
> View this message in context:
http://tapestry.1045711.n5.nabble.com/macbook-retina-support-tp5715342.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>