Using pThumb in image Elements with Lightbox markup is almost exactly like creating a chunk template for a listing snippet. An Option Set for the Fred image Element establishes what fields you'll have for the Element's settings.
Can you use pThumb in an image Element?
The Solution:
With the assistance of mandollarian (Sopyan Maulana)
You'll need three things to create an image Element. First, you need a Media Source for the image files. Then you need an Element with its markup. And third, you need an Option Set to control the image's Settings. In this example, the Element Markup is customized for a Lightbox effect, with a smaller image in the content and a Lightbox overlay of the full-sized image when the content's image is clicked.
<div data-fred-render="{{ published }}">
<a class="portfolio-box" href="{{ image }}" title="{{ title }}" data-lightbox="{{ title }}" data-title="{{ title }}">
<img class="img-fluid" src="[[pThumb? &input=`{{ image }}` &options=`w=600&hight=350&q=45&far=1`]]" alt="{{ alt }}">
</a>
</div>
The Option Set configures the fields that you want for your Element to have in its Element Settings panel. You can see the settings that match the Twig placeholders in the markup.
Make sure that the value of the "name" field follows Javascript rules; to separate multiple words only use underscores or camelCase or CamelCase. Twig doesn't like hyphens or spaces or other special characters.
{
"remote": true,
"settings": [
{
"name": "published",
"label": "Published",
"type": "toggle",
"value": true
},
{
"name": "title",
"label": "Title",
"type": "text",
"value": "Name of quilt"
},
{
"name": "alt",
"label": "Alt",
"type": "text",
"value": "Picture of quilt"
},
{
"name": "image",
"label": "Image",
"type": "image",
"value": "/assets/images/themes/default-img.jpg"
},
{
"name": "category",
"label": "Category",
"type": "select",
"options": {
"Image": "Select Category",
"Quilts": "Quilts",
"MODX": "MODX",
"Desert": "Desert Life"
},
"value": "Image"
}
]
}