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.
Related
I'm trying to build a blog using a combination of RStudio/blogdown and using the beautifulhugo theme from halogenica/beautifulhugo. When I create a new website using the stock template from github and the RStudio GUI/serve_site() everything works fine (as far as I can see) except the tags on the main page don't work (when I click them they say my computer isn't connected to the internet). I'd like to find out how to fix this... or learn how to work this properly, before I start changing stuff in the stock setup/building a blog.
This tag issue is repeated on each posts' page and on the dedicated "Tags" page when I click "View all" under each tag.
Am a complete noob here - am likely doing something wrong. I managed to "fix" the "View all" issue using https://github.com/halogenica/beautifulhugo/issues/142, but I'm guessing there is a more general issue with what I'm doing: I need to fix it once centrally, or perhaps perform a similar modification to other parts of the code?
Never mind - I found out what was wrong. The above fix corrects one of the issues in terms.html (layouts/_default). In the same folder there was an "error" (which I'll no doubt find out is correct at some point in the future) where there was an extra "/" being put into the tags link. I had to change
{{ . }}
to
{{ . }}
in both list/single.html in the same folder as above. Note these only differ in the slash before tags.
I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.
I am a beginner in laravel, and having some trouble in laravel CSS layouts.
I have multiple links in my web, for example:
testing.com/main
testing.com/AboutUs
testing.com/ContactUs
which I used a layout stored in /layouts/main.blade.php in the views folder.
Inside the layout, I wrote all the css link that is based on the public folder.
For ex:
<link href="stylesheet" href="/css/styles.css">
And it works fine on all the links except for the ones with sub-links, for example:
testing.com/main/Clients
testing.com/main/Solutions
The CSS seem to have dissapear when I navigate to sub-links.
Am I not properly declaring the CSS in Laravel? The CSS works perfectly when it is not a sub-link.
You should use the Laravel helpers to add assets to your views as they generate the correct URLs. Either use URL::asset('css/styles.css') or asset('css/styles.css') if you need to get a link to an arbitrary asset. Alternatively, you can be a bit cleverer and get Laravel to do some extra hard lifting:
{{ HTML::style('css/site.css') }}
{{ HTML::script('js/site.js') }}
{{ HTML::image('images/logo.png') }}
These will write your HTML for you as well as generating the links to the assets.
You can use
asset('css/styles.css')
It's work fine with me!
Since a few weeks I started playing with Symfony2.
It seems a very powerful framework, but there are some things I cannot still understand.
In documentation I see that i18n (i.e. Translations) is managed by the Translator service. If I correctly understood, the main way to have a website translated is to put the collection of messages I want to translate inside the different files messages.XX.yml (XX=en,fr,it,etc...), one for each language.
This could be perfect for short texts, which possibly do not include any HTML markup. But how do you deal with long text? For instance, how can I manage the translation of a Terms Of Service or an About page?
I guess I should include different templates for each locale I want to use. Am I right?
Thanks for your help!
You can have long texts in .yml translation file as well as html tags. Put your Terms Of Service text in messages.xx.yml file like this:
TermsOfServiceText: >
<p>Here goes my Terms of service code</p>
<p>It can be put in several lines and <strong>can include html tags!</strong></p>
<p>It can also include links</p>
<p>Just make sure that you put '>' sign after your translation keyword like in the first line of this example code
and start your message in next line with double space indentation</p>
Now, in your twig template call translation with this:
{{ 'TermsOfServiceText'|trans|raw }}
raw is used to skip escaping html tags.
I don't think that different templates could be as solution. But feel free to choose what you prefer. I'll go with https://github.com/stof/StofDoctrineExtensionsBundle in particular with the Translatable behaviour.
Websites like Wordpress and Tumblr allow designers to create themes that users can select. In general how would you architect a website to be flexible enough to allow custom themes for users?
Take a look on how Django does it. Django uses a Model-View-Controller-like approach in which you use views to populate a context, and then use that context to process a template. Note that Django has its own MVC terminology.
For example, if we say that our context reads as follows (in pseudo code),
author = 'mntnoe'
title = 'My Title'
content = '<p>This is my content</p>'
we could use the following template:
<h1>{{ title }}</h1>
<div class="author">Author: {{ author }}</div>
<div class="content">
{{ content }}
</div>
Now, you are free to replace the template (or collection of templates) with another one without affecting how the site works.
Seperate content from formatting by using proper html and css. That means using css files for the style rather than inline style inside the html.
You can make several css files (themes if you wish), and switch between them using javascript.
Let your serverside technology of choice simply generate easy to adjust, by css and images, html. A great site of examples is http://www.csszengarden.com/. It emits the same html every time but uses different css and images to style it. Take a look at the html they generate to get ideas.