diff options
author | XhmikosR <xhmikosr@gmail.com> | 2018-11-12 23:54:33 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2018-11-20 22:31:28 +0300 |
commit | 2ac3db83848ec94e7acd0f6c1e9b1bca4a3aa6b3 (patch) | |
tree | 91e5fbe71bf04cb062c9744f9ae5d3926e219e5b | |
parent | 072b5ab7fd59ff6ad16495a557a07d7b31c992a6 (diff) |
Tweak placeholder.svg.
* always include the title
* make it possible to skip adding the title by passing `title=' '`
* remove viewBox since we don't need it
-rw-r--r-- | site/_includes/icons/placeholder.svg | 57 | ||||
-rw-r--r-- | site/docs/4.1/components/carousel.md | 36 |
2 files changed, 46 insertions, 47 deletions
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 -%} - -{%- if include.height -%} - {% assign height = include.height %} -{%- else -%} - {% assign height = 180 %} -{%- endif -%} +{%- comment -%} + Usage: include icons/placeholder.svg args -{%- if include.text -%} - {% assign text = include.text %} -{%- else -%} - {% assign text = width | append: 'x' | append: height %} -{%- 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 -%} -{%- if include.class -%} - {% assign class = include.class| prepend: ' ' %} -{%- endif -%} +{%- 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.color -%} - {% assign color = include.color %} +{%- if include.text -%} + {%- assign text = include.text -%} {%- else -%} - {% assign color = '#ddd' %} + {%- assign text = width | append: 'x' | append: height -%} {%- endif -%} -{%- if include.background -%} - {% assign background = include.background %} -{%- else -%} - {% assign background = '#777' %} -{%- endif -%} +{%- capture svg -%} +<svg class="bd-placeholder-img{% if class != '' %} {{ class }}{% endif %}" width="{{ width }}" height="{{ height }}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"> + {% if title != ' ' %}<title>{{ title }}</title>{% endif %} + <rect fill="{{ background }}" width="100%" height="100%"/> + {% if text != ' ' %}<text fill="{{ color }}" dy=".3em" x="50%" y="50%">{{ text }}</text>{% endif %} +</svg> +{%- endcapture -%} -<svg class="bd-placeholder-img{{ class }}" width="{{ width }}" height="{{ height }}" xmlns="http://www.w3.org/2000/svg"{% if include.viewBox %} viewBox="{{ include.viewBox }}"{% endif %} preserveAspectRatio="xMidYMid slice">{% if include.title %}<title>{{ include.title }}</title>{% endif %}<rect fill="{{ background }}" width="100%" height="100%" /><text x="50%" y="50%" dy=".3em" fill="{{ color }}">{{ text }}</text></svg> -{{- '' -}} +{{- 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- <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} </div> </div> </div> @@ -53,13 +53,13 @@ Adding in the previous and next controls: <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> @@ -87,13 +87,13 @@ You can also add the indicators to the carousel, alongside the controls, too. </ol> <div class="carousel-inner"> <div class="carousel-item active"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> @@ -121,21 +121,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a </ol> <div class="carousel-inner"> <div class="carousel-item active"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> @@ -171,13 +171,13 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} </div> </div> <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev"> @@ -200,13 +200,13 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" data-interval="10000"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %} </div> <div class="carousel-item" data-interval="2000"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %} </div> <div class="carousel-item"> - {% include icons/placeholder.svg width="800" height="400" viewBox="0 0 800 400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} + {% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %} </div> </div> <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev"> |