<?php echo $content ?>

Discussion in 'Customization & add-ons' started by karyng01, Mar 17, 2016.

  1. karyng01

    karyng01 Member

    Joined:
    Jul 30, 2008
    Messages:
    56
    Hi There,

    I am trying to figure out how to dynamically modify my CSS depending on what member content is output via the $content variable.

    For example in layout.phtml

    <!-- member content starts here -->
    <div class="am-block">
    <h3><a href="/members/content/p/id/188/">Recording - Practice Session (Audio / MP3)</a></h3>
    <h3><a href="/members/content/p/id/189/">Recording - Practice Session (Video/ MP4)</a></h3>
    <h3><a href="/members/content/p/id/189/">Recording - Practice Session (Document / PDF)</a></h3>
    </div>

    Right now I have added a checkmark to the block via the CSS code in site.css

    .am-block h3 a { /* Category dynamic drip items built shown with orange checkmark */
    background-image:url('../img/orange-circle-checkmark-14.png');
    background-repeat:no-repeat;
    background-position:0px 0px;
    padding:0px 0px 0px 24px; /* Indent list left */
    }

    What I really want to do is dynamicallyquery the .am-block content for whether it is a link to a file type (MP3, MP4 or PDF) as mentioned in the <a>text description</a>.

    Then depending on what file type, modify the .am-block h3 a {...} to place an audio icon, a video icon or a PDF file type icon rather than a checkmark.

    On regular pages where I have total code control I can add icons in front of downloadable file types via CSS but with the dynamically built $content variable this isn't an option.

    JavaScript Solution
    I don't mind writing some JS to do the <a>text description</a> query after the PHP page is fully rendered but I can't figure out how to integrate this with the <?php echo $content ?> output.

    Any suggestions?

    Thanks so much.
    Aly

    Attached Files:

  2. karyng01

    karyng01 Member

    Joined:
    Jul 30, 2008
    Messages:
    56
    Another way to do this, I guess, would be to somehow add a class to the am-block div that indicates file type. Then static CSS could be written to then style the file type icon appropriately.

    With this solution how would you add a class? A custom database field could be added to Protected Content > Files that indicates file type but then I don't know how to make aMember query that custom field and append a class to the am-block div.

    My coding skills are intermediate, any help is appreciated.
  3. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    1,670
    I guess it is very common use case and I happy to incorporate it to core. I go ahead and already did it. I can apply changes to your installation directly if you do not mind. Just submit ticket to our helpdesk (https://www.amember.com/support) and ask to apply commit #9839591 to your installation.

    Then each link will have additional CSS classes based on content type eg:
    Code:
    class="am-resource-file am-resource-file-image am-resource-file-image-gif"
    Best Regards.
  4. karyng01

    karyng01 Member

    Joined:
    Jul 30, 2008
    Messages:
    56
    Caesar,

    This solution is fantastic, I couldn't have hoped for better, thank you so much.

    Do I need to be on the latest version of aMember 4.7.2? Right now I'm working on 4.5.1. If so I'll upgrade before submitting a ticket.

    Aly
  5. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    1,670
    I can apply patch to any version but I suggest to upgrade your install to latest one (5.0.3) if possible. I can help you with it if necessary.
  6. karyng01

    karyng01 Member

    Joined:
    Jul 30, 2008
    Messages:
    56
    Thanks Caesar, I will get to the upgrade in the next few weeks myself. Our membership is quite busy so we have to plan for the upgrade and testing the upgrade on the development system beforehand. I really appreciate the offer for help and your support.
    caesar likes this.
  7. jenolan

    jenolan aMember Coder

    Joined:
    Nov 3, 2006
    Messages:
    493
    v5.0.3 is still showing as beta ... is it prime time now?
  8. caesar

    caesar aMember Pro Developer Staff Member

    Joined:
    Oct 16, 2009
    Messages:
    1,670
    It is quite stable. There is not any known issue. We already use it in production on our site several months.

Share This Page