Ansel field not displaying in channel form template tags
#37 opened by Megan Miriello
Description
Solution:
This issue has been fixed in Ansel 2.0.9 which corrects the issue of Channel Form assets (JS and CSS) not being loaded if a channel entries tag is called before the channel form.
I have a site with a channel form for users to submit entries from the front-end of the site. It is using ansel for the image upload. Here is the template tag below:
<label>Photos</label>
{field:e_images}
This shows the titles for each field but does not show the upload.
Replies
- TJ Draper
Replied 8/11/2017 5:54 PM, Edited 8/18/2017 8:23 PM
Hi Joanna,
Bugs can be fickle things. I’m sorry your running into this. Unfortunately I can't replicate the issue. Channel Form with Ansel appears to be working for me. Can you share more of the template code?
- Megan Miriello
Replied 8/14/2017 9:50 AM, Edited 8/18/2017 8:23 PM
Thank you for looking into that. Earlier on the page, I have a channel:entries loop to pull the two images into the page (favicon and logo). If I comment these out the channel form works as expected. Do you know what would cause this? I have pasted the code for those two loops:
<!-- Favicon --> {exp:channel:entries channel="company_info" dynamic="no" entry_id="84" disable="categories|category_fields|member_data|pagination"} {company_info_favicon} <link rel="shortcut icon" href="{img:url:resize width='32'}"> <link rel="apple-touch-icon" href="{img:url:resize width='57'}"> <link rel="apple-touch-icon" sizes="76x76" href="{img:url:resize width='76'}"> <link rel="apple-touch-icon" sizes="120x120" href="{img:url:resize width='120'}"> <link rel="apple-touch-icon" sizes="152x152" href="{img:url:resize width='152'}"> {/company_info_favicon} {/exp:channel:entries} <link href='http://fonts.googleapis.com/css?family=Abel|Source+Sans+Pro:400,300,300italic,400italic,600,600italic,700,700italic,900,900italic,200italic,200' rel='stylesheet' type='text/css'> <link href="/assets/css/bootstrap.min.css" rel="stylesheet"> <link href="/assets/css/font-awesome.min.css" rel="stylesheet"> <link href="/assets/css/magnific-popup.css" rel="stylesheet"> <link href="/assets/css/shortcodes/shortcodes.css" rel="stylesheet"> <link href="/assets/css/owl.carousel.css" rel="stylesheet"> <link href="/assets/css/owl.theme.css" rel="stylesheet"> <link href="/assets/css/style.css?v=1" rel="stylesheet"> <link href="/assets/css/style-responsive.css" rel="stylesheet"> <link href="/assets/css/default-theme.css" rel="stylesheet"> <link href="/assets/css/blog.css" rel="stylesheet"> <link href="/assets/css/custom.css" rel="stylesheet"> <!-- SLIDER REVOLUTION 4.x CSS SETTINGS --> <link rel="stylesheet" type="text/css" href="/assets/slider-revolution/css/extralayers.css" media="screen"> <link rel="stylesheet" type="text/css" href="/assets/slider-revolution/css/settings.css" media="screen"> </head> <body> <!-- preloader start --> <div id="tb-preloader"> <div class="tb-preloader-wave"></div> </div> <!-- preloader end --> <div class="wrapper"> <!--header start--> <header id="header" class=" nav-center-align"> <div class="light-header"> <div class="container" id="header-container"> <div id="massive-menu" class="menuzord"> <!--logo start--> {exp:channel:entries channel="company_info" dynamic="no" entry_id="84" disable="categories|category_fields|member_data|pagination"} {company_info_logo} <a href="/" class="logo-brand"> <img src="{img:url:resize height='80'}" alt="{site_name} logo" title="Home | {site_name}" /> </a> {/company_info_logo} {/exp:channel:entries}
- TJ Draper
Replied 8/14/2017 10:50 AM, Edited 8/18/2017 8:23 PM
I’m not quite sure what would cause that, but EE can be a bit finicky about things like that. Can you try putting the channel form in an embed and embedding it instead of doing it directly in that template with the two channel entries loops you posted?
- Megan Miriello
Replied 8/14/2017 11:58 AM, Edited 8/18/2017 8:23 PM
Unfortunately, the embed did not resolve the problem. The only thing I can do to correct it is comment out those loops.
- Megan Miriello
Replied 8/17/2017 9:28 AM, Edited 8/18/2017 8:23 PM
Is there any update on this issue?
- TJ Draper
Replied 8/17/2017 10:56 AM, Edited 8/18/2017 8:23 PM
Hi Joanna,
I believe I have found the issue and fixed it. Can you give the attached solution download, 2.0.9 beta 1 a try and see if it fixed your issue?
The technical explanation is that if the Ansel fieldtype class is instantiated in a channel entry tag before the channel form loop runs, Ansel would never get a chance to add it's CSS and JS. I believe I have worked around this issue.
- TJ Draper
Replied 8/18/2017 9:13 AM, Edited 8/18/2017 8:23 PM
Hi Joanna,
Just checking in to see if you've had a chance to try out 2.0.9 beta 1? No rush or pressure at all, but I wanted to follow up.
- Megan Miriello
Replied 8/18/2017 3:50 PM, Edited 8/18/2017 8:23 PM
This works great. Thank you for your quick help.