We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Using image data-attributes in MODX

    • 39446 ☆ A M B ☆
    • 51 Posts
    Jesse Showalter Reply #1, 13 years, 5 months ago
    Hi Everyone,

    I am having a frustrating little issue using HTML data-attributes in MODX.

    Setup:

    So I am creating a page for team members and using getResources to pull in pages made for each member. Like this:
    [[!getResources? &parents=`41` &tpl=`memberTpl` &includeContent=`1` &includeTVs=`1` &processTVs=`1` &tvPrefix=`tv.`]]




    As you can see I am using TV's to drop the content into the data-attributes.
    I have created a chunk/TPL to use that the looks like the following
    <li>
    <a href="" class="teamTab" data-largesrc="[[+tv.memberPhoto]]" data-title="[[+tv.memberName]]" data-status="[[+tv.memberStatus]]" data-description="[[+tv.memberBio]]">
	    <div class="image circle">
            [[+tv.memberPhoto]]
	    </div>
	    <h2>[[+tv.memberName]]</h2>
	    <h3>[[+tv.memberStatus]]</h3>
	    <p>[[+tv.memberBio:ellipsis=`120`]]</p>
	</a>
</li>


    All the TV's are outputting correct except the [[+tv.memberPhoto]]

    any ideas why the text filed, and rich text TV's are working but the image is not???

    This question has been answered by multiple community members. See the first response.

      Mahalo,
      Jesse Showalter

      My Portfolio: http://www.jesseshowalter.com
      MODX Video Tutorials: http://jesseshowalter.com/search-results.html?search=MODX&id=22
      • 36996
      • 211 Posts
      Nir Zohar Reply #2, 13 years, 5 months ago
      What output do you get for the memberPhoto tv?
        • 39446 ☆ A M B ☆
        • 51 Posts
        Jesse Showalter Reply #3, 13 years, 5 months ago
        Quote from: nir-z at Apr 24, 2013, 11:59 PM
        What output do you get for the memberPhoto tv?

        When i use an image src I get images like example 1

        When i use [[+tv.memberPhoto]] i get errors like example 2
          Mahalo,
          Jesse Showalter

          My Portfolio: http://www.jesseshowalter.com
          MODX Video Tutorials: http://jesseshowalter.com/search-results.html?search=MODX&id=22
        • discuss.answer
          • 3109 ☆ A M B ☆
          • 894 Posts
          benmarte Reply #4, 13 years, 5 months ago
          Try putting the memberPhoto tv as the src of the image tag, like this:

          <img src="[[+tv.memberPhoto]]" />
            Benjamin Marte
            Interactive Media Developer
            Follow Me on Twitter | Visit my site | Learn MODX
            • 39446 ☆ A M B ☆
            • 51 Posts
            Jesse Showalter Reply #5, 13 years, 5 months ago
            Quote from: benmarte at Apr 25, 2013, 01:39 PM
            Try putting the memberPhoto tv as the src of the image tag, like this:

            <img src="[[+tv.memberPhoto]]">


            <li>
    <a href="" class="teamTab" data-largesrc="<img src="[[+tv.memberPhoto]]"/>" data-title="[[+tv.memberName]]" data-status="[[+tv.memberStatus]]" data-description="[[+tv.memberBio]]">
	    <div class="image circle">
            [[+tv.memberPhoto]]
	    </div>
	    <h2>[[+tv.memberName]]</h2>
	    <h3>[[+tv.memberStatus]]</h3>
	    <p>[[+tv.memberBio:ellipsis=`120`]]</p>
	</a>
</li>


            tried this out and still got example2 type errors.
            It's very confusing since alllthe other data-attributes work just fine.

            maybe this has to do with the output TV's Input and Output types. They are set to image and image.
              Mahalo,
              Jesse Showalter

              My Portfolio: http://www.jesseshowalter.com
              MODX Video Tutorials: http://jesseshowalter.com/search-results.html?search=MODX&id=22
            • discuss.answer
              • 39446 ☆ A M B ☆
              • 51 Posts
              Jesse Showalter Reply #6, 13 years, 5 months ago
              Figured it out, actually I believe Ben Marte figured it out. I was forgetting about the other image tag.

              Final Code like this:
              <li>
    <a href="" class="teamTab" data-largesrc="[[+tv.memberPhoto]]" data-title="[[+tv.memberName]]" data-status="[[+tv.memberStatus]]" data-description="[[+tv.memberBio]]">
	    <div class="image circle">
            <img src="[[+tv.memberPhoto]]"/>
	    </div>
	    <h2>[[+tv.memberName]]</h2>
	    <h3>[[+tv.memberStatus]]</h3>
	    <p>[[+tv.memberBio:ellipsis=`120`]]</p>
	</a>
</li>
                Mahalo,
                Jesse Showalter

                My Portfolio: http://www.jesseshowalter.com
                MODX Video Tutorials: http://jesseshowalter.com/search-results.html?search=MODX&id=22
                • 3109 ☆ A M B ☆
                • 894 Posts
                benmarte Reply #7, 13 years, 5 months ago
                Make sure when using image TVs you have the input as image and output as default instead of image then use the method I said for rendering the images.

                Glad you got it working.
                  Benjamin Marte
                  Interactive Media Developer
                  Follow Me on Twitter | Visit my site | Learn MODX