Relaunch: Module JkImagePlaceholder - a module to create placeholder images

[Juergen]

Hello @ all

I want to introduce a module to you which can create placeholder images on the fly.

This module was developed a few years ago, but I have completely rewritten the code to PHP 8.1 and added some nice additional features.

You can find the complete description and download possibility at https://github.com/juergenweb/JkImagePlaceholder, but I want to give you a brief description about the module.

Since 28/01/23 this module is also available in the download section of ProcessWire at https://processwire.com/modules/jk-image-placeholder/ and can be downloaded within your ProcessWire site.

Short description:

This module uses TrueType fonts for the placeholder text.

• 2 TTFs are shipped with this module by default (FjallaOne-Regular.ttf and Lobster-Regular.ttf).
• Allows upload and deletion of other fonts
• Allows scanning the complete site to find and use other TrueTypeFonts (fe used by templates or other modules)
• Preview of all fonts in the select font input field - you can see how the font looks like
• Global setting of various colors: background color, text color,..
• Supports adding of text shadow to the placeholder text
• Set global placeholder text (multi-language)
• Set global image tag CSS class for the placeholder image tag
• If you have installed FieldtypeColor or FieldtypeColorPicker you can select if you want to use one of these fields for color inputs instead of a text input.

Preview example:

The easiest way to create the placeholder image inside your template file:

echo $modules->get('JkImagePlaceholder')->render(true);

This will render the placeholder image according to your global settings in the module configuration, but you can change every parameter to your needs:

echo $modules->get('JkImagePlaceholder')
->setText('Test!')
->setAltText('My custom alt text for the image')
->setFontSize(30)
->setWidth(400)
->setHeight(200)
->setBackgroundColor('#ddd')
->setFontFamily('lobster-regular.ttf')
->setTextColor('#ffffff')
->setShadowColor('#000')
->setXOffset(-5)
->setYOffset(1)
->render(true);

Everything is explained in the Readme file on GitHub and in the download section.

If you discover issues, please report it directly on GitHub? - Thanx for your help!

Edited January 28, 2023 by Juergen
Add info that module is available in download section of PW too

[bernhard]

Hey @Juergen thx for sharing ? 

It looks like you have put a lot of work into that module so I'm a little afraid of asking ? And I hope you don't take me wrong:

1) How are you using your module? Who is it built for? Is it for building quick mockups that you show your clients? Or is it intended to show placeholders to real website users if clients don't upload images?

2) I wonder if an SVG based solution would be better (easier, more efficient)? You could easily create an SVG placeholder and write some custom text into it: https://www.mediaevent.de/tutorial/svg-text-alignment.html Not sure how that would work with different fonts, but I guess that works with webfonts?!

[Juergen]

Hello @bernhard

First of all, thank you for your feedback. ?

To be honest, I did not even think about using a svg for a placeholder - but this is also a really cool idea too. BTW thanks for the link - I will take a closer look at this.

Referring to your questions:

My intention was to use it for real website users (as placeholder images for products, user images and so on). I did not want to use to much different font families on a site. For this reason I thought that it was cool to be able to use the same font for the text in the placeholder image as used for the text of the site. This is possible with this module.

Another aspect was that a "real image" could be used without problems with CSS frameworks componentes, whenever an image is needed. I am thinking of the comment component of the UiKit framework. In the markup you will need an image tag for the user image.

Of course you can replace the image tag by a div container with text inside or another tag (picture, image tag for svg,..), but you have to adapt the CSS of the framework to get the desired result. Using an usual image tag, as provided with this module, requires no changes.

Have a nice weekend!?

Jürgen

 

[eydun]

Thank you for building this module.

What is the minimum required php version?

[eydun]

Found it! - it is php 8.1.

[Juergen]

Thank you for the hint @eydun

I have added the requirements to the docs.

[Juergen]

Important information on updating to 1.5.2

I have changed the storage folder for custom uploaded fonts, so it will be outside of the module folder.

The reason is, that your custom fonts will be deleted during an update if they are stored inside the module folder. This should not be happen and was not the plan.

The new version fixes this problem and your uploaded fonts will now be stored inside a newly created folder (site/assets/files/JkImagePlaceholder). This folder will be created automatically during the update to 1.5.2 or on a fresh install.

Please note:

During this update all previously uploaded custom files will be deleted. So before you update to the next version, save your custom font files somewhere on your system and upload them once more after you have finished the update. This is only necessary during the update to 1.5.2. All other upcoming updates will not be affected.

To prevent problems, the best way would be to delete the module completely and make a new re-install.

Sorry for this inconvenience!