Images Lines Drawing - Documentation

The plugin runs on the site frontend and applies the selected image effect to images unless a filter excludes them.

Suggested setup: choose a global effect and shape, restrict where it runs if needed, then add ID or class rules for areas that need a different effect or shape.

Global effect and shape

These are the default settings for images that do not match an override rule.

• Artistic image effect
  • Original (0): keep the source image unchanged. The selected shape can still mask or clip it.
  • Drawing (1): apply the pencil drawing effect.
  • Watercolor (2): apply the watercolor effect.
• Image shape: choose rectangle, circle, ellipse, diamond, hexagon, splash, shape1 through shape6, or random. Random chooses among the available Shape 1-6 masks.

Drawing and animation options

• Drawing mode: sets the drawing appearance: Sepia or White. Shown for the Drawing effect.
• Effect level: controls the strength of the drawing or watercolor treatment. Choose Soft, Light, Normal, Strong, or Very strong.
• Mouse over images: for Drawing and Watercolor, choose whether hovering over a team item shows its original image or keeps showing the effect.
• Animate image contours: draws image contours using animated SVG strokes. Contour color is sampled from the photo for Watercolor, and can be set with Drawing color for the Drawing effect.
• Reveal image background: gradually reveals the image from its center as the contours are drawn. This can be used with or without contour animation.
• Drawing color: sets the contour stroke color when contour animation is enabled for the Drawing effect.
• Animation duration: duration used by the contour and/or background reveal animation. Available from 1 to 10 seconds in 0.5-second steps.
• Stroke width: width of animated contour strokes, from 0.5 to 3 pixels.

Effect, shape, and image-area overrides only replace the effect and shape. Drawing mode, level, hover behavior, contour animation, background reveal, duration, stroke width, and drawing color remain global settings.

Menu items and image filters

Enable on menu items

Select the Joomla menu items where the plugin should run. Leave the selection empty to run on all menu items. This setting controls whether the plugin is loaded on the page.

Image area filter mode

Image area IDs and classes identify an element and all images nested inside it. The filter mode changes whether matching areas are included or excluded:

• Exclude matching areas: process images except those inside a matching ID or class. This is the default.
• Include matching areas only: process images only when they are inside a matching ID or class. If both filter lists are empty, no images match.

Image area IDs and classes

Enter one or more IDs or class names, separated by commas, semicolons, or spaces. Do not include the CSS prefix (the plugin also accepts an optional # or .). These are filters, not effect rules; configure per-area effects in the override fields below.

IDs:     hero, article-images
Classes: gallery, product-photo

Per-ID and per-class settings

Use these fields to give different areas their own effect and shape. Add exactly one rule per line in this format:

target|effect|shape

• target: an element ID or class name. Enter the bare name; a leading # or . is optional.
• effect: 0 = Original, 1 = Drawing, 2 = Watercolor.
• shape: rectangle, circle, ellipse, diamond, hexagon, splash, shape1 through shape6, or random.

Examples

Drawing settings by ID:

team-portraits|1|circle
homepage-gallery|2|shape3
brand-logo|0|rectangle

Drawing settings by class:

staff-photo|1|hexagon
watercolor-gallery|2|random

The first example applies the Drawing effect and a circle shape to images inside the element with ID team-portraits. The second applies Watercolor and Shape 3 to images inside homepage-gallery. An effect of 0 leaves the image original but still applies its chosen shape.

Which rule wins?

1. The closest matching ID on the image or one of its ancestors wins over every class rule.
2. If no ID rule matches, the closest matching class rule wins.
3. If no override matches, the global effect and shape are used.

Use one rule for each ID or class. Separate the three values with the vertical bar (|), not a comma. The whole rule must be on one line. Invalid lines are ignored and reported in the browser console.

Overrides select areas regardless of the include/exclude filter. A filter may still exclude an area from processing. To use an override in Include mode, its area must also match one of the Image area IDs or Image area classes.

Cache, jQuery, and custom CSS

• Drawing effects cache: removes generated drawing and watercolor files from the plugin's drawing effects cache. Use this after changes if you need generated images to be recreated.
• Load jQuery: loads the jQuery copy bundled with the plugin when set to Yes. Leave it disabled if the site already supplies the required library or you do not need it.
• Custom CSS: adds CSS declarations to the frontend page. Use this for styling adjustments; malformed CSS can affect the page's appearance.

Troubleshooting

• An image is not processed: check the menu item selection and the filter mode/ID/class lists. In Include mode, at least one configured filter must match an ancestor of the image.
• An override does not apply: confirm the element ID or class is present on the image or an ancestor, use a single target|effect|shape line, and verify the shape spelling and effect number.
• Image appearance did not update: clear the drawing effects cache, then reload the page. A browser cache refresh may also be necessary.
• Animations are not visible: confirm the relevant animation option is enabled and check whether the browser or device requests reduced motion.