Blipper widget example

NB Repeated refreshing of this page may reach Blipfoto’s request limit because of the number of Blipper Widgets on the page. Reaching the request limit will result in an error message being displayed instead of my latest blip. Please allow fifteen minutes or so for the request count to reset.

My Blipper Widget for WordPress is included on this page below using a shortcode. The shortcode used is given in the content of the blip’s caption. The content is text given between a pair of opening and closing Blipper Widget shortcodes:

[Xblipper_widgetX]The content goes here[/Xblipper_widgetX]

NB In the above code, the name of the shortcode blipper_widget is prefixed and suffixed with an X to prevent WordPress executing the shortcode.

The content allows you to add text independently of Blipfoto to the display text. It is constant for every blip.

The blip is styled using the CSS following the blip. The CSS is set in the Additional CSS section of the WordPress customiser. NB If you change your theme, you will need to remember to copy your Blipper Widget CSS from the old theme before you change so that you can easily paste it into the Additional CSS of your new theme. Alternatively, you could use a third-party CSS plugin to store Blipper Widget’s CSS, then it won’t change until you edit it in the third-party plugin or unti you delete that plugin.

The widget is displayed in the sidebar (which may be below the main text if your browser window or screen is narrow). It is styled using the widget settings form. Elsewhere on the site, the widget is styled using CSS – the same CSS used to style the shortcode version below.

Styling the widget using the widget settings form is simpler than using CSS, especially if you’re unfamiliar with CSS, but styling with CSS is more powerful and more flexible.

Placing Blipper Widget on the page with the shortcode

Out
Sun 1 May 2022
Out by pandammonium
Blipper Widget in action using the shortcode
[Xblipper_widgetX title='Placing Blipper Widget on the page with the shortcode' add-link-to-blip=show display-journal-title=show display-powered-by=show display-desc-text=show]<This text>[/Xblipper_widgetX]
to construct and display my latest blip. The blip is styled using the CSS below.
We couldn’t be bothered making anything for tea, so we went to the pub.

NB In the above code, the name of the shortcode blipper_widget is prefixed and suffixed with an X to prevent WordPress executing the shortcode.

Shortcode

This is the shortcode that generates the above instance of Blipper Widget:

[Xblipper_widgetX title='Placing Blipper Widget on the page with the shortcode' add-link-to-blip=show display-journal-title=show display-powered-by=show display-desc-text=show]<This text>[/Xblipper_widgetX]

NB In the above code, the name of the shortcode blipper_widget is prefixed and suffixed with an X to prevent WordPress executing the shortcode.

CSS code

This is the CSS that styles the above instance of Blipper Widget:


.bw-blip {
  --colour--blipfoto--white: hsla(115, 100%, 100%, 1.0); /* From the blipfoto website */
  --colour--blipfoto--grey: hsla(116, 0%, 35%, 1.0); /* From the blipfoto website */
  --colour--blipfoto--black: hsla(0, 0%, 0%, 1.0); /* From the blipfoto website */
  background-color: var(--colour--blipfoto--grey);
  margin-bottom: 2ch;
  padding: 1ch;
}
.bw-figure {
  padding-top: 0.5ch;
  text-align: center;
}
.bw-caption {
  background-color: var(--colour--blipfoto--white);
  color: var(--colour--blipfoto--grey);
}
.bw-caption-header {
  color: var(--colour--blipfoto--black);
  font-size: larger;
  margin-bottom: 1ch;
}
.bw-caption-content {
  font-size: smaller;
}
.bw-caption-footer {
  color: var(--colour--blipfoto--black);
  font-size: smaller;
  font-weight: lighter;
  padding-top: 0.5ch;
  text-align: right;
}
.bw-text {
  background-color: var(--colour--blipfoto--white);
  color: var(--colour--blipfoto--black);
}
.bw-caption,
.blip-example .bw-text {
  margin: 0.5ch;
  padding: 0.5ch;
}

This CSS does not style the CSS-styled Blipper Widget instance in the sidebar.