Ditto placeholders outside call

72 Posts

dinpapa Reply #1, 13 years, 9 months ago

Hello! I would like to know if it is possible to have ditto placeholders outside the ditto template.
For example, in my main template i would have:
<div>
<a href="[+url+]">
<span>[+title+]</span>
[!Ditto call here!]
</a>
</div>

When pagination is on, you can use the pagination placeholders outside the ditto template.
So why can't i do the same with those two placeholders? (i mean [+url+], and [+title+])

My ditto version is 2.1.0. I am building my site on localhost(xampp) with evo v.1.0.7.

I know that in my ditto template i could achieve that much easier, but the site i am working on right now needs to have that strange template, so i thought i should ask in case anyone knew of a way to do it.

24,544 Posts

BobRay Reply #2, 13 years, 9 months ago

I could be wrong, but I think Ditto uses str_replace() rather than setting placeholders. If so it's not going to work, and if it did, the Ditto call would have to be placed above the placeholders.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 13 years, 9 months ago

That structure doesn't make a lot of sense. Ditto generates lists, and its placeholders refer to the item Ditto is processing at the moment, so it will be different for each resource Ditto is processing. So which resource's ID (for the URL) and pagetitle do you want?

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

72 Posts

dinpapa Reply #4, 13 years, 9 months ago

Thank you all for your quick replies. I tried to simplify my answer, but i think i may have managed to confuse you more. Let me explain further:

I am building this site using modx:

http://www.alexpi.pagodabox.com/

This is a responsive site, and the problem i have is with its large image on the main page.(actually,that gray boxes you see will become images in the end.)

I have managed almost everything so far on my local machine, but since i am not the one who designed it, the designer has uploaded on the real server the html and css so far. I sent you that url just for you to get a better view of the situation.

This is the code the page outputs on my local machine:

<ul class="gallery">
		        	<div class="group1">                                    
		        		<li class="large">
		        			  <a href="">
		        		  <span></span>
                                       <div data-picture data-alt="">

<div data-src="assets/snippets/advthumbs/advthumb.php?svyranzr=Fnygb-Tenaqr.wct&arjkfvmr=450&arjlfvmr=300&zrgubq=erfvmrpebc&jngreznex=&svyrbhg="></div>

<div data-src="assets/snippets/advthumbs/advthumb.php?svyranzr=Fnygb-Tenaqr.wct&arjkfvmr=900&arjlfvmr=600&zrgubq=erfvmrpebc&jngreznex=&svyrbhg=" data-media="(min-width: 30em)"></div>

<div data-src="assets/snippets/advthumbs/advthumb.php?svyranzr=Fnygb-Tenaqr.wct&arjkfvmr=700&arjlfvmr=470&zrgubq=erfvmrpebc&jngreznex=&svyrbhg=" data-media="(min-width: 55.44em)"></div>		        
									
							    </div>
		        			</a>
		        		</li>
                                          . 
                                          .
                                          .

Inside the <a href=""> i have placed the ditto placeholder [+url+] and inside the <span></span>
i have placed the placeholder [+title+].

These are my three ditto calls:

[+phx:if=`<div data-src=""></div>`:ne=``:then=`[!Ditto?&parents=`4` &tpl=`index_large_small`&total=`1` &filter=`description,large,9` &orderBy=`menuindex ASC`!]`+]

[+phx:if=`<div data-src="" data-media="(min-width: 30em)"></div>`:ne=``:then=`[!Ditto?&parents=`4` &tpl=`index_large_large`&total=`1` &filter=`description,large,9` &orderBy=`menuindex ASC`!]`+]

[!Ditto? &parents=`4` &tpl=`index_large_medium`&total=`1` &filter=`description,large,9` &orderBy=`menuindex ASC`!]

And the chunk index_large_medium:

<div data-src="[[advthumbs? &filename=`[+top_image+]` &newxsize=`700` &newysize=`470` &method=`resizecrop`]]" data-media="(min-width: 55.44em)"></div>

The other two chunks are pretty much the same.

With the <a href="[+url+]"> and <span>[+title+]</span> i want to achieve that hover effect(of course that happens with css, but i want ditto to output the project's/image's title and if you click on the image it will take you to the actual project).

The way i see it there can only be two solutions:
1)my designer has to figure out a way to achieve the same effect by changing the css and html and making so the template would be like this:

<ul class="gallery">
		        	<div class="group1">                                    
		        		<li class="large">
		        			  
                                       <div data-picture data-alt="">

<a href="(project's url here)"><span>(project's title here)</span><div data-src="assets/snippets/advthumbs/advthumb.php?svyranzr=Fnygb-Tenaqr.wct&arjkfvmr=450&arjlfvmr=300&zrgubq=erfvmrpebc&jngreznex=&svyrbhg="></div></a>

<a href="(project's url here)"><span>(project's title here)</span><div data-src="assets/snippets/advthumbs/advthumb.php?svyranzr=Fnygb-Tenaqr.wct&arjkfvmr=900&arjlfvmr=600&zrgubq=erfvmrpebc&jngreznex=&svyrbhg=" data-media="(min-width: 30em)"></div></a>

<a href="(project's url here)"><span>(project's title here)</span><div data-src="assets/snippets/advthumbs/advthumb.php?svyranzr=Fnygb-Tenaqr.wct&arjkfvmr=700&arjlfvmr=470&zrgubq=erfvmrpebc&jngreznex=&svyrbhg=" data-media="(min-width: 55.44em)"></div></a>		        
									
							    </div>
		        		</li>

                                          . 
                                          .
                                          .

or
2)there is some way to place the [+url+] and [+title+] placeholders before the ditto calls and outside their templates.

I have tried other solutions, like using the &hiddenFields parameter or the DittoFormat snippet, but to no avail.

I am sorry for the long post. I don't mind deleting it if it can't be solved. Also, this is my first site and it is giving me a real headache -_-

24,544 Posts

BobRay Reply #5, 13 years, 9 months ago

`<div data-src=""></div>` is never going to = "", so the first two PHX tests don't seem to have any point, unless I'm misunderstanding you.

I still don't completely understand what you're trying to do, but I wonder if you couldn't use Template Variables on each page with the appropriate image and use a TV tag like [*TvName*] to display them. TV tags can go anywhere on the page, unlike Ditto placeholders.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

72 Posts

dinpapa Reply #6, 13 years, 9 months ago

Each image is actually a project. If you hover on it it shows you the project's title. If you click on it, it will take you to the corresponding project. In my site tree there is a resource which is called "projects" and houses all projects. That's from where ditto draws its data. Each project has a tv called [*top_image*] from where my client will just upload the image he chooses. The rest will be handled by ditto.

There is a script that transforms those <div data-src=""></div> elements to <img> elements.
Also,the script checks screen size and displays only the image/project that fits best to your screen.
I used that strange phx calls to make it so Ditto wouldn't call three project-images from the database. Now, i think it is going to bring only one project-image from the database according to your screen size.
But yeah, i am not sure either if those phx calls are really doing that.

I suppose i could use a tv just for the Large image on the main page. But then wouldn't i need to come up with a @SELECT binding or something so the tv would get ditto's output for the title and url?

EDIT: Bob, you were right, the first two phx calls weren't necessary, since the script chooses what image to display according to the user's screen size, so i removed them. [ed. note: dinpapa last edited this post 13 years, 9 months ago.]

24,544 Posts

BobRay Reply #7, 13 years, 9 months ago

I'm still not quite following you. Ditto is for showing bits of multiple resources on the same page and it sounds like Ditto is processing all the children of the Projects page. Don't you want to show the image from each child? If you do, why not put a TV tag in the Ditto Tpl chunk?

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

72 Posts

dinpapa Reply #8, 13 years, 9 months ago

I managed a workaround by making more ditto calls (it was the same call as with my previous ditto,but i used another tpl) and i changed my tpl to output the placeholder i was trying to get. Not the most elegant solution i must admit, but still it worked for me and besides it doesn't slow the site down at all.
Thank you all for the help