Download the PHP package imsky/holder without Composer
On this page you can find all versions of the php package imsky/holder. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Package holder
Short Description Client-side image placeholders.
License MIT
Homepage http://holderjs.com
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package holder
Holder
Holder renders image placeholders in browser using SVG.
Used by thousands of open source projects (including Bootstrap v3) and many other sites.
No extra requests, small bundle size, highly customizable.
Installing
- npm:
npm install holderjs - yarn:
yarn add holderjs - unpkg: https://unpkg.com/holderjs
- cdnjs: https://cdnjs.com/libraries/holder
- jsDelivr: https://www.jsdelivr.com/package/npm/holderjs
- Bower:
bower install holderjs - Rails Assets:
gem 'rails-assets-holderjs' - Meteor:
meteor add imsky:holder - Composer:
php composer.phar update imsky/holder - NuGet:
Install-Package Holder.js
Usage
Include holder.js in your HTML:
Holder will then process all images with a specific src attribute, like this one:
The above tag will render as a placeholder 300 pixels wide and 200 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Programmatic usage
To programmatically insert a placeholder use the run() API:
Placeholder options
Placeholder options are set through URL properties, e.g. holder.js/300x200?x=y&a=b. Multiple options are separated by the & character.
theme: The theme to use for the placeholder. Example:holder.js/300x200?theme=skyrandom: Use random theme. Example:holder.js/300x200?random=yesbg: Background color. Example:holder.js/300x200?bg=2a2025fg: Foreground (text) color. Example:holder.js/300x200?fg=fffffftext: Custom text. Example:holder.js/300x200?text=Hellosize: Custom text size. Defaults toptunits. Example:holder.js/300x200?size=50font: Custom text font. Example:holder.js/300x200?font=Helveticaalign: Custom text alignment (left, right). Example:holder.js/300x200?align=leftoutline: Draw outline and diagonals for placeholder. Example:holder.js/300x200?outline=yeslineWrap: Maximum line length to image width ratio. Example:holder.js/300x200?lineWrap=0.5
Themes
Holder includes support for themes, to help placeholders blend in with your layout.
There are 6 default themes: sky, vine, lava, gray, industrial, and social.
Customizing themes
Themes have 5 properties: fg, bg, size, font and fontweight. The size property specifies the minimum font size for the theme. The fontweight default value is bold. You can create a sample theme like this:
If you have a group of placeholders where you'd like to use particular text, you can do so by adding a text property to the theme:
Using custom themes
There are two ways to use custom themes with Holder:
- Include theme at runtime to render placeholders already using the theme name
- Include theme at any point and re-render placeholders that are using the theme name
The first approach is the easiest. After you include holder.js, add a script tag that adds the theme you want:
The second approach requires that you call run after you add the theme, like this:
Using custom themes and domain on specific images
You can use Holder in different areas on different images with custom themes:
Inserting an image with custom theme
You can add a placeholder programmatically by chaining Holder calls:
The first argument in addImage is the src attribute, and the second is a CSS selector of the parent element.
Text
Holder automatically adds line breaks to text that goes outside of the image boundaries. If the text is so long it goes out of both horizontal and vertical boundaries, the text is moved to the top. If you prefer to control the line breaks, you can add \n to the text property:
html
html
html
html html js var img = $('#placeholder').get(0); Holder.setResizeUpdate(img, false); js Holder.setResizeUpdate(img, true); css #sample {background:url(?holder.js/200x200?theme=social) no-repeat} html html js plugins: [ new webpack.ProvidePlugin({ 'Holder': 'holderjs', 'holder': 'holderjs', 'window.Holder': 'holderjs' }) ] ``` ## Browser support * Chrome * Firefox 3+ * Safari 4+ * Internet Explorer 9+ (with partial support for 6-8) * Opera 12+ * Android (with fallback) ## Source * GitHub: