Rendering multiple textfield meta values w/custom markup applied

(Oleg Voronin) #1

Example: a metadata schema is set up to have a multiple textfield property that would be used to store image urls (external, for argument's sake)

 

If %asset_metadata_photos% were to be inserted in the bodycopy it would render just what the docos tell you: all values separated by semicolon. In the case of image urls, that's not quite what I'm after - let's say I wanted img tags rendered for each image url stored. Reading up on keyword modifiers, I've come up with the following:

...but that feels wrong on so many levels. Let's examine the code for a second:

The code should actually be a little bit longer, with a check to see if the metadata value is empty (so as not to render an image tag with an empty src).

 

Is there a nicer, saner way to accomplish the same thing?

(Bart Banda) #2

This probably won't work if you have multiple values in that metadata field, but if there will only ever be one, you could probably use a text field.

 

If the images are assets in Matrix, you could enter the asset id of each image asset into the metadata field, then print them all using an asset listing that takes that value as a dynamic value of root nodes. That's how we normally print a dynamic list of images to the front end.

 

You're other 2 options are to use JS or XSLT modifier, but those are last resorts and not recommended. 

(Oleg Voronin) #3

This probably won't work if you have multiple values in that metadata field, but if there will only ever be one, you could probably use a text field.

 

If the images are assets in Matrix, you could enter the asset id of each image asset into the metadata field, then print them all using an asset listing that takes that value as a dynamic value of root nodes. That's how we normally print a dynamic list of images to the front end.

 

You're other 2 options are to use JS or XSLT modifier, but those are last resorts and not recommended. 

 

#2 (asset listing) seems like the way to go even for non-matrix assets, although it seems like a custom paint layout may have to be applied. Thanks!

(Talk) #4 
<img class="venue-photo" src="%asset_metadata_photos^replace:;:/><img class="venue-photo" src=%"/>

Something like this should print all your images, but it might take some experimentation to get it working properly.

 

Edit: Just noticed this is almost identical to your code. Oops lol.

(Oleg Voronin) #5 
<img class="venue-photo" src="%asset_metadata_photos^replace:;:/><img class="venue-photo" src=%"/>

Something like this should print all your images, but it might take some experimentation to get it working properly.

 

 

It's working all right, but it seemed like a questionable practice to me - hence the question.

(Talk) #6

 

It's working all right, but it seemed like a questionable practice to me - hence the question.

 

I agree, however I've gotten away with very similar methods in the past. I've encountered some very strange methods in my roles...

(Nic Hubbard) #7

I would use Javascript. Cleanest approach in my opinion.

(Oleg Voronin) #8

I would use Javascript. Cleanest approach in my opinion.

 

I must admit to having quite a prejudice against moving markup logic to the client (with the exception of a few async scenarios) - while it may be clean semantically, it would result in something similar to flash of unstyled content. There will always be a split-second between the user seeing an empty space and it being filled up with images, even on subsequent visits.

 

It's always a bit of a holy-war subject, but I'd steer clear of it on applications without some kind of MVC/MVVM on the client

(Talk) #9

I would go with the keyword modifier solution if it works. I totally get what you're saying when you say it just feels wrong, but I've both used and seen the use of ^replace to fill in HTML, and while I've expected it to all go horribly wrong at some point, I still haven't encountered any issues, errors, or overloaded flux capacitors.

(Aleks Bochniak) #10

How about this?

 

  1. Create your target page A with a paint layout
  2. Create a page B with a webpath that returns %asset_metadata_photos% for the current asset (using a paint layout).
  3. In your paint layout for the page A, nest a Rest Resource JS that calls the above url for page B.
  4. Within your Rest Resource JS, write some JS that converts the comma separated list into an array and loop through that and print your image tags.
(Joel Porgand) #11

I would go with the keyword modifier solution if it works. I totally get what you're saying when you say it just feels wrong, but I've both used and seen the use of ^replace to fill in HTML, and while I've expected it to all go horribly wrong at some point, I still haven't encountered any issues, errors, or overloaded flux capacitors.

 

This risks breaking if you upgrade your matrix install to a newer version though. I had a few of my fancier keyword modifiers break when we upgraded our matrix install here recently. The functionality of ^replace is quite loosely defined in the doco so I think having it change in the future is a definite risk.