https://github.com/websemantics/placeholder-plugin

This plugin provides a quick and simple way for generating crystal-clear image placeholders using SVG
https://github.com/websemantics/placeholder-plugin

Last synced: 3 months ago
JSON representation

This plugin provides a quick and simple way for generating crystal-clear image placeholders using SVG

• Host: GitHub
• URL: https://github.com/websemantics/placeholder-plugin
• Owner: websemantics
• License: mit
• Created: 2015-12-27T21:36:31.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-28T05:14:50.000Z (almost 9 years ago)
• Last Synced: 2024-07-13T13:42:57.739Z (4 months ago)
• Language: PHP
• Homepage:
• Size: 516 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Placeholder Plugin

This plugin provides a quick and simple way for generating crystal-clear image placeholders using SVG.

Use `{{ placeholder()}}` to generate an image placeholder (100 x 100) by default.

## Avilable Parameters:

 * width  : image width

 * height : image height

 * color  : text color

 * font  : text font

 * background : image background color

 * fontSize : text font size

 * text : overrider the default text (width * height)

### Example 1: 

```



    {{ placeholder({width : 70, height : 70})| raw}}

    {{ placeholder({width : 70, height : 70})| raw}}

    {{ placeholder({width : 70, height : 70})| raw}}

    {{ placeholder({width : 70, height : 70})| raw}}

    {{ placeholder({width : 70, height : 70})| raw}}

    {{ placeholder({width : 70, height : 70})| raw}}

    {{ placeholder({width : 70, height : 70})| raw}}





    {{ placeholder({width : 200, height : 200, fontSize: 14})| raw}}

    {{ placeholder({width : 332, height : 200,fontSize: 19})| raw}}





    {{ placeholder({width : 542, height : 100, fontSize: 23})| raw}}



```


### Result 

![Example 1](https://raw.githubusercontent.com/websemantics/placeholder-plugin/master/resources/img/example-1.png)

### Example 2:

```



    {{ placeholder({color:'#ffffff',text: 'Burnt Sienna',background: "#ff4f54"})| raw}}

    {{ placeholder({color:'#ffffff',text: 'Amulet',background: "#73a375"})| raw}}

    {{ placeholder({color:'#ffffff',text: 'Leather',background: "#97715a"})| raw}}

    {{ placeholder({color:'#ffffff',text: 'Polo Blue',background: "#8494cc"})| raw}}

    {{ placeholder({color:'#ffffff',text: 'Porsche',background: "#e4a365"})| raw}}

    {{ placeholder({color:'#ffffff',text: 'Ronchi',background: "#eec95b"})| raw}}

    {{ placeholder({color:'#ffffff',text: 'Kimberly',background: "#7078a7"})| raw}}



```


### Result 

![Example 2](https://raw.githubusercontent.com/websemantics/placeholder-plugin/master/resources/img/example-2.png)

# Fluent API

When using this plugin you can either send all parameters as described above or in `fluent` format, for example:

```

{{ placeholder({color:'#ffffff',text: 'Burnt Sienna',background: "#ff4f54"}) | raw}}

```

Will be written in fluent as,

```

{{ placeholder().color('#ffffff').text('Burnt Sienna').background("#ff4f54") | raw}}

```

Or

```

{{ placeholder({color:'#ffffff'}).text('Burnt Sienna').background("#ff4f54") | raw}}

```

If the same parameter is being set using function parameters and the fluent api, the fluent value will supersede,

```

{{ placeholder({width:300}).width(500) | raw}}

```

The placeholder of the above exampel will have width of 500px.

# Change Log

All notable changes to this project will be documented in this section.

### [0.1] - 2015-12-26

#### Changed

- Quick way to create image placeholders

- Accepts width and height

- Can set background and foreground colors

- Set font size and text

# License

Placeholder Plugin is open source under MIT License.  See LICENSE.