Adding Images into a Toggle (collapsible content)

Using Ghost
1

Has anyone been able to add an image/images into a toggle? I need this functionality, but can not find a solution. Any help is much appreciated!

2

I think toggle cards support text (including links) at the moment, but not images.

4

Damn, that’s a real shame. I wonder if I should suggest it as a feature.

1 Like
5

+1 from me. This would be really nice feature.

6

Hi MattOnChain!

If you copy the code of the Toggle control and paste it into a HTML control, you could accomplish something like this by adding an <img src="..." /> tag within the kg-toggle-content div.

For example:

<div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
    <div class="kg-toggle-heading">
        <h4 class="kg-toggle-heading-text">
            Would you like to see a photo?
        </h4>
        <button class="kg-toggle-card-icon">
            <svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"></path>
            </svg>
        </button>
    </div>
    <div class="kg-toggle-content">
        <p><img src="https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80" /></p>
        <p>Photo by <a href="https://unsplash.com/@reneporter">René Porter</a>.</p>
    </div>
</div>

You could then save this as a snippet to make it reusable.

This worked for me on the Casper theme.

2 Likes
7

Is this still not supported? it really sucks that we can’t add images to collapsible content.

I’ll try your suggestion @ryansechrest as a workaround

1 Like
8

Thanks for this @ryansechrest - worked great for me with the Edition theme.

1 Like
9

Hello, I fully support this improvment, it would be great if toggle card could be able to accept any text / image / other card !