This question is answered.


Permlink Replies: 15 - Pages: 2 [ 1 2 | Next ] - Last Post: 05-Nov-2019 15:36 Last Post By: AndreWolff Threads: [ Previous | Next ]
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 13:12
 
  Click to reply to this thread Reply
I like to use the XborderFilter in my skin to create a border for the image in the slide page.

I tried to implement this filter:

filter1 class=XBorderFilter boWidth=20 boCol=white boTrans=0 closeups

made via a user variable in init.bsh with the following code:
XBorderFilter xbf = new XBorderFilter();
xbf.borderWidths="20";
xbf.borderColors="white";
xbf.borderTranss="0";
engine.addFilter(xbf,JAFilter.CLOSEUPS_POSTSCALE_STAGE);
To my great surprise it did work as you can see in this test album.

However the width of the border is not equal for all images, the width of the 3the and next slide image is different from the first two slides.

So my questions are:

Is my implementation code for file init.bsh correct?

If so what should I add to get the same border width for all images?

Edit:

Of course you wonder why I should use the XBorderFilter for things you can do with CSS.

Well if you use a third party library, you can't control all code:
In this album I use CSS, but you see for a short time an ugly thick white border if you open the lightbox.

Edited by: AndreWolff on 04-Nov-2019 13:19

Aha I know now why you see borders of different thickness: images 3 and 4 are panorama images with a larger width as normal images.
I think I have to live with that.

I have an additional question:

Is it also possible to generate a extra space and a rounded border as you see in this album?

Edited by: AndreWolff on 04-Nov-2019 13:45
jGromit

Posts: 7,784
Registered: 31-Jan-2006
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 14:22   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
The border is exactly the same width on each one of the slide images. The problem is that the responsive display makes some of the images smaller, to fit into the viewport. The border isn't some "added thing" at this point - it's part of the JPG itself. So when the image is shrunk to fit the viewport, the border gets smaller with it. That's why most skins have abandoned the filter, and use CSS instead.

Can't help you with FancyBox, but I'm guessing there's a setting for border width, or an API call you can use that says, "once the expander is finished, make the border this width."
jGromit

Posts: 7,784
Registered: 31-Jan-2006
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 14:38   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
BTW, the other problem with using the filter is that if you make any change to the border, like color or width, jAlbum has to reprocess all the images, and they all have to be uploaded again. Small album, no problem - big album, it's a pain.
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 17:11   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Can't help you with FancyBox, but I'm guessing there's a setting for border width, or an API call you can use that says, "once the expander is finished, make the border this width."
No, it is not so simple the standard fancyBox library uses never a border to get the best possible animations.
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 17:13   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
BTW, the other problem with using the filter is that if you make any change to the border, like color or width, jAlbum has to reprocess all the images, and they all have to be uploaded again. Small album, no problem - big album, it's a pain.
Good point, may be I will offer both implementations.
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 19:05   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
I understand now that an outermost border is in XborderFilter language a frame.

So I have now this code:
XBorderFilter xbf = new XBorderFilter();
xbf.frameWidths=Integer.toString(borderWidth);
xbf.frameColors=  imageBorderColor ;
xbf.borderMargin= 10;
engine.addFilter(xbf,JAFilter.CLOSEUPS_POSTSCALE_STAGE);
I am now trying to get a space of 10 pixels between the image and the border (frame), but xbf.borderMargin= 10; does not result in the desired effect, see this test album.

What should I use to create a gap of 10 pixels between the image and the border (frame)?
ctwist

Posts: 595
Registered: 27-Sep-2003
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 20:47   in response to: AndreWolff in response to: AndreWolff
Correct
  Click to reply to this thread Reply
You have to create 2 frames.
The first is a transparent 10 px frame.
The second is the frame that you have already created.

This section of the BluPlusPlus documentation should help http://bluplusplus.jalbum.net/doc/html/xborder/xborder_adv.htm
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 21:01   in response to: ctwist in response to: ctwist
 
  Click to reply to this thread Reply
ctwist wrote:
You have to create 2 frames.
Thanks for the hint!

I know how to do that via Advanced / User variables, but is that also possible in init.bsh?

This section of the BluPlusPlus documentation should help http://bluplusplus.jalbum.net/doc/html/xborder/xborder_adv.htm
That is all dealing with Advanced / User variables, but I like to do that in init.bsh with plugin XBorderFilter.java in the jAlbum plugins folder.
ctwist

Posts: 595
Registered: 27-Sep-2003
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 21:07   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:
I know how to do that via Advanced / User variables, but is that also possible in init.bsh?
I assume that you should call engine.addFilter twice.
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 21:35   in response to: ctwist in response to: ctwist
 
  Click to reply to this thread Reply
ctwist wrote:
AndreWolff wrote:
I know how to do that via Advanced / User variables, but is that also possible in init.bsh?
I assume that you should call engine.addFilter twice.
Yes I think so, I will try it tomorrow.
BTW i am reading your documentation, but I can’t find what a bgfile is.
jGromit

Posts: 7,784
Registered: 31-Jan-2006
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 04-Nov-2019 21:52   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:
BTW i am reading your documentation, but I can’t find what a bgfile is.

https://jalbum.net/help/en/More_about_image_filters#eXtended_Border_filter
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 05-Nov-2019 12:32   in response to: ctwist in response to: ctwist
 
  Click to reply to this thread Reply
ctwist wrote:
You have to create 2 frames.
The first is a transparent 10 px frame.
The second is the frame that you have already created.
Your hint was correct!
I use now the next code in init.bsh:
if (slidePadding>0) {
  XBorderFilter xbfs = new XBorderFilter();
  xbfs.frameWidths= Integer.toString(slidePadding);
  xbfs.frameColors=  backgroundColor;
  xbfs.clip= slideRadius;
  engine.addFilter(xbfs,JAFilter.CLOSEUPS_POSTSCALE_STAGE);
}
 
XBorderFilter xbf = new XBorderFilter();
xbf.frameWidths= Integer.toString(borderWidth);
xbf.frameColors=  imageBorderColor;
xbf.clip= slideRadius;
engine.addFilter(xbf,JAFilter.CLOSEUPS_POSTSCALE_STAGE);
}
See here with the XBorderFilter and the same album here with CSS.

You see xbfs.clip has not the same effect as CSS code
border-radius: ${slideRadius}px;

I use as background for the first inner frame my page background color, because I could not use a transparent color:
xbfs.frameColors= "#ffffff00"; shows yellow instead of transparent.
and
xbs.frameTranss="100"; has no effect.

Any idea why I can't use the transparent color "#ffffff00" or xbs.frameTranss="100"?

Edited by: AndreWolff on 05-Nov-2019 13:02
jGromit

Posts: 7,784
Registered: 31-Jan-2006
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 05-Nov-2019 13:08   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:
Any idea why I can't use the transparent color "#ffffff00"...

Because XBF is ancient, and doesn't recognize 8-character hex colors. Six is the limit.

... or xbs.frameTranss="100"?

Because it's frameTrans not frameTranss and because it's a numeric value, not a string.
AndreWolff

Posts: 1,760
Registered: 14-Dec-2007
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 05-Nov-2019 13:19   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Because it's frameTrans not frameTranss and because it's a numeric value, not a string.
Wel I got my information from file XBorderFilter.java in the plugins folder and there I see:
    public void setFrTrans(String s) {
        frameTranss = s;
        invFrCache = true;
    }
which says that it is a string and you see there variable frameTranss.
I will test it again.

Edit:

xbfs.frameTrans= 100; gives a crash
xbfs.frameTrans= "100"; gives also a crash
xbfs.frameTranss= 100; gives also a crash
xbfs.frameTranss= "100"; gives no crash, but has no effect.

Edited by: AndreWolff on 05-Nov-2019 13:33
jGromit

Posts: 7,784
Registered: 31-Jan-2006
Re: How to use the XBorderFilter in a skin to make borders of constant width?
Posted: 05-Nov-2019 14:38   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
I didn't really want to get into this - fancy borders and radii look like something from the 1990's, and the jAlbum filters are old, resource-heavy, and don't produce very pleasing results. But....

First, forget about "transparency." These are JPG's. JPG's don't have transparency. The "transparency" in the XBF settings is a different animal, where you actually have to provide the background color. They make sense only with things like a drop-shadow. For your padding, just give it the same color as the page background.

Second, use the "set" syntax, rather than trying to use xbf.frameCol = frameColors.

Finally, when you use XBF to create a radius, the resulting JPG is still square, like all JPG's - it doesn't have some sort of magical "transparency" at the corners. So, you have to tell XBF what color to use to fill in the corner.

A quick example - the first few lines just set the variables, which in your case would come from the project settings, instead. This example would be for a page that was a medium blue color (#5dade2):
xpaddingWidth = "5";
xborderWidth = "10";
xpageColor = "#5dade2";
xborderColor = "#f0b27a";
xborderRadius = 10;
 
XBorderFilter f = new XBorderFilter();
f.setFrWidth(xpaddingWidth);
f.setFrCol(xpageColor);
engine.addFilter(f, 3);
XBorderFilter f = new XBorderFilter();
f.setFrWidth(xborderWidth);
f.setFrCol(xborderColor);
f.setClip(xborderRadius);
f.setBgCol(xpageColor);
engine.addFilter(f, 3);
But watch out for strong colors, like solid red (#ff0000). The XBF filter produces lousy results with those.

ETA: And yes, some of the attributes are numeric, but others, like width, are strings. Like I said, this filter is an old, clumsy beast, which is why almost no one goes near it any more.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums