All Projects → Rydgel → Fake Images Please

Rydgel / Fake Images Please

Licence: isc
Fakeimg.pl is a little tool that generates images with an URL. Choose the size, the colors, even the text. Oh… and it’s free.

Programming Languages

python
139335 projects - #7 most used programming language

Projects that are alternatives of or similar to Fake Images Please

koleton
The easiest library to show skeleton screens in an Android app.
Stars: ✭ 84 (-87.7%)
Mutual labels:  placeholder
Skeleton
Skeleton Android
Stars: ✭ 293 (-57.1%)
Mutual labels:  placeholder
Fasttemplate
Simple and fast template engine for Go
Stars: ✭ 470 (-31.19%)
Mutual labels:  placeholder
Underscores.jl
Underscore placeholders for convenient closure syntax
Stars: ✭ 65 (-90.48%)
Mutual labels:  placeholder
React Spectrum
Generate colorful text placeholders 🎨
Stars: ✭ 289 (-57.69%)
Mutual labels:  placeholder
Skeleton
A library provides an easy way to show skeleton loading view like Facebook and Alipay
Stars: ✭ 3,368 (+393.12%)
Mutual labels:  placeholder
react-input-hints
Get more out of your placeholders. Animates input placeholders to make it look like they are being typed in realtime - https://npmjs.com/react-input-hints
Stars: ✭ 56 (-91.8%)
Mutual labels:  placeholder
React Native Shimmer Placeholder
Placeholder/ Skeleton of React Native
Stars: ✭ 679 (-0.59%)
Mutual labels:  placeholder
Sqip
"SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.
Stars: ✭ 3,074 (+350.07%)
Mutual labels:  placeholder
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (-37.04%)
Mutual labels:  placeholder
Django Front
Django-front is a front-end editing Django application
Stars: ✭ 257 (-62.37%)
Mutual labels:  placeholder
Skeletonui
☠️ Elegant skeleton loading animation in SwiftUI and Combine
Stars: ✭ 275 (-59.74%)
Mutual labels:  placeholder
React Hold
🌵Automatically show a well-fitting placeholder for dumb component while its content is loading
Stars: ✭ 351 (-48.61%)
Mutual labels:  placeholder
quill-placeholder-module
A quill module for adding placeholders
Stars: ✭ 27 (-96.05%)
Mutual labels:  placeholder
Plaiceholder
Beautiful image placeholders, without the hassle 🖼
Stars: ✭ 474 (-30.6%)
Mutual labels:  placeholder
react-hold-animation
A higher-order component be use for add animation effects to the placeholder witch in react-hold.
Stars: ✭ 14 (-97.95%)
Mutual labels:  placeholder
Wlemptystate
WLEmptyState is an iOS based component that lets you customize the view when the dataset of a UITableView or a UICollectionView is empty. We created a sample project with the WLEmptyState component to show how you can use it.
Stars: ✭ 305 (-55.34%)
Mutual labels:  placeholder
Growingtextview
An UITextView in Swift. Support auto growing, placeholder and length limit.
Stars: ✭ 683 (+0%)
Mutual labels:  placeholder
Listplaceholder
ListPlaceholder is a swift library allows you to easily add facebook style animated loading placeholder to your tableviews or collection views.
Stars: ✭ 511 (-25.18%)
Mutual labels:  placeholder
React Cool Img
😎 🏞 A React <Img /> component let you handle image UX and performance as a Pro!
Stars: ✭ 356 (-47.88%)
Mutual labels:  placeholder

Fake Images Please?

Build Status

Donate

When designing websites, you may not have the images you need at first. But you already know the sizes and inserting some placeholders can help you better seeing the layout. Don’t waste your time making dummy images for your mockup or wireframe. Fakeimg.pl is a little tool that generates images with an URL. Choose the size, the colors, even the text. It’s free and open-source.

How to use

You just have to put your image size after our URL. Only the first parameter is mandatory. There are options too, you can pass a text, or change some colors. Colors must be hexadecimal, the first one is the background color. The text can be passed with the text GET variable. Here are some examples you can look at:

<img src="https://fakeimg.pl/300/">
<img src="https://fakeimg.pl/250x100/">
<img src="https://fakeimg.pl/250x100/ff0000/">
<img src="https://fakeimg.pl/350x200/ff0000/000">
<img src="https://fakeimg.pl/350x200/?text=Hello">
<img src="https://fakeimg.pl/350x200/?text=オラ&font=noto">
<img src="https://fakeimg.pl/350x200/?text=World&font=lobster">

Use them directly in an image tag or a CSS background, or whatever you want to.

Change font

There are three bonus fonts you can choose by passing font=lobster, font=bebas, or font=museo in the URL. Also please note that the font=noto is available for chinese/japanese/korean texts.

Change font size

You can manually change the font size by passing in the URL font_size=12.

Retina mode

Just pass the retina=1 in the URL. Your image will be 2 times bigger.

Asian text support

You can use the font noto for support of japanese, korean and chinese text.

Transparency

Colors support transparency (0 - 255) by putting the alpha value after the color itself. Both colors are supported.

<img src="https://fakeimg.pl/350x200/ff0000,128/000">
<img src="https://fakeimg.pl/350x200/ff0000,128/000,10">

Set up your own instance

Prerequisites:

  • Docker
# Run the image (change the port if you need)
$ docker run -d -p 80:80 rydgel/fakeimg:latest
# Open the browser at http://127.0.0.1:80

About

Made by Jérôme Mahuet in 2018. Follow @rydgel to stay up-to-date with the project, or if you just want to ask something. Feel free to make pull requests.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].