MIGX.Fancybox-images with seperate placeholders in Richtext-Content
Last updated Dec 9th, 2019 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$306 per month—let's make that $500!
Learn moreHowto add Fancybox-images with seperate placeholders into Richtext-Content¶
Requirements¶
First off, you'll want to go ahead and download and install some Extras that we'll be using for this Setup. The following is a list of used Extras:
- MIGX - For creating and fill the boxes in MODX-backend and for listing them on the frontend.
- TinyMCE - Richtext-Editor to edit the content-texts.
- phpThumbOf - For resizing the images to fit in our columns.
You'll also download fancybox and upload the subfolder '/fancybox/' of this package to your modx-installation to /assets/fancybox/
The Template¶
For this Tutorial we want to create a new Template. We name it 'fancybox'
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="[[++base_url]]assets/js/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.fancyimg").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
<link rel="stylesheet" href="[[++base_url]]assets/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
<body>
<div>
[[getImageList? &tpl=`fancybox`&tvname=`fancyboxTv`&toSeparatePlaceholders=`img`]]
<div id="content">[[*content]]</div>
<div id="footer">[^q^] queries, querytime [^qt^], phptime [^p^], totaltime [^t^], source [^s^]</div>
</div>
</body>
</html>
The Input-Tvs¶
We need some Input-Tvs, which we want to use in our Backend-Forms later.
name | input-type | default-value | purpose |
---|---|---|---|
imageTV | image | to choose our images by filemanager | |
placeholderTV | hidden | img | this is the placeholder-prefix, needed for rendering the correct placeholder in the grid |
Give these TVs no Template Access. We need them only as input-types for our Forms.
The MIGX-Tv¶
Now we are ready to create our MIGX-TV. Create a new TV.
General Information¶
Name¶
fancyboxTv
Input Options¶
Input-type¶
migx
Form Tabs¶
[{
"caption": "Image",
"fields": [{
"field": "placeholder",
"caption": "Placeholder",
"inputTV": "placeholderTV"
},
{
"field": "title",
"caption": "Title",
"description": "Title for the image."
},
{
"field": "image",
"caption": "Image",
"inputTV": "imageTV"
}
]
}]
Grid Columns¶
[{
"header": "Placeholder",
"width": "10",
"sortable": "true",
"dataIndex": "placeholder",
"renderer": "this.renderPlaceholder"
},
{
"header": "Title",
"width": "160",
"sortable": "true",
"dataIndex": "title"
},
{
"header": "Image",
"width": "50",
"sortable": "false",
"dataIndex": "image",
"renderer": "this.renderImage"
}
]
Template Access¶
our fancybox - Template
The Chunk¶
Our last step is to create the chunk for our fancybox-images.
Name¶
fancybox
Chunk Code¶
<a href="[[+image]]" class="fancyimg">
<img src="[[+image:phpthumbof=`w=100&h=75&zc=1`]]" alt=""/>
</a>
Add Fancybox-images with seperate placeholders into Richtext-Content¶
Now we are ready to create a resource and upload/choose images and add them to our Richtext-Content-Field.
Create new Resource. Choose the fancybox - Template. Go to the tab 'Template Variables'.
In your fancyboxTV, click 'Add Item'. Fill the fields for Image and Title.
Add as many images as you want to add to your Content.
Now write your content to your Richtext-Field and add placeholders like [[+img.0]]
, [[+img.1]]
, [[+img.2]]
to your Text.
When you view the result on your frontpage you will see small image-thumbnails in your text, where you did add these placeholders.
Click them and you will see nice fancyboxes with big images.
Don't forget to save your Resource, when you are ready with adding/editing images with MIGX