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!

[Juergen]

Latest module update comes with a lot of new features! This was created with the help of AI and a lot of tests have been added to make the module stable, but as always: keep an eye if something went wrong.

JkImagePlaceholder 1.11.3

This is a big update: placeholder images can now show icons or your own logo, the module configuration got an icon picker and a new color picker, and many bugs have been fixed.

Icons in the placeholder image

• You can add an icon above, below, left or right of the text, and set its size, color and the space to the text.
• It works out of the box with FontAwesome 4.7, which ships with ProcessWire. Other icon fonts are detected automatically, for example FontAwesome 6, Bootstrap Icons, Material Icons, Remix Icon and Tabler Icons.
• Icons can be selected by name (fe camera, user). The names are read from the CSS file or the .codepoints file of the icon font.
• Icon fonts no longer show up in the list of text fonts.

Icon picker

• All icons of the selected font are shown in a grid with a search field. Click an icon to select it, and the preview updates immediately.

Images as icons

• Instead of a font icon you can use an image, fe your logo, in PNG, WebP or GIF format.
• Images can be uploaded, selected and deleted directly in the module configuration.
• Optionally, single-colored images can be colorized with the icon color.
• A new "Icon type" setting (No icon / Icon font / Image) shows only the settings you need.

New color picker

• The color fields use the color picker of the browser, with an editable hex code. No extra module is needed.
• If FieldtypeColorPicker or FieldtypeColor is installed, its field is used instead.

New API methods

setIcon(), setIconFont(), setIconSize(), setIconColor(), setIconPosition(), setIconSpacing(), setIconType(), setIconImage(), setIconImageTint(), getIconNames(), getIconList() and more (see README).

 

php

echo $modules->get('JkImagePlaceholder')
    ->setText('No image available')
    ->setIcon('camera')
    ->setIconPosition('top')
    ->render();

Important bug fixes

• Values set with the setter methods now apply only to the next image. Before, they were carried over to all following placeholders.
• Fonts are found when ProcessWire is installed in a subdirectory.
• setText() works for non-default languages.
• Fixed TypeErrors with a transparent background, no shadow, and after clicking "Update font files".
• Shorthand hex colors are converted correctly (#f00 → #ff0000).
• The "Update font files" button no longer stores raw POST data such as the CSRF token in the module configuration.
• The module configuration opens again if a color picker module was uninstalled.

Quality

• 197 unit tests (PHPUnit), run automatically for PHP 8.1 to 8.4.

Requirements and update

• Requires PHP 8.1 or higher and the GD library with FreeType.
• Existing configurations are converted automatically during the upgrade. Placeholder images without an icon look exactly the same as before.