diff --git a/site/_includes/icons/placeholder.svg b/site/_includes/icons/placeholder.svg index a6f835d8e8..03f06c0482 100644 --- a/site/_includes/icons/placeholder.svg +++ b/site/_includes/icons/placeholder.svg @@ -1,36 +1,35 @@ -{%- if include.width -%} - {% assign width = include.width %} -{%- else -%} - {% assign width = '100%' %} -{%- endif -%} +{%- comment -%} + Usage: include icons/placeholder.svg args -{%- if include.height -%} - {% assign height = include.height %} -{%- else -%} - {% assign height = 180 %} -{%- endif -%} + args can be one of the following: + title: Used in the SVG `title` tag + text: The text to show in the image - default: 'width x height' + class: default: 'bd-placeholder-img' + color: The text color (foreground) - default: '#ddd' + background: The background color - default: '#777' + width: default: 100% + height: default: 180px +{%- endcomment -%} + +{%- assign title = include.title | default: 'Generic Placeholder Image' -%} +{%- assign class = include.class | default: '' -%} +{%- assign color = include.color | default: '#ddd' -%} +{%- assign background = include.background | default: '#777' -%} +{%- assign width = include.width | default: '100%' -%} +{%- assign height = include.height | default: '180' -%} {%- if include.text -%} - {% assign text = include.text %} + {%- assign text = include.text -%} {%- else -%} - {% assign text = width | append: 'x' | append: height %} + {%- assign text = width | append: 'x' | append: height -%} {%- endif -%} -{%- if include.class -%} - {% assign class = include.class| prepend: ' ' %} -{%- endif -%} +{%- capture svg -%} + + {% if title != ' ' %}{{ title }}{% endif %} + + {% if text != ' ' %}{{ text }}{% endif %} + +{%- endcapture -%} -{%- if include.color -%} - {% assign color = include.color %} -{%- else -%} - {% assign color = '#ddd' %} -{%- endif -%} - -{%- if include.background -%} - {% assign background = include.background %} -{%- else -%} - {% assign background = '#777' %} -{%- endif -%} - -{% if include.title %}{{ include.title }}{% endif %}{{ text }} -{{- '' -}} +{{- svg | replace: ' ', '' | strip_newlines -}} diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md index ce46c9078e..bf8f5c250f 100644 --- a/site/docs/4.1/components/carousel.md +++ b/site/docs/4.1/components/carousel.md @@ -32,13 +32,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w- @@ -53,13 +53,13 @@ Adding in the previous and next controls: