I am building a website with Yesod that contains a search form at the top of every page. From what I have understood till now, I should create a widget for the form, but I am unable to include it in a common place. What is the recommended way to do this?
If I create a custom widget, what is the recommended folder structure to follow?
This is what the defaultLayout function is intended for: you can add any kind of content to this page, and all pages of your site which use defaultLayout will inherit it automatically.
I ran into this recently when trying to add a header to every page that has a "Login" link if the user is not authenticated, and a "Logout" link if they are. I didn't find any good examples in the documentation of how to do this so I put one together.
Note: This assumes that you are using the scaffolding, but even if you're not you should still be able to work this in.
The first thing you need to do is create a header widget and add it to defaultLayout in Foundation.hs.
pageHeaderWidget :: Handler Widget
pageHeaderWidget = do
mauthId <- maybeAuthId
return $(widgetFile "header")
defaultLayout widget = do
pageHeader <- pageHeaderWidget >>= widgetToPageContent
-- ...
withUrlRenderer $(hamletFile "template/default-layout-wrapper.hamlet")
Then you need to create the corresponding html and style for your header:
File: header.hamlet
<header>
$maybe authId <- mauthId
Welcome #{show aid} - <a href=#{AuthR LogoutR}> Logout
$nothing
<a href=#{AuthR LoginR}> Login
File: header.lucius
header {
background-color: #007fff;
height: 50px;
}
Finally, you need to edit default-layout-wrapper.hamlet and add
^{pageHead pageHeader}
to the <head> tag just below ^{pageHead pc} (generated by the scaffolding); and replace
<header>
in the <body> with
^{pageBody pageHeader}
Related
I am looking to add additional layout parameters like the #inner for the layout. For example #title for the <title>#title</title> and an area for onload javascript for individual pages.
window.onload = function () {
#onload_js
}
These are set in the layout, so I am not sure the best way to handle these in Phoenix. Thanks :D.
For the page title, you can simply pass a value through from your controller:
def edit(conn, params) do
render(conn, "edit.html", page_title: "Edit The Thing")
end
<head>
<title><%= assigns[:page_title] || "Default Title" %></title>
</head>
Note that this uses assigns[:page_title] instead of #page_title or assigns.page_title as they will error if the :page_title key is not present in assigns.
For including templates (your script example) there is render_existing/3 (and the docs for the same function in the latest version of Phoenix).
The documentation gives a similar example to what you requested so I have copied it here for convenience:
Consider the case where the application layout allows views to dynamically render a section of script tags in the head of the document. Some views may wish to inject certain scripts, while others will not.
<head>
<%= render_existing view_module(#conn), "scripts.html", assigns %>
</head>
Then the module for the #inner view can decide to provide scripts with either a precompiled template, or by implementing the function directly, ie:
def render("scripts.html", _assigns) do
"<script src="...">"
end
To use a precompiled template, create a scripts.html.eex file in the templates directory for the corresponding view you want it to render for. For example, for the UserView, create the scripts.html.eex file at web/templates/user/.
By default, Limesurvey provides the follow text elements for the surveys - Survey title, Description, Welcome message, End message etc, which I can use in my template with tags like {SURVEYNAME}, {SURVEYDESCRIPTION}, {WELCOME} etc.
Is it possible to add my own custom field, which I can then use in the template? I need to do it this way because I need to have the text translatable, and present on every page.
You can not add a custom replacement with the current version of LimeSurvey. And your LimeSurvey version seems outdated. But LS includes jquery, therefore it's easy to move some element from a place to elsewhere.
Quick example:
<p>Here is your description</p>
<div style='display:none'>
<label for='languagechanger' id='labellang'>Here is the new label for language</label>
</div>
<script>
$(function() {
$("#labellang").insertAfter("#languagechanger")
});
</script>
A PHP solution, hacking LimeSurvey code, should be placed at https://github.com/LimeSurvey/LimeSurvey/blob/master/application/helpers/replacements_helper.php#L814
Lets say I have html view like <div ng-controler="contr">....</div> and a js controler. Supposed that i want to use this view on bottom left and right top of my main page, in the center of one of the sub pages and so on... What are my best options of reusage? I saw that i can inject the whole html into a string and call "compile" like this but this does not seem "elegant"
Put it in a spearate html file, or add to the template cache, and include it with the ng-include directive. I'll automatically create a new scope.
<ng-include src="'template.html'"></ng-include>
<ng-include src="'template.html'"></ng-include>
<script type="text/ng-template" id="template.html">
<div ng-controler="contr">....</div>
</script>
I have a pretty straight forward question, in regards to joomla templates.
The end result being : http://css3playground.com/flip-card.php
What I want to do is simple, in a sense, but need to know where to look;
I want to have the entire page wrapped in two divs, all the PHP code, to which class i can define in css and drop in some javascrpt so I can apply page transitions to that div. All of which I know how to do except for where to do it in, the PHP structure of joomla is new to me.
and also, after the first step is accomplished, create a second div after the content that would be dynamically loaded with content from clicked links on the page from within the template, but thats two questions at once lol.
Any ideas on the first part?
If you just want to use a div to encompass the entire template, do exactly that: wrap the template in a div and give it a custom class or id:
<html>
<head>
//stuff here
</head>
<body>
//insert the wrapper here
<div id="wrapper">
//template structure here
</div>
</body>
</html>
The file you want to edit will likely be named index.php located at public_html/templates/your_template/index.php.
For some templates, such as those by Yootheme, you will instead want to edit the file at public_html/templates/your_template/layouts/template.php (or /public_html/templates/your_template/styles/current_profile/layouts/template.php if you're using a profile other than the default).
I need to embed an issuu document inside a website. The website administrator should be allowed to decide which document is displayed on the frontend.
This is an easy task, using the embed link on the issuu page. But I need to customize some options - for instance, disable sharing, set the dimensions and so on. I cannot rely on the administrators doing this process every time they need to change the document.
I can easily customize the issuu embed code to my taste, and all that I need is the document id. Unfortunately, the id is not included in the issuu page for the document. For instance, the id for this random link happens to be 110209071155-d0ed1d10ac0b40dda80dad24166a76ee, which is nowhere to be found, neither in the URL nor easily inside the page. You have to dig into the embed code to find it.
I thought the issuu API could allow me to get a document id given its URL, but I cannot find anything like this. The closest match is the search API, but if I search for the exact name of the document I get only one match for a different document!
Is there some easy way to be able to embed a document only knowing its URL? Or an easy way for a non techie person to find a document id in the page?
Unfortunate the only way for you to costomize is to pay for the service wich is 39$ for month =/.
You can force a fullscreen mode without ads by using
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="YOUR ISSU EMBED" frameborder="0" style="overflow:hidden;height:105%;width:105%;position:absolute;" height="100%" width="100%""></iframe>
</body>
You can embed of course stacks but that isnt showed on Issuu site. This is code (its old code but it works):
<iframe src="http://static.issuu.com/widgets/shelf/index.html?folderId=FOLDERIDamp;theme=theme1&rows=1&thumbSize=large&roundedCorners=true&showTitle=true&showAuthor=false&shadow=true&effect3d=true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="200"></iframe>
FOLDERID is number of 36 chars that you get on address bar when you enter stacks (example: https://issuu.com/username/stacks/FOLDERID). When you replacing that in code you must paste 36 chars in this format 8-4-4-4-12 with - between chars. And voila its working.
You can change theme and other stuffs in code.
The Document ID is found in the HTML source of every document. It is in the og:video meta property.
<meta property="og:video" content="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf?mode=mini&documentId=XXXXXXXX-XXXXXXXXXXXXX&pageNumber=0">
You can easily handle it by using the DomDocument and DomXPath php classes.
Here is how-to using PHP:
// Your document URL
$url = 'https://issuu.com/proyectotres/docs/proyecto_3_edicion_135';
// Turn off errors, loads the URL as an object and then turn errors on again
libxml_use_internal_errors(true);
$dom = DomDocument::loadHTMLFile($url);
libxml_use_internal_errors(false);
// DomXPath helps find the <meta property="og:video" content="http://hereyoucanfindthedocumentid?documentId=xxxxx-xxxxxxx"/>
$xpath = new DOMXPath($dom);
$meta = $xpath->query("//html/head/meta[#property='og:video']");
// Get the content attribute of the <meta> node and parse its query
$vars = [];
parse_str(parse_url($meta[0]->getAttribute('content'))['query'], $vars);
// Ready. The document ID is here:
$docID = $vars['documentId'];
// You can print it:
echo $docID;
You can try it with the URL of your own Issu document.
You can use the Issuu URL of your document to complete this iframe :
<iframe width="100%" height="283" style="display: block; margin-left: auto; margin-right: auto;" src="https://e.issuu.com/issuu-reader3-embed-files/latest/twittercard.html?u=nantucketchamber&d=program-update1&p=1" frameborder="0" allowfullscreen="allowfullscreen" span="" id="CmCaReT"></iframe>
You just need to replace "nantucketchamber" by a user name and "program-update1" by the file name in the Issuu URL
(for this example the URL is https://issuu.com/nantucketchamber/docs/program-update1)