Insert image to registration form

1

Dear Indico Team,

How can we insert image to a registration form description? We tried with HTML code and Markdown, but it didn’t work.

Thank you,
Attila

2

unfortunately that’s currently not possible - once we find some time to get rid of the legacy angular stuff in the registration form we’ll support some formatting there.

not sure about images though - we had mostly inline things in mind (bold, italic, links, …).

any details on your usecase where you’d need images?

3

Dear ThiefMaster,

Thank you for your fast reply.

It’s just a small png in the description, I think it’s in a minimum level question. We try to solve it on another way.

Thank you!

Attila

4

Hey guys,

I’m running to the problem that I need to have an URL in the registration form. I know that this is not on the agenda right now, but what would be your advice to “hack” this into a regform?

I thought about a free text field and some custom JS that adds a click event listener… but then I’m only able to get the whole content, as I won’t be able to define tags inside the free text, right?

Cheers.

5

Hm, what about adding a custom URL field to the list of available fields? It might require more work but would be less “hacky” than what you are trying to do.

6

Sounds like something that might turn out problematic during a future update. Also, adding new fields with all the Angular mess isn’t trivial at all - so if you can inject JS via customization and do it based on custom content in a freetext field this sounds actually cleaner (even if it’s very hacky).
The hardest part is probably getting the JS to deal with the angular-generated markup since it’s not present at initial page load.

However, maybe a plugin to inject the JS would work as well and be less of a hack than using customization for it. You can check the cern_access plugin in indico/indico-plugins-cern on GitHub for an example of using a plugin to inject content to a registration form.

7

Hey,

thanks for the help.

However, I followed the custom JS approach. For all others that might want to do something similar as a one time thing, here’s the hack (check out the field’s data-id by the inspector):

$(document).ready(function () {

 if (~$(location).attr('href').indexOf("event/65/registrations/74/") || ~$(location).attr('href').indexOf("event/65/manage/registration/74/")) {

    function addlink(selector) {
        var x = $(selector);
        if (x.length & x.parent().is("td")) {
            $(document).off("DOMSubtreeModified");
            x.wrap("<a target='_blank' href='https://www.google.com'></a>");
        }
    }
}
$(document).on('DOMSubtreeModified', function () {
    addlink("div[data-id='field-2097-2136']");
});
});
8

nice hack :wink:

just one tip: there’s no point in doing $(location) - this is a plain JS object so you can just do location.href.