WPezPlugins: Shortcode Markup GitLab

WPezPlugins: Shortcode Markup

Use a small collection of shortcodes to define HTML markup (when the WordPress editor isn't as cooperative as you'd like). There's also some specialized CSS generation as well.

If it helps, imagine the results from a visual page builder without a visual UI, but also without the underlying bloat.

--

Special thanks to JetBrains (https://www.jetbrains.com/) and PhpStorm (https://www.jetbrains.com/phpstorm/) for their support of OSS and its devotees.

--

OVERVIEW

Currently, there are three shortcodes:

1. [wpez_scmu]
2. [wpez_scmu_style_bg_imgs_args]
3. [wpez_scmu_style_bg_imgs]

1- [wpez_scmu]

For general markup. The (default) shortcode atts are:

• tag - The default value is: tag="div". If you want the render a div you don't need to use this.

• close - When you want to close the tag (e.g., </div>): [wpez_scmu close="true"]. Again, div is the default value, else (e.g.) [wpez_scmu tag="span" close="true"] would close a span.

• id - e.g. [wpez_scmu id="wpez-scmu-bg-img-99"] will render: <div id="wpez-scmu-bg-img-99">

• class - e.g. [wpez_scmu tag="span" id="wpez-scmu-bg-img-99" class="my-example-class"] will render: <span id="wpez-scmu-bg-img-99" class="my-example-class">

• role - e.g. [wpez_scmu id="wpez-scmu-bg-img-99" class="my-example-class" role="img"] will render: <div id="wpez-scmu-bg-img-99" class="my-example-class" role="img">

• aria-label - e.g. [wpez_scmu tag="span" id="wpez-scmu-bg-img-99" class="my-example-class" role="img" aria-label="description of this bg img"] will render: <span id="wpez-scmu-bg-img-99" class="my-example-class" role="img" aria-label="description of this bg img">

• __oth_attrs__ - Short for: other attributes. These would be (global) attributes other than the previous four listed. The delimiter is a | (aka pipe). For the sake of a simple example, we'll define an id and class via oth_attrs. e.g., [wpez_scmu tag="span" oth_attrs="id=wpez-scmu-bg-img-99|class=my-example-class] will render: <span id="wpez-scmu-bg-img-99" class="my-example-class">

2- [wpez_scmu_style_bg_imgs_args]

When you're using the [wpez_scmu_style_bg_imgs] shortcode (see below), the [wpez_scmu_style_bg_imgs_args] allows you to customize (read: override and/or define) the plugin's defaults. Yes, that's correct. A shortcode to configure your shortcode.

The (default) shortcode atts:

• __id_slug__ - The default value is: "wpez-scmu-bg-img-". This slug is used by [wpez_scmu_style_bg_imgs] when it creates the CSS we're asking it to render. See the example under [wpez_scmu_style_bg_imgs_args].

• default_wp_size - The WordPress image size that - if nothing else - [wpez_scmu_style_bg_imgs] will use to generate the ``. Again, the example below is going to help. The default value for this atts is: "medium".

• min_width_unit - The unit of measure for min-width of the @media screen and (min-width:...). The default value is: "px". If you prefer "em" then (e.g.) [wpez_scmu_style_bg_imgs_args min_width_unit="em"]. Note: If you switch from "px" you'll have to also change the min_width value(s) (which will be explained shortly).

That is, in summary, [wpez_scmu_style_bg_imgs_args] is actually: [wpez_scmu_style_bg_imgs_args id_slug="wpez-scmu-bg-img-" default_size="medium" min_width_unit="px"]

--

WARNING!!!

This next bit is slightly complicated. Ideally, once you get through the example (below), this should make more sense.

In fact, have a quick look at the example (below) and come back.

--

The warning aside, let's set up the context.

Ultimately, we are going to have the [wpez_scmu_style_bg_imgs] shortcore generate a chunk of `` for us; for a set of id's and their background-image (property).

The added bonus is, rather than having a single (background) image associated with an id, we can have different (WP image) sizes of the same image associated with an id, based on breakpoint.

There are four default breakpoints. The code looks something like this:

$_sizes_settings = [

  'sm' => [
    'min_width' => 576,
    'wp_size'   => false
  ],
  'md' => [
    'min_width' => 768,
    'wp_size'   => false
  ],
  'lg' => [
    'min_width' => 992,
    'wp_size'   => false
  ],
  'xl' => [
    'min_width' => 1200,
    'wp_size'   => false
  ],

]

There is no 'xs' defined because in a mobile-first world that is defined by the default_size atts mentioned above.

The plugin will only use the sizes (i.e., 'sm', 'md', etc.) that have a "wp_size" defined; and false is obviously not a size.

For example, if you wanted the 'lg' breakpoint to use the large WP image size then: [wpez_scmu_style_bg_imgs_args lg_wp_size="large"]. If you also wanted to change the 'lg' min_width breakpoint: [wpez_scmu_style_bg_imgs_args lg_min_width="800" lg_wp_size="large"]. ``

3 - [wpez_scmu_style_bg_imgs]

Example 1

Let's say this is your markup:

<div class="my-demo-wrapper">
<div id="wpez-scmu-bg-img-3184" class="bg-img"></div>
<div id="wpez-scmu-bg-img-3210" class="bg-img"></div>
</div>

Please Note:

• This is a quick & dirty example. Your actual markup is likely to be different.
• The id slug - i.e., the bit before the img id (e.g., 3184) - MUST match id_slug (discussed above). Again, the default is: "wpez-scmu-bg-img-".
• IMPORTANT - It's up to you to define the properties of "bg-img" class in your own CSS. For example, the height property, or padding-bottom if you're trying to maintain a certain aspect ratio. This shortcode will only render CSS for the id's and their associated background-images.

And let's say these are the shortcodes in your post/page.

[wpez_scmu_style_bg_imgs_args lg_wp_size="large"]
[wpez_scmu_style_bg_imgs img_ids="3184,3210"]

The [wpez_scmu_style_bg_imgs] shortcode will render this `