[Galdget p+] Create your own frames

While there is a number of frames already provided in this plugin, it is normal that a blog author would want to create hers/his own design, which will better suit the blog’s style and author’s feelings. Here is how this is done.

It is important to know that the pictures, used to create the frames shown here, come from site, and that there are tons more free pictures that you, as a blog owner, can use to create your own frames, which would be far more esthetic than the ones provided.

It is also important to know that, with Galdget plus+, you are not buying the frames provided, but the software that displays them in your blog. The frames themselves, delivered with Galdget plus+ as well as additional ones that you will be able to download, are free and the images used to create them belong to .

The images that are rotated in the slideshows are mine.

Elements of the frame definition file

Frame definition file is a text file which resides in one of the subfolders of the plugin folder, typically /wp-content/plugins/galdget-pp/frames or /wp-content/plugins/galdget-pp/myframes. Its extension must be .txt. The first line of the file is the frame name, the one that is presented in the dropdown boxes in, e.g. widget setup. Other lines contain the descriptions of frame elements, one per line. They are:

• Outer underlay image or color
• Outer overlay image
• Image border definition
• Inner underlay image or color
• Inner overlay image

Each of them will be explained here in more detail, but first let’s try to see some of them in action (don’t laugh, this is demo frame, not the pinnacle of esthetics):

 

And here are the pictures that were used to create the frames on this page:

Outer underlay, brick wall	Outer overlay, window
Inner underlay, velvet	Inner overlay, glass
Border, lace	Inner underlay, stucco

Yellow background is here to emphasize the transparency of some images. The last picture, Inner underlay stucco, was not used in the example above, we will use it later.

Now, on to the elements. Please note that we don’t have to use them all, we only use those we need, most frequently only one or two.

Outer underlay image or color

This is the image or color that goes under the whole area of the frame. All other elements will be stacked on top of this one. If we define the image as outer underlay, it will be stretched to the size of the frame, which is defined by the widget setup or by the shortcode options.

We can also define the margins for the inner part of the frame here, by providing the values for top, right, bottom and left margin, or the subset of them.

The elements are separated by comma, and here is how outer underlay specification may look like:

out-under, blue
out-under, #3A01DF
out-under, brick-wall-2209991.jpg
out-under, brick-wall-2209991.jpg, 0.4cm
out-under, brick-wall-2209991.jpg, 32px
out-under, brick-wall-2209991.jpg, 73, 154, 72, 175
out-under, brick-wall-2209991.jpg, 15.21%,24.06%,15%,27.34%

There will be more talk on units in the next section. Here is an example frame consisting of only outer underlay image:

Frame definition file, myframes/example2.txt:

Example 2, out-under only, 32px
out-under, brick-wall-2209991.jpg, 32px

Shortcodes:

[galdget_pp width=320 height=240 group=1 images=fill
  animation=ocw frame=myframes/example2.txt]
[galdget_pp width=320 height=427 group=1 images=fill
  animation=ocw frame=myframes/example2.txt]

Outer overlay image

Overlay color does not make sense, right? So we have only overlay image. This is the image that goes over all other elements of the frame. It typically has some transparent areas, mainly in the middle of the picture. It will be stretched to the size of the frame, which is defined by the widget setup or by the shortcode options. The rest of the frame, together with the gallery contents, should be able to somehow “shine through” this image, i.e. its transparent areas.

A good example of outer overlay image would be the open window above. It has transparency all over, so a lot of other elements will be visible through it. The syntax is similar to outer underlay, together with the margins:

out-over, window-1798492.png
out-over, window-1798492.png, 0.4cm
out-over, window-1798492.png, 32px, 24px
out-over, window-1798492.png, 73, 154, 72, 175
out-over, window-1798492.png, 15.21%, 24.06%, 15%, 27.34%

Border should be defined once, either in out-under or in out-over. It is defined as one, two, three or four values separated by comma, similar to css border width definitions:

Values	Assignment
A	top=A right=A bottom=A left=A
A,B	top=A right=B bottom=A left=B
A,B,C	top=A right=B bottom=C left=B
A,B,C,D	top=A right=B bottom=C left=D

We have the following options for units:

• fixed: as centimeters, pixels…
• image size related: percentages of the image size, image pixels.

In the above example we were using fixed margin of 32 pixels, and you can see that it is the same for both frames, while the size of the frame is different.

This will not be good to fit the inner parts of the gallery inside the open window, for this we must relate the margins to the image size. Here is how it is done:

Image size	Width: 640px	Height: 480px
Top margin	73px	15.21% of 480px
Right margin	154px	24.06% of 640px
Bottom margin	72px	15.00% of 480px
Left margin	175px	27.34% of 640px

So, for the above image, the following two lines are almost equal:

out-over, window-1798492.png, 73, 154, 72, 175
out-over, window-1798492.png, 15.21%, 24.06%, 15%, 27.34%

For image size related margins, we strongly recommend the use of percentages. The reason for this is the fact that, if we use pixels, the browser cannot resize the frame properly until it loads the overlay image and gets its width and height. In other words, the frame might appear distracted for a second or so if your overlay image is big and the server/network is slow, which may leave a bad impression on the visitor of your blog. With percentages, all sizes can be calculated in time, so there will be no late resizing.

Now, on to the example:

Frame definition file, myframes/example3.txt:

Example 2, out-under only, 32px
out-under, brick-wall-2209991.jpg, 32px

Shortcodes:

[galdget_pp width=320 height=240 group=1 images=fill
  animation=ocw frame=myframes/example3.txt]
[galdget_pp width=320 height=427 group=1 images=fill
  animation=ocw frame=myframes/example3.txt]

While it may not be easily noticeable, there is a difference in the actual margins for the above two frames, it is derived from different frame size. Here is the magnified detail:

Image border definition

This is probably the most rarely used element in the frame definitions, but it has its charms. It is actually a part of the picture that is somehow wrapped around the inside of the frame. In the example at the top of this page, the blue lace inside the window and around the gallery images is a border. We set it up like this:

border, lace-1825573.png, 23px, 53 stretch

where 23px is the size of the border, 53 is called image slice and it is how many pixels from the edges of the picture lace-1825573.png should be squeezes into 23px of border, and stretch can be one of the following (as per w3schools):

Value	Description
stretch	The image is stretched to fill the area
repeat	The image is tiled (repeated) to fill the area
round	The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits
space	The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles

Border size (23px) can be set up separately for each border in standard css units by putting one to four values separated by space (not comma). Image slice can also be set separately, as per w3schools.

Please note that border size and image slice do not depend on the gallery/widget size, which can be seen in the following example:

Frame definition file, myframes/example4.txt:

Example 4, Lace as border image
out-under, brick-wall-2209991.jpg, 32px
in-under, velvet-1289287.jpg
border, lace-1825573.png, 23px, 53 stretch

Shortcodes:

[galdget_pp width=320 height=240 group=1 images=fill
  animation=ocw frame=myframes/example4.txt]
[galdget_pp width=320 height=427 group=1 images=fill
  animation=ocw frame=myframes/example4.txt]

The size of the inner area

With outer underlay, outer overlay and image border defined, we can talk about the size of what remains inside them. This remainder is, actually, the gallery that we want to show to the visitors of our blog. And what is under and over it, if something.

The outer size of the frame is defined by the factors that are “external” to the frame definition: widget container inside width, widget height as defined in widget setup, or width and height defined in the shortcode.

(outer size)
minus (margins defined in out-under or out-over)
minus (border size defined in border)
gives us the inner size of the gallery, i.e. the size of the gallery images and web pages that will be displayed.

It is not always easy to calculate the size of the inner area, but it is possible. A spreadsheet (simple or less simple) should be sufficient to do it, if you need to know it. Actually, you might need to know the aspect ratio of the inner area, something like width/height or height/width, so that you can adjust the aspect ratio of the pictures you want to showcase in the gallery. Or you can use images=fill in your shortcodes and “Scale to fill the widget area” in widget setup to mask the differences (at the price of some edges of some images not being displayed).

Inner underlay image or color

This is the image or color that goes under the inner area, i.e. under the pictures that you want to display. It will be stretched to the size of the inner area. If it has transparent parts, the out-under element (image or color) will be visible through them. The definition may look like one of the following:

in-under, blue
in-under, #3A01DF
in-under, stucco-70907.png

And the example:

Frame definition file, myframes/example5.txt:

Example 5, Stucco with a hole
out-under, brick-wall-2209991.jpg, 32px
out-over, window-1798492.png, 15.21%, 24.06%, 15%, 27.34%
in-under, stucco-70907.png

Shortcodes:

[galdget_pp width=320 height=240 group=1 images=fit
  animation=ocw frame=myframes/example5.txt]
[galdget_pp width=320 height=427 group=1 images=fit
  animation=ocw frame=myframes/example5.txt]

Inner overlay image

The image that is put on top of the gallery pictures. Should be transparent, at least in part. As all images in the frame definitions, it is stretched to the size of the element that it belongs to – the inner area.

The example – same as the above, but with the glass that has a bullet hole in it, and a spider’s web:

Frame definition file, myframes/example6.txt:

Example 6, Complete, a bit to white in the middle
out-under, brick-wall-2209991.jpg, 32px
out-over, window-1798492.png, 15.21%, 24.06%, 15%, 27.34%
in-under, stucco-70907.png
in-over, glass-spider-311050.png

Shortcodes:

[galdget_pp width=320 height=240 group=1 images=stretch
  animation=ocw frame=myframes/example6.txt]
[galdget_pp width=320 height=427 group=1 images=stretch
  animation=ocw frame=myframes/example6.txt]

Final remarks

• In all examples on this page, please note that the pictures are not appropriate for displaying in vertical (portrait oriented) frames, or vice versa – vertical frames are not appropriate for the pictures chosen. It looks bad with all image scaling options (fit, fill or stretch). Please chose the right orientation for your images.
• There is too much white (or gray) in the last example, the details of the inner overlay are not clearly visible on black and white pictures. A good practice would be to adjust overlay image to the pictures displayed, so that it is as prominent as you want it to be.
• If you have different kinds of pictures, it may be wise to put them in two or more galleries instead of only one. Remember, you can put as many as you like.
• In the example 5 the scaling is images=fit and the height of the left-hand gallery is slightly bigger than it should be – if it is supposed to be in line with the pictures. The significant part of the pictures are of the square proportions and they are displayed with small (but annoying) strips of the stucco underlay above and below the picture. This can be corrected by setting slightly smaller height in the shortcode, e.g. 232 instead of 240. Or slightly bigger width, if there is room for this. This way the rest of the pictures, which are “landscape” oriented, will still be displayed correctly, with the underlay visible above and below and the whole picture visible, which would not be achieved if we tried to fix the problem by setting images=fill.
• In the example 6 (the last one) we have both images=stretch and in-under image defined. The underlay image is never shown since stretched images leave no room for underlay to be seen. We should either have chosen different picture scaling or have excluded in-under to avoid unnecessary loading of stucco-70907.png.

In the end, the only detail that was not published about this page – the code for the first example:

Frame definition file, myframes/example1.txt:

Example 1, demo frame
out-under, brick-wall-2209991.jpg
out-over, window-1798492.png, 17.21%, 26.06%, 17%, 29.34%
in-under, velvet-1289287.jpg
in-over, glass-spider-311050.png
border, lace-1825573.png, 23px, 53 stretch

Shortcode:

[galdget_pp width=640 height=480 group=1 images=fit
  animation=ocw frame=myframes/example1.txt]

Happy framing!