Global IP Address:

54.81.203.33

Your Local IP Address:

Determining Local IP address....

*If you are behind a firewall (NAT) your global and local IP addresses will differ. Learn More

Piwigo Photo Gallery – a demo of the new pBrain theme & pwgSlideShow plugin

November 29th, 2010 reset Comments off


Click here to see the new theme named  ‘pBrain’
for Piwigo photo gallery system.

For those new to Piwigo, Piwigo is an open-source web photo gallery system.  It was originally called the ‘PHP web gallery’ (pwg) since it is based on the php scripting language.  Here are some links:  piwigo.orgWikipedia

My goal in posting a demonstration of this theme was to allow users to see it live and give users a chance to provide feedback.  A few features of this theme are in beta.  Here is a list of some of the features incorporated into this theme:

  1. Fluid layout – content will expand to fill available browser. Nothing major here, but an important part of this theme.  for Melissa.
  2. Search, feeds and login in fixed position element ‘pinned’ to top of browser.
  3. Customizable header – Logo, gallery title / description and a custom block are available for customization.  Custom block presently has Google Adsense in it.  If you adjust this, just be aware and check layout  at browser min width condition to ensure content doesn’t overflow or break-flow.
  4. Menu layout  has vertical tabs with fly-out menus on mouse hover – Goal here was to achieve a cleaner look by using  tabs and flyout.  One challenge is how to make multi-lingual as tabs are images.  Maybe someone has some suggestions?  I guess theme could substitute language specific images based on language setting?
  5. When in single picture  view and using thumbnail previews, the thumb previews (on narrower browser window) will partially hide behind the main picture.  A simple mouse  hover of  the thumb will bring it to the foreground.  Depending on main picture size and thumbnail size, a small adjustment in min-width for fluid layout might be needed to ensure thumbs don’t completely hide behind image.  try  it, kinda nice!
  6. Theme has it’s own plugin (installed separately) which provided a few enhancements:
    - provides ‘spinning’ timer during piwigo HTML slideshow
    - formats the photo number  with “of” not “/“  ie:  3  of 41  versus 3 / 41
    - changes ‘Home’ breadcrumb to ‘Gallery Home’, but can be set any string.
  7. Image watermark on single picture (including HTML slideshow) view.  Defaults to small piwigo watermark distributed with theme as example.  Create your own .png file and you can display your watermark.
  8. Improved single picture navigation, consolidated into navbar below image.  need to finish help button yet.
  9. Improved metadata and comments layout.  I tested expanding/collapsing these blocks by clicking header and what default behavior should be (open or closed?).  You can click header to expand collapse, but default is expanded for both metadata and comments.
  10. This theme also demonstrates a few plug-ins I recently created for piwigo.  The plugins add functionality, but are not tied to the theme and can be  used in other themes.
  11. pwgSlideShow plugin:
    This plugin delivers a full-screen flash slideshow.  Click on the Flash ‘f’ icon in the toolbar displayed on the thumbnails or the single picture view in piwigo.  This plugin is in beta and am working to refine it a bit more.  Here  are some of the features of pwgSlideShow:

    1. Fit all or Fill all for image display.  Fit all will not clip, fill all may clip but maximizes screen fill (note: images are never upscaled).
    2. thumbnails displayed in ‘pages’ on foot of screen (quantity displayed is dependent  on screen width).  If you hover of  thumb, you get a larger preview and can jump to that image with a click.
    3. navigation bar hiding: the navigation bar will hide itself when you ‘rollOut’ of the navigation bar with your  mouse (so, move your mouse over the navigation bar and the move above it and it will fade in a few seconds).  Just move your mouse to the bottom of  your screen to un-hide the navigation bar.  If you want the navigation bar to remain visible, just keep you mouse in that area.
    4. View tracking is maintained when viewing images with this method.  View tracking can be disabled if you wish.  Views are only counted once even if you view an image multiple times in the full screen slideshow (until the web page is refreshed).
    5. Images are preload one-ahead at a time, so not to consume excess bandwith preloading everything in playlist (like some other players do!).  Preload indicated is red / green dot in upper right corner (flashing red means next image is loading, solid green means next image ready).
    6. Slideshow ‘spinning’ timer to indicate time ticks for slideshow period.  Slideshow refresh time (or period) utilizes piwigo $conf value for timer value.
    7. Context menu with link to piwigo.org
    8. Keyboard navigation (try it! an awesome way to view images).
      - left & right arrow keys for previous / next image
      - up & down arrow keys for previous / next thumbs page
      - spacebar to toggle play/pause mode; escape return to web page
    9. When returning to single picture view, refresh to image exited upon if  different than entry.  This  behavior has a parameter is you want to disable.
    10. Can also be configured for autostart upon fullscreen entry.
    11. Shows alternate content if flash not available
  12. pAnchor plugin:
    this plugin adds an HTML page anchor to picture and slideshow pages and navigation urls to improve web browsing.  You can see the anchor #  added to the urls in your address bar.  It has an experimental feature that eases your browser to that anchor to scroll nice down to the image.
  13. pGravatar plugin:
    this plugin adds a Gravatar image for comment author or  displays a default  image if user e-mail not registered with gravatar.com

I hope you like the new theme  named ‘pBrain’.  This theme does  require a few ‘hacks’ to utilize some of the features.  This is due to how I used the menu system and  as mentioned before, See the README for the theme and plugins. Hopefully, piwigo developers can implement a couple minor things to improve extensibility of piwigo.

Well, beat it up and let me know what you think.  I am continuing to refine and button things up, like some error trapping, help screen, etc.

As of 11/29/2010, this theme is NOT at the piwigo repository as I am just wrapping up some items. I will edit this post when it is available at piwigo.org. 

But browse the theme demo here and let me know your thoughts

Add Flash Header to WordPress Atahualpa Theme (ver 3.5.3)

September 16th, 2010 reset Comments off

Since first publishing ‘Add a Flash Header to WordPress Atahualpa Theme‘, many users have found this to be a great solution to using an Adobe Flash movie (.swf) in the header area of Atahualpa theme on WordPress. This was tested on WordPress version 3.0.1 and the Atahualpa Theme latest release is 3.5.3.

Both the Static Publishing and the Dynamic Publishing method have been updated, so you can choose which best fits your needs. The Static Publishing method uses the industry best practice of nested-object tags with conditional expressions. The Dynamic Publishing method uses swfObject2.2 to insert the flash movie dynamically using javascript. Google has some great information on swfObject and various methods of implementation.

Functionality has also been added to the  %flash[....] parameters specified in the Atahualpa Theme Options in the WordPress Dashboard. You can now supply three (3) additional (and also optional) parameters, flashvars, param values,attribute values.

  • Flashvars allow you to pass information to your flash movie.
  • Param values allow you to specify specific Flash parameters to the browser to change how the Flash object behaves (ie: menu=false, wmode=transparent, allowScriptAccess=always are examples of parameters).
  • Attributes allow you to specify additional HTML attributes for the < object > tag, such as id=ata_flash_header.

The syntax for the %flash[......] header item in Atahualpa Theme Header Options is:

%flash[ swf filename, width, height, flashvars, param, attributes]

swf filename: is required and is the movie filename (.swf). This can be a full URL, but if just filename, file is expected to be in theme’s /images/header folder.
width: is required and is the width (in pixels) of the movie. You can optionally append ‘px’, as in 1220px.
height: is required and is the height (in pixels) of the movie. You can optionally append ‘px’, as in 200px.
flashvars: are optional and is simply a series of assignment statements separated by semi-colon (;). As in site=production;x=5. You header would use variables site & x in it’s actionscript and these variables will be initialized with values stated when the flash movie begins.
param: are optional parameters for Flash Plug-in that control specific Flash behavior such as menu and wmode (window-mode). For example, menu=false;wmode=transparent for param would allow the flash movie to be transparent and show reduced context (right-click) menu.
attributes: are optional attributes that are added to the HTML object tag. Typically this is the ID of the element, as in id=ata_flash_header.

Here is a real example:

%flash[header.swf, 1220px, 200px, site=production, menu=false;wmode=transparent, id=ata_flash_header]

Note: the use of comma (,) to separate the major items and semi-colon (;) separate multiple values within an item. always double-check your syntax, I usually start with the required parameters and then get page rendering correctly and then add items to fine tune behavior.

You can supply ‘null’ in lieu of a optional parameter. For example if you had no flashvars, but needed to specify param & attributes. Do this %flash[header.swf, 1220px, 200px, null, menu=false, id=ata_flash_header].

Make sure you specify your Header image height in the WordPress Dashboard Atahualpa Theme Options and supply a default image to be used as alternate content if Flash is not available in the users browser. Alternate content (the header image) will be displayed as a fall-back. You should test this option by disabling your flash plug-in in your browser.  For some more information, see previous mydeviceIP.com posts that discuss these principles in detail.

Here is Zip file for STATIC Publishing method. Replace the bfa_header_config.php in your Theme’s functions folder. (good idea to rename original or keep back-up). I usually rename the original file to bfa_header_config-ORIG.php.

Here is Zip file for DYNAMIC Publishing method. This method requires swfObject.js in your root WordPress folder. You can get swfObject.js at google code.

If you experience any problems with this latest version of the ‘Add Flash Header to WordPress Atahualpa Theme’, please leave a comment and we will try to investigate it.

Flash Header for WordPress Atahualpa Theme (ver 3.4.9)

September 15th, 2010 reset Comments off

Here is the  Atahualpa Theme version 3.4.9 update.  WordPress.org currently has  this  version posted in Themes section, eventhough latest version is  3.5.3.  You can get the latest Atahualpa theme at the author’s web site (http://wordpress.bytesforall.com/?p=94).

PLEASE read the post (for  the 3.5.3 version) as new syntax and features  are explained.  Those features include ability to specify flashvars, parameters and attributes in the %flash[....]  shortcode used in the Ata Theme  Dashboard Options for setting up your header.  The added parameters are optional, so the old syntax should work but won’t specify any additional information in the  HTML DOM and  flash object.

DOWNLOAD:  Static Publish method (.zip)

DOWNLOAD:  Dynamic Publish method (.zip)

This won’t be a long post, but I wanted to supply updates for using Flash headers in this theme.  I did update both the Static Publishing  method  and  Dynamic Publishing methods, so choose what applies.

If you need more information, see the atahualpa tag for the series of posts which provide detailed explanations. This post even has a sample download source code for the Flash (.fla) and alternate content image if you need to start from scratch.

If you have any comments or questions, please feel free to leave them.

Add Custom Header to WordPress Atahualpa Theme (ver 3.4.4)

October 9th, 2009 reset Comments off

This post is itended for users of the WordPress Atahualpua theme that desire a custom header option. After adding %flash to the Ata theme in our previous posts, it occurred that it might be useful to have a %html[...]% option to the header options. Headers get customized a lot and some of us need some more flexibility in the header options.

By using the %html[html code]%, you specify the HTML code yourself, so you really have complete control. If you don’t know HTML, maybe for now use another option and go to www.w3schools.com for some HTML help. I would recommend creating your HTML code for the header in your prefered designer (I use dreamweaver cs4) so you can test it and ensure it is begin rendered correctly. Then you can paste your code within the %html[....]% parameter in the Atahualpa Theme Options->Style & Edit Header Area – Configure Header Area options. Save your changes and refresh your blog page to verify your new custom HTML header is working correctly.

Here is how to implement:
1. Download .zip file here (this zip contains bfa_header_config.php file).
2. Make a backup copy of the original bfa_header_config.php file in the wp-content/themes/atahualpa/functions folder.
3. Extract the .php from the .zip file in #1. Upload .php file to same location as original bfa_header_config.php.
4. Go to your WordPress Administrator panel->Appearance->Atahualpa Theme Options->Style & Edit Header Area.
5. Update the Configure Header Area using the %html[html]% or the %flash[url,width,height].
6. Put your HTML code in a <div> element and use in-line styling to control width, height, background, etc.

Good Luck with it!

Here is a sample %html[....]% text in a .zip file.
Here is an example set of files I used for testing (.zip file)

To use this example, you will need to upload the images to a folder on your site and edit the URLs in the HTML code to match path to images. The sample creates a 900px by 200px header with a series of balloons with random colors and vertical positions across the header. Also, a flash overlay is included at the left side of the header. This flash overlay is relatively positioned with in-line styling. Hopefully the example is a good concrete example to follow. You could load the javascript from a file to cut down on the HTML length.

I really think this is a worthy addition to the theme header options, as you can completely specifiy an custom HTML header to make your blog using the Atahualpa theme whatever you can imagine it to be!

* note: the %flash[...] option is also supported by the files supplied in this post. If you wish to have a flash header, see Add a Flash Header to WordPress Atahualpha Theme (ver 3.4.4)

Add a Flash Header to WordPress Atahualpha Theme (ver 3.4.4)

October 7th, 2009 reset 24 comments

update Jan. 29th, 2010 – This Flash header was updated to fix a layering issue with %pages menu drop-down menu items being hidden behind the Flash movie in the header. Basically, the flash parameter ‘wmode’ is now set to transparent which is used when the flash movie is loaded. For now, if you want to change this parameter or add another, you will need to edit the bfa_header_config.php file. In the future, I would like have more flexible Ata Theme Options %flash[...] syntax that would allow options without editing any .php code.

This is a significant update to the 2 previous posts for Adding a Flash Header to WordPress Atahualpha Theme for versions 3.2 & 3.4.1. This update does NOT require editing any .php files and utilizes the Atahualpa (or ‘Ata’ for short) Theme Options thru the WordPress Administrative panel to control the Flash object (.swf movie). Basically, it adds parameters to the %flash option so it is not necessary to modify the .php files. For example, %flash[url, width, height]. See below for more details. Flash is still implemented in either the static publishing method using <object tags> or the dynamic publishing method using swfobject.js. See previous posts or google for more discussion on publishing methods.

The easy way is to use the static publishing code provided, but the dynamic is provided for those interested or those looking for an example.

The Static publishing method.
  • Download the bfa_header_config.php file here (.zip file)
  • Continue with the steps below
The Dynamic publishing method.
  • Download the bfa_header_config.php file here (.zip file)
  • Continue with the steps below

Common steps for both methods

  1. Make a backup copy of the original bfa_header_config.php file. This is easily accomplished by renaming the file to bfa_header_config-ORIG.php. We want to be able to put things back like it was if we screw something up. Things should go smoothly, but always good idea to have a back-up.

  2. Extract bfa_header_config.php from the downloaded zip file above for your prefered publishing method.

  3. Upload bfa_header_config.php to your blog. This file should be uploaded to …/wp-content/themes/atahualpha/functions folder (same location as original file in #1).

  4. Go to your WordPress Administrative panel and go to
    Appearance->Atahualpa Theme Options->Style & edit HEADER AREA. In the Configure Header Area, you can now use %flash[url, width, height] to enable your flash movie.

    The proper syntax for the %flash parameter is: %flash[url, width, height].

    example: %flash[header.swf, 1200px, 200px]

    The url can be just the .swf filename if file is placed in Atahualpha header folder
    (wp-content/themes/atahualpa/images/header). Otherwise the url should be the complete url,
    ie: http://www.yourdomain.com/blog/wp-content/uploads/2009/10/header.swf.
    The width & height are the width and hieight of your flash movie in pixels. The px suffix is optional.

If you are using the dynamic publishing method, which relies on swfobject.js from google, make sure you have uploaded swfobject.js to your web site. If this file is not located in the root of your blog, you will need to alter the path to swfobject.js in the bfa_header_config.php file (line #336).

The %flash[url, width, height] header option is designed to be used as a replacement of the %image option. If you include your logo in your flash movie, then don’t use the %logo option. I sometimes relocate the search box and the feed buttons to the sidebar and don’t use %logo. The %image & %logo options will still display, but it would be in addition to the flash movie. Feel free to experiment. My header options are: %flash[header.swf,1220px,200px] %bar1 %pages %bar2, which results in flash movie at top with page nav-bar between to the horizontal bars.

Also, it very important to test your alternate content by temporarily disabling your flash plugin. To Disable your flash plugin (in IE tools->manage add-ons;firefox tools->add-ons), select the Flash Plugin and Disable it. Then refresh your blog page in your browser and make sure the alternate content is displayed. In the Atahualpha Theme Options->Style & edit Header area, turn ON the Blog title & turn ON the blog tagline. Change any of the other properties of title & tagline to match your blog. Save the changes and refresh your blog page. With flash disabled, you should see your alternate content. This is VERY important, since google and other search engines see the alternate content. And since the Blog title (an <h1> HTML tag), it is important in ranking. The images in the header folder are selected at random to be the alternate content, so make sure you upload one. I usually save a .jpg snapshot of the flash movie and upload that so it has a similar look, but no animiation since it is a .jpg.

If you need a sample flash header to start with, you can download here. I have implemented a few flash headers and I stripped this one down and made a sample for people to use. It is 990px wide by 200px high and has buttons on title and image linked to blog home page. The source files are included (.fla & .as) if you have flash and want to tweak it. Adobe has a 30 day trial for flash if you don’t have it. It is in Flash CS4 using Action Script 3. You need to change the button url link in the button_overlay_as3.as file to match your blog. Alternate content header.jpg included also.

I hope this makes implementing a flash header in the Ata theme easier for those interested, especially those who do not want to edit code. This is the 3rd revision of this hack and since it can be implemented easily without any coding, I think it could be added to the theme distro and allow the most popular WordPress theme to allow flash headers by default.

Good luck with this one! If you have comments or questions, please post them. Thanks for using myDevceIP.com. Feel free to come back if you need to look up an IP address.

UPDATE: The %flash option does require that you have a least one (1) image file (.jpg, .png, etc.) in the Ata Theme’s images/header folder. You will get a ‘foreach’ error from php at top of page if no images are found. You need this image for your alternate content (see above discussion on alternate content). updated 11-30-2009

references: Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.1)
Adding A Flash Header to WordPress Atahualpa Theme

* note that the %flash option uses square brackets [ ] at each end not parenthesis ( ).
and this code has been updated to use the %html[...]% option for a total custom header.
See the Add Custom Header to WordPress Atahualpa Theme post.