0

I want to add code to a page in Magento as follows:

<div class="row">
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 1" src="https://domain.com/image1.jpg"></img>
        <a href="https://link1.com"><div class="overlay"><span>Link<br />#1</span></div></a></div>
    </div>
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 2" src="https://domain.com/image2.jpg"></img>
        <a href="https://link2.com"><div class="overlay"><span>Link<br />#2</span></div></a></div>
    </div>
</div>

After I saved this a second time, the links are gone and I find this:

<div class="row">
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 1" src="https://domain.com/image1.jpg"></img>
        <div class="overlay"><span>Link<br />#1</span></div></div>
    </div>
    <div class="col-md-3">
        <div class="fp-img-hover-wrapper"><img alt="Image 2" src="https://domain.com/image2.jpg"></img>
        <div class="overlay"><span>Link<br />#2</span></div></div>
    </div>
</div>

How can I solve this and why is Magento doing this? Thanks!

1

I would imagine it's because wrapping a div (block-level element) in an anchor (inline element) isn't valid HTML, so they were stripped. Try replacing:

<div class="overlay">

With:

<span class="overlay">

And see if that helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.