{"id":19692150,"url":"https://github.com/getgrav/grav-plugin-shortcode-ui","last_synced_at":"2025-04-29T09:31:22.852Z","repository":{"id":3536841,"uuid":"49893087","full_name":"getgrav/grav-plugin-shortcode-ui","owner":"getgrav","description":"Grav Shortcode UI Plugin","archived":false,"fork":false,"pushed_at":"2022-03-28T09:14:24.000Z","size":2535,"stargazers_count":47,"open_issues_count":23,"forks_count":11,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-04-19T07:43:17.447Z","etag":null,"topics":["grav","grav-plugin","shortcode","shortcodes"],"latest_commit_sha":null,"homepage":"https://getgrav.org","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/getgrav.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-18T17:32:03.000Z","updated_at":"2023-07-18T08:06:35.000Z","dependencies_parsed_at":"2022-08-06T14:01:13.567Z","dependency_job_id":null,"html_url":"https://github.com/getgrav/grav-plugin-shortcode-ui","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getgrav%2Fgrav-plugin-shortcode-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getgrav","download_url":"https://codeload.github.com/getgrav/grav-plugin-shortcode-ui/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251159826,"owners_count":21545240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grav","grav-plugin","shortcode","shortcodes"],"created_at":"2024-11-11T19:12:27.599Z","updated_at":"2025-04-29T09:31:21.234Z","avatar_url":"https://github.com/getgrav.png","language":"CSS","readme":"# Grav Shortcode UI Plugin\n\n## About\n\nThe **Shortcode UI** plugin provides several useful UI elements for Grav as _shortcodes_. As such it requires the **Shortcode Core** plugin to function.\n\nIt currently provides:\n\n* Tabs\n* Accordion\n* CSS browser wrapper\n* Callout for images with hover-tooltips\n* Dual image comparison with drag handle\n* Variety of animated text effects\n\n## Installation\n\nTypically a plugin should be installed via [GPM](http://learn.getgrav.org/advanced/grav-gpm) (Grav Package Manager):\n\n```\n$ bin/gpm install shortcode-ui\n```\n\nAlternatively it can be installed via the [Admin Plugin](http://learn.getgrav.org/admin-panel/plugins)\n\n## Configuration Defaults\n\nThere is currently only one main plugin option for **Shortcode UI** and that is to set a default theme for the tabs shortcode.  As this plugin requires the **Shortcode Core** functionality there are some configuration options there that will effect this one.  For example setting the default `active` state to `false` will also cause this plugin to not function.\n\n```\nenabled: true\ntheme:\n  tabs: default         # default|lite|badges\n```\n\n## Per-Page Configuration\n\nYou can change the tabs theme per-page by providing custom page headers:\n\n```yaml\nshortcode-ui:\n    theme:\n        tabs: lite\n```\n\n## Available Shortcodes\n\nThis plugin provides a variety of plugins, each with a specific purpose:\n\n#### Tabs\n\n\u003e NOTE: Requires JQuery to be loaded\n\nAn example of the Tabs shortcode is as follows:\n\n```\n[ui-tabs position=\"top-left\" active=\"0\" theme=\"lite\"]\n[ui-tab title=\"First Tab\"]\n\nIn tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci [placerat tincidunt](#) id ac eros. Fusce et gravida libero. \n\nPhasellus cursus odio ex, in **mattis lorem tincidunt** vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.\n\n[/ui-tab]\n[ui-tab title=\"Second Tab\"]\n\nIn tempor sed sapien **eu porttitor**. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. [Quisque et enim](#) vitae orci placerat tincidunt id ac eros. Fusce et gravida libero. \n\nPhasellus cursus odio ex, in mattis lorem tincidunt vel. [Donec nibh odio](#), dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.\n\n[/ui-tab]\n[/ui-tabs]\n```\n\n##### Example\n\n![](assets/ui-tabs.png)\n\nThe `[ui-tabs]` shortcode has some optional parameters:\n\n* `position` - top-left | top-right | bottom-left | bottom-right\n* `active` - 0-index number of initial active tab state.  0 to (number of tabs - 1)\n* `theme` - default | lite | badges\n\nThe `[ui-tab]` shortcode that defines each _tab_ has the following parameters:\n\n* `title` - The text to display for the actual tab title\n\nYou can use whatever markdown you wish in the tab itself.  They are auto-adjusting and fully responsive.\n\n\n#### Accordion\n\nAn example of the Accordion shortcode is as follows:\n\n```\n[ui-accordion independent=true open=all]\n[ui-accordion-item title=\"Section 1\"]\nBacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.\n[/ui-accordion-item]\n[ui-accordion-item title=\"Section 2\"]\nShort loin swine shankle flank picanha andouille burgdoggen landjaeger hamburger drumstick. Beef ham tail, tri-tip flank ham hock meatball picanha corned beef t-bone shank turkey ball tip shoulder. Flank corned beef chicken, meatloaf venison ball tip ham hock tail salami jowl short ribs pork belly drumstick. Meatball chicken hamburger beef filet mignon doner pork picanha pork chop fatback rump ham tri-tip ball tip landjaeger. Sausage leberkas shoulder tongue short loin shankle. Prosciutto tri-tip frankfurter shoulder drumstick capicola. Pork loin shank strip steak pork belly tongue cow.\n[/ui-accordion-item]\n[ui-accordion-item title=\"Section 3\"]\nBacon ipsum dolor amet beef burgdoggen shoulder, meatball prosciutto kevin brisket chicken turkey. Kevin rump pancetta short loin capicola brisket landjaeger fatback picanha pork belly ribeye. Strip steak chuck turducken kevin t-bone ribeye cupim capicola alcatra rump. Venison pork chop biltong cupim pig rump meatloaf sausage pork. Strip steak kevin tongue brisket ball tip, venison turducken flank frankfurter corned beef pancetta fatback drumstick ham. Drumstick pastrami leberkas meatball flank tongue turkey ground round pork belly doner frankfurter porchetta jowl.\n[/ui-accordion-item]\n[/ui-accordion]\n```\n\n##### Example\n\n![](assets/ui-accordion.png)\n\nThe `[ui-accordion]` shortcode has some optional parameters:\n\n* `open` - accordion item # starting from `0` (e.g. `1` = 2nd item) | `none` = all closed | `all` = all open\n* `independent` - `true` | `false` (default) = determines if panels can be opened independently from one-another\n\nThe `[ui-accordion-item]` shortcode that defines each _accordion-item_ has the following parameters:\n\n* `title` - The text to display for the actual accordion item\n\n#### Browser\n\nThis shortcode wraps content (image, text, whatever) with a HTML/CSS Browser frame.\n\n```\n[ui-browser address=\"http://getgrav.org\" class=\"p-4\"]\n![](getgrav.png)\n[/ui-browser]\n```\n\nNOTE: Address is displayed in the browser location field, and class is optional but is applied to the browser window.\n\n##### Example\n\n![](assets/ui-browser.png)\n\nThe `[ui-browser]` shortcode has some optional parameters:\n\n* `address` - URL to display in the fake address bar of the browser\n\n#### Callout\n\n\u003e NOTE: Requires JQuery to be loaded\n\nThe `[ui-callout]` shortcode is intended to be able to provide numbered callout badges on an image and allow you to hover over an image and see a tooltip describing a particular feature.  This is particularly useful when describing a user interface or provide notes or tips for an image.\n\nEach `[ui-callout-item]` defines a particular item or tip that exists for the image.\n\n```\n[ui-callout]\n[ui-callout-item title=\"Outlines\" position=\"15%, 20%, se\"]\nThis administrative panel lists displays the current theme's outlines, giving you quick access \nto edit, rename, duplicate, and delete them.\n[/ui-callout-item]\n[ui-callout-item title=\"Menu Editor\" position=\"60%, 85%, nw\"]\nThis administrative [color=blue]panel gives you the ability[/color] to enhance the platform's \nmenu by altering styling, rearranging links, and creating menu items that sit outside of the \nCMS's integrated Menu Manager.\n[/ui-callout-item]\n![](affinity.jpg)\n[/ui-callout]\n```\n\n##### Example\n\n![](assets/ui-callout.png)\n\nYou can see this image has **2 items**\n\nThe `[ui-callout]` has no parameters.\n\nThe `[ui-callout-item]` shortcode that defines each item has the following parameters:\n\n* `title` - The title of the callout\n* `position` - format `Y%, X%, TIP_ORIENTATION`. The Y% and X% are measured from the top left corner.  That being `0%, 0%`, and the bottom right corner being `100%, 100%`.  The tip orientation should be one of these values: `ne, nw, se, sw`\n\nYou can use whatever markdown you wish in the item itself.  These will be represented as tooltips on hover.\n\nYou can also combine this shortcode with [Animate.css](https://daneden.github.io/animate.css/) by including the CSS class in your theme or page, and then adding top-level class entries:\n\n```\n[ui-callout class=\"pulse infinite animated\"] \n...\n[/ui-callout]\n```\n\n#### Image Compare\n\n\u003e NOTE: Requires JQuery to be loaded\n\nThis shortcode takes two images and provides a simple way to compare them via a draggable handle that lets you slide one image over the other.\n\nSource: https://codyhouse.co/gem/css-jquery-image-comparison-slider/\n\n```\n[ui-image-compare]\n![Original](original.jpg?cache)\n![Modified](modified.jpg?cache)\n[/ui-image-compare]\n```\n\n##### Example\n\n![](assets/ui-image-compare.png)\n\nSimple provide two images, each on a newline between this shortcode.  The `Alt` text for the image will be used for the title.\n\n#### Polaroid\n\nThis shortcode displays an image in a polaroid frame which can be customized in various ways.\n\n```\n[ui-polaroid angle=\"-3\" margin=\"30px 50px 20px 0\" position=\"left\" title=\"How's this for embarrasing!\"]\n![](my-image.jpg)\n[/ui-polaroid]\n```\n\n* `angle` can be a positive or negative value that represents the degree of rotation (3 by default)\n* `margin` is the margin value applied to the bounding-box.  Use standard CSS values. (browser defaults)\n* `postion` can be `left` or `right` (right by default)\n* `gloss` overlay effect can be `true` or `false` - (true by default)\n* `title` is the text displayed below the image\n* `class` optional classes to pass to the wrapper\n\n##### Example\n\n![](assets/ui-polaroid.png)\n\n#### Animated Text\n\n\u003e NOTE: Requires JQuery to be loaded\n\nThis shortcode creates an attractive animated text effect with a few simple options.  By default, the animated text is appended to the end of the provided text.  However you can use the `%WORDS%` text token to insert the animated text anywhere in your string.\n\nSource: https://codyhouse.co/gem/css-animated-headlines/\n\nThe `[ui-animated-text]` shortcode has some parameters:\n\n* `words` - Various words in a comma separated list to animate through\n* `animation` - `rotate-1 | rotate-2 | rotate-3 | type | loading-bar | slide | scale | clip | zoom | push`\n* `element` - HTML element to wrap the text, for example `h1`\n\n### Word-Based Animations\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"rotate-1\" element=\"h2\"]%WORDS% is my favorite food[/ui-animated-text]\n```\n\n![](assets/ui-animated-rotate1.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"loading-bar\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-loading-bar.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"slide\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-slide.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"clip\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-clip.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"zoom\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-zoom.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"push\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-push.gif)\n\n### Letter-Based Animations\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"letters rotate-2\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-rotate2.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"letters type\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-type.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"letters rotate-3\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-rotate3.gif)\n\n```\n[ui-animated-text words=\"pizza, chips, steak\" animation=\"letters scale\" element=\"h2\"]My favorite food is[/ui-animated-text]\n```\n\n![](assets/ui-animated-scale.gif)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetgrav%2Fgrav-plugin-shortcode-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetgrav%2Fgrav-plugin-shortcode-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetgrav%2Fgrav-plugin-shortcode-ui/lists"}