You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@wicket.apache.org by Tobias Soloschenko <to...@googlemail.com> on 2015/02/16 11:54:07 UTC
CssUrlReplacer improvement - base64 content
Hi all,
as you can see in the commit history - you can replace image urls within
CSS files loaded with a CssResourceReference by their corresponding
wicket url representation, so that images are resolved from within the
class path. (currently with 7.0.0-SNAPSHOT)
I'm thinking of improve the concept a bit more so that you are able to
store base64 encoded content in css dynamically - and it would look like
this:
background-image:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORH.........);
With this option you would be able to save some requests by loading
small images directly within the CSS file.
I think it would be good to do it by this way:
background-image:url(myimage.gif) - myimage.gif will be replaced by the
URL of the resource within the package of the scope with style and variation
background-image:url(myimage.gif?embeddBase64) - myimage.gif will be
replaced by the base64 encoded content received from the resource within
the package of the scope with style and variation
What do you think about that idea?
kind regards
Tobias
Re: CssUrlReplacer improvement - base64 content
Posted by Tobias Soloschenko <to...@googlemail.com>.
Hi,
I added two pull request to add this functionality to the CssUrlReplacer
in Wicket 6.x / 7.x:
https://github.com/apache/wicket/pull/97
https://github.com/apache/wicket/pull/96
kind regards
Tobias
Am 16.02.15 um 15:31 schrieb Martin Grigorov:
> I like the idea!
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Mon, Feb 16, 2015 at 1:52 PM, Tobias Soloschenko <
> tobiassoloschenko@googlemail.com> wrote:
>
>> And its done - here is the while loop inside the CssUrlReplacer - I'm
>> going to open a pull request after the fixes are merged:
>>
>> while (matcher.find())
>> {
>> Url imageCandidateUrl = Url.parse(matcher.group(1));
>> CharSequence processedUrl;
>> if (imageCandidateUrl.isFull())
>> {
>> processedUrl = imageCandidateUrl.toString(
>> Url.StringMode.FULL);
>> }
>> else if (imageCandidateUrl.isContextAbsolute())
>> {
>> processedUrl = imageCandidateUrl.toString();
>> }
>> else
>> {
>> // relativize against the url for the containing CSS file
>> Url cssUrlCopy = new Url(cssUrl);
>> cssUrlCopy.resolveRelative(imageCandidateUrl);
>> if (!cssUrlCopy.getQueryString().contains("embeddBase64"))
>> {
>> PackageResourceReference imageReference = new
>> PackageResourceReference(scope,
>> cssUrlCopy.toString());
>> processedUrl = cycle.urlFor(imageReference, null);
>> }
>> else
>> {
>> embedded = true;
>> PackageResourceReference imageReference = new
>> PackageResourceReference(scope,
>> cssUrlCopy.toString().replace("?embeddBase64", ""));
>> try
>> {
>> StringBuilder builder = new StringBuilder();
>> IResourceStream resourceStream =
>> imageReference.getResource()
>> .getResourceStream();
>> byte[] bytes = new byte[(int)resourceStream.
>> length().bytes()];
>> DataInputStream dataInputStream = new
>> DataInputStream(
>> resourceStream.getInputStream());
>> dataInputStream.readFully(bytes);
>> builder.append(Base64.encodeBase64String(bytes));
>> processedUrl = "data:" +
>> resourceStream.getContentType() + ";base64," +
>> builder.toString().replaceAll("\\s", "");
>> }
>> catch (Exception e)
>> {
>> throw new WicketRuntimeException(
>> "Error while embedding an image into the css:
>> " +
>> imageReference.toString(), e);
>> }
>> }
>>
>> }
>> matcher.appendReplacement(output, embedded ? "url(" +
>> processedUrl + ")" : "url('" +
>> processedUrl + "')");
>> }
>>
>> kind regards
>>
>> Tobias
>>
>> Am 16.02.15 um 11:54 schrieb Tobias Soloschenko:
>>
>> Hi all,
>>> as you can see in the commit history - you can replace image urls within
>>> CSS files loaded with a CssResourceReference by their corresponding wicket
>>> url representation, so that images are resolved from within the class path.
>>> (currently with 7.0.0-SNAPSHOT)
>>>
>>> I'm thinking of improve the concept a bit more so that you are able to
>>> store base64 encoded content in css dynamically - and it would look like
>>> this:
>>>
>>> background-image:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORH.........);
>>>
>>>
>>> With this option you would be able to save some requests by loading small
>>> images directly within the CSS file.
>>>
>>> I think it would be good to do it by this way:
>>>
>>> background-image:url(myimage.gif) - myimage.gif will be replaced by the
>>> URL of the resource within the package of the scope with style and variation
>>>
>>> background-image:url(myimage.gif?embeddBase64) - myimage.gif will be
>>> replaced by the base64 encoded content received from the resource within
>>> the package of the scope with style and variation
>>>
>>>
>>> What do you think about that idea?
>>>
>>> kind regards
>>>
>>> Tobias
>>>
>>
Re: CssUrlReplacer improvement - base64 content
Posted by Tobias Soloschenko <to...@googlemail.com>.
Okeee :-) - I'm going to make a pull request the "day after tomorrow" :-D
kind regards
Tobias
Am 16.02.15 um 15:31 schrieb Martin Grigorov:
> I like the idea!
>
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
>
> On Mon, Feb 16, 2015 at 1:52 PM, Tobias Soloschenko <
> tobiassoloschenko@googlemail.com> wrote:
>
>> And its done - here is the while loop inside the CssUrlReplacer - I'm
>> going to open a pull request after the fixes are merged:
>>
>> while (matcher.find())
>> {
>> Url imageCandidateUrl = Url.parse(matcher.group(1));
>> CharSequence processedUrl;
>> if (imageCandidateUrl.isFull())
>> {
>> processedUrl = imageCandidateUrl.toString(
>> Url.StringMode.FULL);
>> }
>> else if (imageCandidateUrl.isContextAbsolute())
>> {
>> processedUrl = imageCandidateUrl.toString();
>> }
>> else
>> {
>> // relativize against the url for the containing CSS file
>> Url cssUrlCopy = new Url(cssUrl);
>> cssUrlCopy.resolveRelative(imageCandidateUrl);
>> if (!cssUrlCopy.getQueryString().contains("embeddBase64"))
>> {
>> PackageResourceReference imageReference = new
>> PackageResourceReference(scope,
>> cssUrlCopy.toString());
>> processedUrl = cycle.urlFor(imageReference, null);
>> }
>> else
>> {
>> embedded = true;
>> PackageResourceReference imageReference = new
>> PackageResourceReference(scope,
>> cssUrlCopy.toString().replace("?embeddBase64", ""));
>> try
>> {
>> StringBuilder builder = new StringBuilder();
>> IResourceStream resourceStream =
>> imageReference.getResource()
>> .getResourceStream();
>> byte[] bytes = new byte[(int)resourceStream.
>> length().bytes()];
>> DataInputStream dataInputStream = new
>> DataInputStream(
>> resourceStream.getInputStream());
>> dataInputStream.readFully(bytes);
>> builder.append(Base64.encodeBase64String(bytes));
>> processedUrl = "data:" +
>> resourceStream.getContentType() + ";base64," +
>> builder.toString().replaceAll("\\s", "");
>> }
>> catch (Exception e)
>> {
>> throw new WicketRuntimeException(
>> "Error while embedding an image into the css:
>> " +
>> imageReference.toString(), e);
>> }
>> }
>>
>> }
>> matcher.appendReplacement(output, embedded ? "url(" +
>> processedUrl + ")" : "url('" +
>> processedUrl + "')");
>> }
>>
>> kind regards
>>
>> Tobias
>>
>> Am 16.02.15 um 11:54 schrieb Tobias Soloschenko:
>>
>> Hi all,
>>> as you can see in the commit history - you can replace image urls within
>>> CSS files loaded with a CssResourceReference by their corresponding wicket
>>> url representation, so that images are resolved from within the class path.
>>> (currently with 7.0.0-SNAPSHOT)
>>>
>>> I'm thinking of improve the concept a bit more so that you are able to
>>> store base64 encoded content in css dynamically - and it would look like
>>> this:
>>>
>>> background-image:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORH.........);
>>>
>>>
>>> With this option you would be able to save some requests by loading small
>>> images directly within the CSS file.
>>>
>>> I think it would be good to do it by this way:
>>>
>>> background-image:url(myimage.gif) - myimage.gif will be replaced by the
>>> URL of the resource within the package of the scope with style and variation
>>>
>>> background-image:url(myimage.gif?embeddBase64) - myimage.gif will be
>>> replaced by the base64 encoded content received from the resource within
>>> the package of the scope with style and variation
>>>
>>>
>>> What do you think about that idea?
>>>
>>> kind regards
>>>
>>> Tobias
>>>
>>
Re: CssUrlReplacer improvement - base64 content
Posted by Martin Grigorov <mg...@apache.org>.
I like the idea!
Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov
On Mon, Feb 16, 2015 at 1:52 PM, Tobias Soloschenko <
tobiassoloschenko@googlemail.com> wrote:
> And its done - here is the while loop inside the CssUrlReplacer - I'm
> going to open a pull request after the fixes are merged:
>
> while (matcher.find())
> {
> Url imageCandidateUrl = Url.parse(matcher.group(1));
> CharSequence processedUrl;
> if (imageCandidateUrl.isFull())
> {
> processedUrl = imageCandidateUrl.toString(
> Url.StringMode.FULL);
> }
> else if (imageCandidateUrl.isContextAbsolute())
> {
> processedUrl = imageCandidateUrl.toString();
> }
> else
> {
> // relativize against the url for the containing CSS file
> Url cssUrlCopy = new Url(cssUrl);
> cssUrlCopy.resolveRelative(imageCandidateUrl);
> if (!cssUrlCopy.getQueryString().contains("embeddBase64"))
> {
> PackageResourceReference imageReference = new
> PackageResourceReference(scope,
> cssUrlCopy.toString());
> processedUrl = cycle.urlFor(imageReference, null);
> }
> else
> {
> embedded = true;
> PackageResourceReference imageReference = new
> PackageResourceReference(scope,
> cssUrlCopy.toString().replace("?embeddBase64", ""));
> try
> {
> StringBuilder builder = new StringBuilder();
> IResourceStream resourceStream =
> imageReference.getResource()
> .getResourceStream();
> byte[] bytes = new byte[(int)resourceStream.
> length().bytes()];
> DataInputStream dataInputStream = new
> DataInputStream(
> resourceStream.getInputStream());
> dataInputStream.readFully(bytes);
> builder.append(Base64.encodeBase64String(bytes));
> processedUrl = "data:" +
> resourceStream.getContentType() + ";base64," +
> builder.toString().replaceAll("\\s", "");
> }
> catch (Exception e)
> {
> throw new WicketRuntimeException(
> "Error while embedding an image into the css:
> " +
> imageReference.toString(), e);
> }
> }
>
> }
> matcher.appendReplacement(output, embedded ? "url(" +
> processedUrl + ")" : "url('" +
> processedUrl + "')");
> }
>
> kind regards
>
> Tobias
>
> Am 16.02.15 um 11:54 schrieb Tobias Soloschenko:
>
> Hi all,
>>
>> as you can see in the commit history - you can replace image urls within
>> CSS files loaded with a CssResourceReference by their corresponding wicket
>> url representation, so that images are resolved from within the class path.
>> (currently with 7.0.0-SNAPSHOT)
>>
>> I'm thinking of improve the concept a bit more so that you are able to
>> store base64 encoded content in css dynamically - and it would look like
>> this:
>>
>> background-image:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORH.........);
>>
>>
>> With this option you would be able to save some requests by loading small
>> images directly within the CSS file.
>>
>> I think it would be good to do it by this way:
>>
>> background-image:url(myimage.gif) - myimage.gif will be replaced by the
>> URL of the resource within the package of the scope with style and variation
>>
>> background-image:url(myimage.gif?embeddBase64) - myimage.gif will be
>> replaced by the base64 encoded content received from the resource within
>> the package of the scope with style and variation
>>
>>
>> What do you think about that idea?
>>
>> kind regards
>>
>> Tobias
>>
>
>
Re: CssUrlReplacer improvement - base64 content
Posted by Tobias Soloschenko <to...@googlemail.com>.
And its done - here is the while loop inside the CssUrlReplacer - I'm
going to open a pull request after the fixes are merged:
while (matcher.find())
{
Url imageCandidateUrl = Url.parse(matcher.group(1));
CharSequence processedUrl;
if (imageCandidateUrl.isFull())
{
processedUrl =
imageCandidateUrl.toString(Url.StringMode.FULL);
}
else if (imageCandidateUrl.isContextAbsolute())
{
processedUrl = imageCandidateUrl.toString();
}
else
{
// relativize against the url for the containing CSS file
Url cssUrlCopy = new Url(cssUrl);
cssUrlCopy.resolveRelative(imageCandidateUrl);
if (!cssUrlCopy.getQueryString().contains("embeddBase64"))
{
PackageResourceReference imageReference = new
PackageResourceReference(scope,
cssUrlCopy.toString());
processedUrl = cycle.urlFor(imageReference, null);
}
else
{
embedded = true;
PackageResourceReference imageReference = new
PackageResourceReference(scope,
cssUrlCopy.toString().replace("?embeddBase64", ""));
try
{
StringBuilder builder = new StringBuilder();
IResourceStream resourceStream =
imageReference.getResource()
.getResourceStream();
byte[] bytes = new
byte[(int)resourceStream.length().bytes()];
DataInputStream dataInputStream = new
DataInputStream(
resourceStream.getInputStream());
dataInputStream.readFully(bytes);
builder.append(Base64.encodeBase64String(bytes));
processedUrl = "data:" +
resourceStream.getContentType() + ";base64," +
builder.toString().replaceAll("\\s", "");
}
catch (Exception e)
{
throw new WicketRuntimeException(
"Error while embedding an image into the
css: " +
imageReference.toString(), e);
}
}
}
matcher.appendReplacement(output, embedded ? "url(" +
processedUrl + ")" : "url('" +
processedUrl + "')");
}
kind regards
Tobias
Am 16.02.15 um 11:54 schrieb Tobias Soloschenko:
> Hi all,
>
> as you can see in the commit history - you can replace image urls
> within CSS files loaded with a CssResourceReference by their
> corresponding wicket url representation, so that images are resolved
> from within the class path. (currently with 7.0.0-SNAPSHOT)
>
> I'm thinking of improve the concept a bit more so that you are able to
> store base64 encoded content in css dynamically - and it would look
> like this:
>
> background-image:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORH.........);
>
>
> With this option you would be able to save some requests by loading
> small images directly within the CSS file.
>
> I think it would be good to do it by this way:
>
> background-image:url(myimage.gif) - myimage.gif will be replaced by
> the URL of the resource within the package of the scope with style and
> variation
>
> background-image:url(myimage.gif?embeddBase64) - myimage.gif will be
> replaced by the base64 encoded content received from the resource
> within the package of the scope with style and variation
>
>
> What do you think about that idea?
>
> kind regards
>
> Tobias