I currently understand the basics of Laravel Blade Components and Includes, however I'm trying to call an include from within another include.
E.g
Input Include
<!-- Alias is 'input' -->
<input type="{{ $type ?? 'text' }} value="{{ $value ?? '' }}" />
Text Include
<div>
<div>Label</div>
#input(['value'=>'Foo'])
</div>
Hidden Include
<div>
#input(['type'=>'hidden','value'=>'Bar'])
</div>
Trying to use the Text and Hidden include does not work as I'm getting the:
Action Facade\Ignition\Http\Controllers\ShareReportController not defined. error, however everything is fine when using just the Input include. I've done all of the above with Components instead and ended up with the same outcome.
Does anyone know whether the above is possible and I'm just missing something? Or do I need to go about this differently?
Thanks
Found the issue, I posted this too soon. My quotes weren't closing properly, and the error message appears to be generic and doesn't reflect the actual error.
Related
I have a site where I am trying to allow the site owners to enter an iframe embed code (using the paragraphs module) on a page and then will render this out adding a container to make it always responsive.
I am running into an issue with twig always outputting as text however. It works perfectly if I use a formatted text field and then click "source" and paste the code in from the dashboard, but obviously that is super clunky for the site admin and very prone to errors. I'd like to just have a plain text field instead. Trouble is even when I use {{ content.field_embed[0].value | raw }} it comes out as text. is there anyway around this that I am missing? Would like to not resort to having the user work with the CK editor just for a simple embed
#mhfleming, I was having the exact same issue as you. Using the filter raw was still giving me the escaped iframe, like in <iframe .... I even thought the issue could be related to one of the contrib modules Twig Tweak and Twig Field Value, which the site I'm working on uses, but those were not the culprits.
I was able to get my code working with the following Twig snippet:
{% set embed_code = {
'#type': 'processed_text',
'#text': content.field_embed_code[0]['#context']['value'],
'#format': 'full_html',
} %}
<div class="responsive-embed">
{{ embed_code }}
</div>
Your code looks very similar. Try replacing the field name with field_embed and give this snippet a try.
Had the same issue and came to thread and found Bruno's answer which gave me an idea that worked for me for a plain text field.
Override the field--name.html.twig that has the iframe code in it. Then print the field using this structure (kint is your friend here) {{ item.content['#context']['value']|raw }}
This worked for me and rendered the iframe just fine. Hope it helps someone else.
Hi I have implemented auto search option in Angular 2 using primeng. I have found reference in https://www.primefaces.org/primeng/#/autocomplete site. when I implement same code in my project I do not see suggestions filling in drop-down box list. I have added screenshot below.
Below is my code.
<p-autoComplete autofocus name="username" [(ngModel)]="username" [suggestions]="filteredUsernamesSingle"(completeMethod)="filterUsernameSingle($event)" field="userName" [size]="30"
placeholder="Enter UserName" [minLength]="3" required></p-autoComplete>
In reference website when user tries to search some test, everything comes in dro-down list. But when I implement I am not getting any drop-down list as I shown in above image. Can someone help me where can I add styles to make suggestions come in drop-down box list?
I had the same problem. I was passing a string[] array into [suggestions]. After examining their example it started working after I started passing an array of objects instead. Apparently the autocomplete component expects an object with a property specified in the field directive, otherwise it can't reach the value and format it properly. Try passing it an object with a userName property, since in the HTML you specified field="userName".
Check the documentation page primefaces getting started. You'll see instructions to add the primeng css and primeicons and a theme css file that you will use as the theme for your site, to the project's angular.js file. This will work like <link rel="stylesheet" href="styles.css" /> embedding of external css files to a web page.
I'm having issues with a small and trivial application that I created to help me learn Symfony 3. The Application simple allows me to upload an image when I create a new blog post.
I'm using the Symfony 3 documentation to learn about uploading file, and in it, it suggests that I rename the file to a unique name using the md5() hash method to request a strange looking name for the file.
Everything works find until I want to display the image in the index.html.twig file. I was under the impression that I could simply use the asset() method that I was using to import bootstrap and other publicly viewable files, and then simply append the file name to the end of that. But nothing seems to work.
Here are some things that I have tried.
<img src="{{ asset('blog/images/') }}{{ blog.imageUrl }}">
<img src="{{ asset('blog/images/', { 'imageUrl': blog.imageUrl }) }}">
<img src="{{ asset('blog/images/' . blog.imageUrl) }} ">
And there is probably a few more different combinations that I have tried but can remember. Now I have since found the documentation that talks a little about the asset() method, but there is nothing there that seems to state that you can use it and then just append the file name to the end of it, And I haven't found any information that allows me to point directly to the web directories, where the blog/images folder now lives. So any help with this would be awesome. Thank you so much.
Not knowing the content of blog.imageUrl its hard to know what is expected. My guess for the 'correct' answer to your question is that you were very close with option #3, however in twig string concatenation is done using the ~ symbol and not .
So in your case you would use <img src="{{ asset('blog/images/' ~ blog.imageUrl) }}" />
Regards
Make sure that the new name of the file matches the name stored in the database. That and make sure the path you're using is correct.
In AEM 6.2, I want to do this in handlebars.
<sly data-sly-resource="${'title' # resourceType='myproject/components/content/common/title'}"/>
Specifically, I overlaid the qnaforum.hbs and need to include it in there. The official documentation(link) says the correct way to do this is:
{{include this.id path="title" resourceType="myproject/components/content/common/title"}}
When done this way there are three problems:
The component appears, but then disappears from the page.
I get the warning "Forcing resource type is not supported when sling including on the client side"
There is a failed(404) GET request to http://localhost:4502/content/myproject/qna-index-page/jcr:content/qna-parsys/qna/title.html in the browser console (like it's trying to find the renderer for the title resource at that path).
In the same qnaforum.hbs file, Adobe is using the same include for their subscriptions component and it seems to work fine.
{{include this.id path="subscriptions" resourceType="/libs/social/subscriptions/components/hbs/subscriptions"}}
Does this type of include only work for Social Communities components? If so, how can I include a custom resource in the handlebars template?
I helped some one else who was facing a similar issue. I am attaching the code snippet that caused the issue you are facing (disappearing QnA list), and the fix for that.
The overlaid QnAForum component looked like this
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- Other QnA code --}}
</div>
But code should be like this
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- moving line1 from previous code snippet inside this parent div}}
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{!-- rest of QnA Code }}
</div>
The change I made is, moving line1 in first code snippet into line 5.
The JS console does say missing HTML, but it gets included though. The reason for console error is the way include works.We try to fetch the html, and if we fail in fetching the HTML, we ask to sling to resolve the component.
I'm not sure if this is the best forum to ask this in, but I need to style a magento theme and I'm just wondering how dependent is the javascript on the class names?
For example, I have something like this in my template file (inside my theme file, overriding the base)
<form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="newsletter-validate-detail">
<div class="block-content">
<div class="form-subscribe-header">
If I say, leave the ids alone, but change the class names to something else (i.e. remove "block content" or "form-subscribe-header") will this break the javascript in Magento?
Also, is there an easy way to tell if I've broken something? Will I just get a console error if a piece of javascript was coupled with a css class name?
Search your javascript files for your class names to see if they are used by the script. You could also just leave your classes as they are but add a new one in, like this:
<div class="form-subscribe-header new-class">
Then target the class using .new-class
And yes, any javascript errors will appear in the console.