Hello,
I'm working on a Server Connect workflow for automated, responsive image optimization (with cropping/resize and compression) and I'm encountering a persistent problem with the largest image version.
The goal is a top banner slider with six different sizes (from 1920x744 to 320x320).
Hello Community,
I'm working on a Server Connect workflow for automated, responsive image optimization (with cropping/resize and compression) and I'm facing a persistent problem with the largest image version.
The goal is a top banner slider with six different sizes (from 1920x744 to 320x320). My Setup and Procedure
-
Central Database: I use a database table (
responsive_image_settings) with specific values forcrop_start_px,resize_width,resize_height, andmax_bytes(e.g., 250,000 bytes for version 1920). -
Workflow: The main workflow uses a repeat step on this database data.
-
Optimization Loop: Within the repeat, the image is:
-
Cropped (
crop_start_px744 px) to correct the aspect ratio. -
Resized to the target dimensions (e.g., 1920 x 744).
Then, a nested repeat loop (quality: 95 decreasing to 70) is used to save the image and check the file size.
- I don't yet have a stop logic; the loop simply runs continuously.
All smaller Image formats (1200 x 540, 970 x 450, etc.) work correctly and stop within the defined "max_bytes" limit.
The largest version (1920 x 744) ignores the "max_bytes" target value of 250,000 bytes and consistently returns the same uncompressed or only minimally compressed file (258,000 bytes) – even when I lower the target to 240,000 bytes.
It seems that the initial Image Save (at 90% quality) is not being overwritten by the "stat" check.
Question: Has anyone experienced this type of stat logic error in Wappler, which only occurs with the largest (often the first) image size? Do I need to handle the 1920px workflow differently (e.g., without the Crop step), or is the initial image instance locked?
{
"meta": {
"options": {
"linkedFile": "/views/web-admin/images.ejs",
"linkedForm": "formAdThumb"
},
"$_GET": [
{
"type": "text",
"name": "sort"
},
{
"type": "text",
"name": "dir"
}
],
"$_POST": [
{
"type": "text",
"fieldName": "imageAlt",
"name": "imageAlt"
},
{
"type": "text",
"fieldName": "imageDescription",
"name": "imageDescription"
},
{
"type": "text",
"name": "imageErstellt"
},
{
"type": "text",
"fieldName": "imageTitel",
"name": "imageTitel"
},
{
"type": "number",
"fieldName": "imagekat",
"options": {
"rules": {
"core:number": {}
}
},
"name": "imagekat"
},
{
"type": "text",
"name": "image"
}
]
},
"exec": {
"steps": [
{
"name": "uploadImage",
"module": "upload",
"action": "upload",
"options": {
"path": "/public/assets/banner/basisfiles",
"template": "{name}{ext}",
"overwrite": true
},
"output": true,
"meta": [
{
"name": "name",
"type": "text"
},
{
"name": "path",
"type": "text"
},
{
"name": "url",
"type": "text"
},
{
"name": "type",
"type": "text"
},
{
"name": "size",
"type": "text"
},
{
"name": "error",
"type": "number"
}
],
"outputType": "array"
},
{
"name": "queryGetImagedata",
"module": "dbconnector",
"action": "select",
"options": {
"connection": "db",
"sql": {
"type": "SELECT",
"columns": [
{
"table": "responsive_image_settings",
"column": "*"
}
],
"params": [],
"table": {
"name": "responsive_image_settings"
},
"primary": "id",
"joins": [],
"query": "select * from `responsive_image_settings`"
}
},
"output": true,
"meta": [
{
"type": "number",
"name": "id"
},
{
"type": "number",
"name": "breite_px"
},
{
"type": "number",
"name": "hoehe_px"
},
{
"type": "text",
"name": "folder_name"
},
{
"type": "number",
"name": "crop_start_px"
},
{
"type": "number",
"name": "max_bytes"
}
],
"outputType": "array"
},
{
"name": "repeatImagedata",
"module": "core",
"action": "repeat",
"options": {
"repeat": "{{queryGetImagedata}}",
"outputFields": [],
"exec": {
"steps": [
{
"name": "imageName",
"module": "core",
"action": "setvalue",
"options": {
"value": "{{uploadImage[0].name.replace('.jpg', '.webp').replace('.jpeg', '.webp').replace('.gif','.webp').replace('.png','.webp')}}"
},
"meta": [],
"outputType": "text",
"output": true
},
{
"name": "image",
"module": "image",
"action": "load",
"options": {
"path": "{{uploadImage[0].path}}"
},
"outputType": "object",
"meta": [
{
"name": "width",
"type": "number"
},
{
"name": "height",
"type": "number"
}
]
},
{
"name": "",
"module": "image",
"action": "crop",
"options": {
"instance": "image",
"x": "center",
"y": "middle",
"width": "{{crop_start_px}}",
"height": 744
}
},
{
"name": "",
"module": "image",
"action": "resize",
"options": {
"instance": "image",
"width": "{{breite_px}}",
"height": "{{hoehe_px}}"
}
},
{
"name": "quality",
"module": "core",
"action": "setvalue",
"options": {
"value": "95,94,93,92,91,90,89,88,87,86,85,84,83,82,81,80,79,78,77,76,75,74,73,72,71,70"
},
"meta": [],
"outputType": "text"
},
{
"name": "repeat_quality",
"module": "core",
"action": "repeat",
"options": {
"repeat": "{{quality.split(',')}}",
"outputFields": [],
"exec": {
"steps": [
{
"name": "stat",
"module": "fs",
"action": "stat",
"options": {
"path": "{{'/public/assets/banner/' + folder_name + '/' + imageName}}"
},
"output": true,
"outputType": "object",
"meta": [
{
"name": "type",
"type": "text"
},
{
"name": "name",
"type": "text"
},
{
"name": "path",
"type": "text"
},
{
"name": "url",
"type": "text"
},
{
"name": "size",
"type": "number"
},
{
"name": "folder",
"type": "text"
},
{
"name": "basename",
"type": "text"
},
{
"name": "extension",
"type": "text"
},
{
"name": "created",
"type": "date"
},
{
"name": "accessed",
"type": "date"
},
{
"name": "modified",
"type": "date"
}
]
},
{
"module": "core",
"action": "condition",
"options": {
"if": "{{stat.size > max_bytes}}",
"then": {
"steps": {
"name": "newImage",
"module": "image",
"action": "save",
"options": {
"instance": "image",
"format": "webp",
"quality": "{{$value}}",
"overwrite": true,
"path": "{{'/public/assets/banner/' + folder_name}}",
"template": "{{imageName}}"
}
}
}
},
"outputType": "boolean"
}
]
}
},
"meta": [
{
"name": "$index",
"type": "number"
},
{
"name": "$number",
"type": "number"
},
{
"name": "$name",
"type": "text"
},
{
"name": "$value",
"type": "object"
},
{
"name": "safe_in",
"type": "text",
"sub": []
},
{
"name": "stat",
"type": "object",
"sub": [
{
"name": "type",
"type": "text"
},
{
"name": "name",
"type": "text"
},
{
"name": "path",
"type": "text"
},
{
"name": "url",
"type": "text"
},
{
"name": "size",
"type": "number"
},
{
"name": "folder",
"type": "text"
},
{
"name": "basename",
"type": "text"
},
{
"name": "extension",
"type": "text"
},
{
"name": "created",
"type": "date"
},
{
"name": "accessed",
"type": "date"
},
{
"name": "modified",
"type": "date"
}
]
}
],
"outputType": "array",
"output": true
}
]
}
},
"output": true,
"meta": [
{
"name": "$index",
"type": "number"
},
{
"name": "$number",
"type": "number"
},
{
"name": "$name",
"type": "text"
},
{
"name": "$value",
"type": "object"
},
{
"name": "id",
"type": "number"
},
{
"name": "breite_px",
"type": "number"
},
{
"name": "hoehe_px",
"type": "number"
},
{
"name": "folder_name",
"type": "text"
},
{
"name": "crop_start_px",
"type": "number"
},
{
"name": "max_bytes",
"type": "number"
},
{
"name": "imageName",
"type": "text",
"sub": []
},
{
"name": "repeat_quality",
"type": "array",
"sub": [
{
"name": "safe_in",
"type": "text",
"sub": []
},
{
"name": "stat",
"type": "object",
"sub": [
{
"name": "type",
"type": "text"
},
{
"name": "name",
"type": "text"
},
{
"name": "path",
"type": "text"
},
{
"name": "url",
"type": "text"
},
{
"name": "size",
"type": "number"
},
{
"name": "folder",
"type": "text"
},
{
"name": "basename",
"type": "text"
},
{
"name": "extension",
"type": "text"
},
{
"name": "created",
"type": "date"
},
{
"name": "accessed",
"type": "date"
},
{
"name": "modified",
"type": "date"
}
]
}
]
}
],
"outputType": "array"
},
{
"name": "insertImage",
"module": "dbupdater",
"action": "insert",
"options": {
"connection": "db",
"sql": {
"type": "insert",
"values": [
{
"table": "image",
"column": "image",
"type": "text",
"value": "{{uploadImage[0].name.replace('.jpg', '.webp').replace('.gif', '.webp').replace('.jpeg', '.webp')}}"
},
{
"table": "image",
"column": "imagekat",
"type": "number",
"value": "{{$_POST.imagekat}}"
},
{
"table": "image",
"column": "imageTitel",
"type": "text",
"value": "{{$_POST.imageTitel}}"
},
{
"table": "image",
"column": "imageAlt",
"type": "text",
"value": "{{$_POST.imageAlt}}"
},
{
"table": "image",
"column": "imageDescription",
"type": "text",
"value": "{{$_POST.imageDescription}}"
},
{
"table": "image",
"column": "imageErstellt",
"type": "text",
"value": "{{NOW}}"
}
],
"table": "image",
"returning": "imageID",
"query": "insert into `image` (`image`, `imageAlt`, `imageDescription`, `imageErstellt`, `imageTitel`, `imagekat`) values (?, ?, ?, ?, ?, ?)",
"params": [
{
"name": ":P1",
"type": "expression",
"value": "{{uploadImage[0].name.replace('.jpg', '.webp').replace('.gif', '.webp').replace('.jpeg', '.webp')}}",
"test": ""
},
{
"name": ":P2",
"type": "expression",
"value": "{{$_POST.imagekat}}",
"test": ""
},
{
"name": ":P3",
"type": "expression",
"value": "{{$_POST.imageTitel}}",
"test": ""
},
{
"name": ":P4",
"type": "expression",
"value": "{{$_POST.imageAlt}}",
"test": ""
},
{
"name": ":P5",
"type": "expression",
"value": "{{$_POST.imageDescription}}",
"test": ""
},
{
"name": ":P6",
"type": "expression",
"value": "{{NOW}}",
"test": ""
}
]
}
},
"meta": [
{
"name": "identity",
"type": "text"
},
{
"name": "affected",
"type": "number"
}
]
}
]
},
"usedModules": {
"sharp": "^0.29.3"
}
}
