Possible to add link to image in Microthemer?

Tagged: , , , ,

Author Posts

dianemk October 4, 2017 at 12:56 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hi, is there a quick way to add a link to an image in MT? Thanks

Sebastian October 4, 2017 at 1:53 pm

No. Links are HTML elements. Microthemer can only generate CSS code. You could implement a JavaScript workaround via MT’s JS code editor, but I would only recommend that as a last resort.

Did you add the image via the WordPress Post/Page editor? If so, it should be possible to add a link by simply clicking the image and then applying a link via the link icon in the text editor, the same way you would create a text link.

Cheers,
Sebastian

dianemk October 4, 2017 at 2:01 pm

Thanks for the reply. No, I’m trying a Beta Woocommerce plug in for BB and wanted to turn the product into a link

Sebastian October 4, 2017 at 2:26 pm

I see, it might be best to request this feature from the plugin author.

Does the link you which to add already appear on the page, somewhere near the image?

If so, I might be able to provide you with some JS code you can paste into MT to get the functionality working.

Thanks,
Sebastian

dianemk October 4, 2017 at 6:38 pm

No it doesn’t. I’m going to contact the plugin team and ask otherwise I’ve thought of a possible workaround. Thanks, Diane

Sebastian October 5, 2017 at 4:51 pm

OK, good luck!

Dapadon September 17, 2025 at 6:50 am

Has this changed?

I have a Box module layout, where I want the background of the box to be the link to the page.

https://rock.reidmedia.co.uk/

Its the masonary section, 2 thirds of the way down.

Sebastian September 17, 2025 at 12:27 pm

Hey,

Microthemer is still just for CSS, but my newly released Amender plugin can be used to wrap the images in a link.

You can test this using the free version (which you can activate from within Microthemer, see the option next to the Font group). You only pay if it works the way you want and you’re ready to unlock the “Publish” feature for Amender changes.

Amender has just been released, so I’m still working on the docs. The Introducing Amender video gives a brief overview, but let me know if you need further assistance.

For adding links to your images I would expect the solution to be:

  1. Select the outer box element, which has a “fl-module-box” class
  2. Click the Amender option next to the Font group
  3. Click the plus (+) icon to create a custom change
  4. Set the action to add
  5. Set the aspect to childWrapper
  6. Set the Tag to a (for anchor)
  7. Set the Attributes string textarea to href=”/page-slug-here/”
  8. Repeat for all images, setting the page slug or full URL for the relevant page

Let me know how you get on!

Cheers,
Sebastian

You must login or register to reply to this topic.