If you need or want to change an image on a page this will work for you.
This snippet when placed in the body of your template, for example in your container div, will change an image mapped to the page id. So when the page is changed so does the image, perhaps in the header. Take your images and name them to map to the page you want it to appear on ie; 34.jpg 25.jpg and so on. This makes it easy to update images without touching the template code.
Thanks to David jeffries
http://www.davidjeffries.com for putting me on the right track with the correct PHP coding.
Snippet; [[changeImage]]
<?php
$curPageNum = $modx->documentIdentifier;
$output='div#some_div { background: url([(base_url)]assets/templates/your_tpl_folder/images/' . $curPageNum . '.jpg) no-repeat bottom;}';
return '<style type="text/css">'."\n".$output."\n</style>";
?>
Change the html background tag as appropriate for your needs.
This code could be used to change something other than images.
Cheers,
Hal
"Today’s headlines are nothing more than whispers of history"
-
☆ A M B ☆
- 24,524 Posts
Why not just use a <style> block with [*id*] in place of the image name?
<style type=text/css>
div#some_div { background: url([(base_url)]assets/templates/your_tpl_folder/images/[*id*].jpg) no-repeat bottom;}
</style>
Sigh! Why? - why? Because I didn’t think of trying that. :’(
"Today’s headlines are nothing more than whispers of history"
-
☆ A M B ☆
- 24,524 Posts
Don’t feel bad. I’d say about once a month I agonize over some complex Tree structure or convoluted bit of code only to realize that a simple TV for tagging with Ditto would have solved the structure issue, and MODx provides a simple API function to do what I wanted...
Wow. Hah - I was actually just bout to ask bout something like this too...
Question: I’m redoing a site for someone who wants three pictures changed in a top banner area with every page...I realize I could do three instances of this snippet, but there a simpler way?
-
☆ A M B ☆
- 24,524 Posts
Make three TVs with an image input type. Depending on what you’re doing with the images, use the image output widget as well. Without the widget, the TV will just return the relative path to the image. The widget will format the url into proper image tags.
Then for each page the editor can just select the three images he wants for that page. He’ll even be able to upload images from the TV.
If you want it even simpler than that, name your images according to the id of the page, for example first45.jpg, second45.jpg and third45.jpg.
Then just put the image urls like src="assets/images/first[*id*].jpg" and src="assets/images/second[*id*].jpg", etc. Then the whole thing would be totally automatic, all you need to do is upload the images.
