Getting an Image and Link into the Collapsing Content

  • Resolved Levaire

    (@dr3amscap3)


    6 years, 8 months ago

    First, let me say ‘cool plugin’. Very light and very versatile. Thank you.

    Second, how do I get a linked image to work in the title? Essentially, I want to add a small “external link” image to the titles. So, when a user clicks on the title, it expands or collapses, but when the click on the image showing up just right of the title, they go to the linked page.

    See ‘Michigan’ at https://graceslist.org/ . Would like to get that little square image up to a couple spaces right of ‘Michigan’ where it stays in front of the user regardless of whether ‘Michigan’ is expanded or collapsed.

    Doable?

    Thank you in advance.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Levaire

    (@dr3amscap3)

    Should I be paying to get an answer to this question?

    Plugin Author twinpictures

    (@twinpictures)

    no, it’s just been a busy summer.
    sorry for the delay.
    have you tried something like:
    [expand title="this is a test with a <a href='https://plugins.twinpictures.de'>link</a>"]here is some hidden content[/expand]
    Here is a demo:
    https://spacedonkey.de/3284/collapse-o-matic-with-inline-link/

    the key is to use double quotes to wrap the title attribute and single quotes for the html inside the double quotes.

    What have you tried so far?

    Thread Starter Levaire

    (@dr3amscap3)

    Thanks for responding. I did try hacking at it initially, but that was over a month ago. I’m doing so again now with your input. Right now, since adding a graphic and a link, the title has disappeared (though it is still taking up space on the page and the hidden content still expands and collapses.) Still testing. Will advise.

    Thread Starter Levaire

    (@dr3amscap3)

    Findings:

    ORIGINAL
    [expand title=”Michigan (MI)” tag=”h5″ expanded=”true” trigclass=”noarrow”]

    EMBEDDING LINKED GRAPHIC
    [expand title=”Michigan (MI) homeless shelters michigan” tag=”h5″ expanded=”true” trigclass=”noarrow”]

    Once I pulled the image out, the text showed up again. Expanding and collapsing works, and the link in the title now works. Just can’t seem to get the graphic to play.

    As soon as I add a small gif back in–even if I don’t use dimensions, classes or alt tags–the title disappears (though toggling the white space where the title SHOULD be still expands/collapses the hidden content.)

    Additionally, the link code now shows up in the screen tip during a mouseover, which reduces readability for users.

    Thoughts?

    Thread Starter Levaire

    (@dr3amscap3)

    I failed to use the ‘code’ parameters in my last response:

    ORIGINAL
    [expand title="Michigan (MI)" tag="h5" expanded="true" trigclass="noarrow"]

    EMBEDDING LINKED GRAPHIC
    [expand title="Michigan (MI) <a href='https://michigan.graceslist.org/'><img src="https://graceslist.org/wp-content/uploads/2018/06/homeless-mi.gif" alt="homeless shelters michigan" width="16" height="16" class="alignnone size-full wp-image-4393" /></a>" tag="h5" expanded="true" trigclass="noarrow"]

    Plugin Author twinpictures

    (@twinpictures)

    just look at the title attribute.
    it’s wrapped in double quotes, correct?
    good.
    now what happens if you use a double quote inside the title attribute value? for example, assign the src, alt, width, height, and class attributes of the image tag using double quotes?

    This is your title as shown in the last post:
    title="Michigan (MI) <a href='https://michigan.graceslist.org/'><img src="
    now what can you do to prevent the title from terminating as the src attribute of the img tag starts?
    Here is a hint:

    the key is to use double quotes to wrap the title attribute and single quotes for the html inside the double quotes.

    that’s right! use single quotes:

    [expand title="Michigan (MI) <a href='https://michigan.graceslist.org/'><img src='https://graceslist.org/wp-content/uploads/2018/06/homeless-mi.gif' alt='homeless shelters michigan' width='16' height='16' class='alignnone size-full wp-image-4393' /></a>" tag="h5" expanded="true" trigclass="noarrow"]

    YES! Michigan

    • This reply was modified 6 years, 7 months ago by twinpictures.
    Thread Starter Levaire

    (@dr3amscap3)

    Ugh. Thank you for spelling that out. It works perfectly! Thank you!

    Thread Starter Levaire

    (@dr3amscap3)

    Say, is there a way to keep the screen tips from coming up? Now that the title is loaded with wonderful things, it’s kinda unreadable to the average joe or jane.

    Plugin Author twinpictures

    (@twinpictures)

    what is meant by screen tips?
    if you mean the tooltips that popup on rollover, you can use the notitle attribute as described in the documentation.

    Issue marked as resolved.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Getting an Image and Link into the Collapsing Content’ is closed to new replies.