TYPO3 integrating HTML - html

I'm newbie at TYPO3, trying to install my custom template.
I have HTML/CSS/IMAGES files, but can't find how to implement it.
Find file /fileadmin/default/templates/typo3-intro-template.html changes on it affects on site. But I can't understand how to use it to show dynamic content.
When I add this:
page = PAGE
page.typeNum = 0
#page.10 = USER
page.10 = TEXT
#page.10.userFunc = tx_templavoila_pi1->main_page
page.10.value = Hello world
to page Setup, got Hello world, but without design.
Is there any way to add something like:
page.10.template = /fileadmin/default/templates/tmy-file.html
?

There are tons of manuals for Typo3. There are 2 choices with templating. Either with Templavoila or with Autoparser. Autoparser is completley scripted and Templavoila uses a graphical interface.

Here's an overview of setting up a site with TemplaVoila: http://webdevelopers.thedemo.ca/
We'll move to fluid in the future, but for now this method is tried and true, and not going anywhere for a while.
I don't like the way fluid uses inline syntax either.

config {
baseURL = http://www.bla.com/
prefixLocalAnchors = all
meaningfulTempFilePrefix=1
doctype=xhtml_trans
htmlTag_langKey=de
remove_defaultJS=external
inlineStyle2TempFile=1
disablePrefixComment = 1
linkVars=L
sys_language_uid=0
language=en
locale_all = en_EN.UTF-8
xmlprologue = none
}
page = PAGE
page.typeNum = 0
page.bodyTag=<body>
page.10=TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/template.html
workOnSubpart = DOCUMENT
subparts {
CONTENT=COA
CONTENT.10<styles.content.get
}
}
template file:
<!-- ###DOCUMENT### -->
<!-- ###CONTENT### -->CONTENT<!-- ###CONTENT### -->
<!-- ###DOCUMENT### -->

Related

Post HTML code from R to Wordpress

I succesfully put together an RMarkdown file which produces a nice HTML page. You can see the output here: https://www.crazy-geese.at/updates/schedule.html
What I would like to do now is to post the HTML Code to this page on our Wordpress Site: http://www.crazy-geese.at/spielplann-bbl-2018/
So my specific problem is to get the content to the page. I would need to update it regularly and would like to automate it.
Here are some solutions I see:
Update the page directly from R (from RMarkdown?) with the html code (that would be awesome)
Write an external script that does this job (a bash script maybe?)
I'm aware of the packages RWordpress and knit2wp but couldn't figure out how to do it. I also tried iframe but I couldn't get rid of the iframe scrollbars.
Every help would be much appreciated. Thanks!
Using RWordpress works for me using the following code:
if (!require('knitr')) {
install.packages("knitr")
}
if (!require('devtools')) {
install.packages("devtools")
}
if (!require('RWordPress')) {
devtools::install_github(c("duncantl/XMLRPC", "duncantl/RWordPress"))
}
library(RWordPress)
library(knitr)
options(WordpressLogin = c(<user> = '<pwd>'),
WordpressURL = '<blog_url>/xmlrpc.php')
## new post; memorize the returned id
# knit2wp("<Rmd-file>", title = '<title>',
# publish = FALSE, action = "newPost")
## update post
knit2wp("<Rmd-file>", title = '<title>',
publish = FALSE, action = "editPost", postid = <id>)
I typically do some further changes in wordpress's interface, which is why I have publish = FALSE. You can use publish = TRUE if you do not need that.

Angular 4: Updating the view

I'm very new to web-development in general, but I'm trying to build my website and came across the following problem I haven't be able to solve. I'm using angular 4
I have a div highlighting some code in my html file:
<div *ngIf="step1Updated">
<prism-block
[code]="step1"
[language]="'python'">
</prism-block>
{{ step1 }}
</div>
In my typescript file:
step1Updated = false;
step1 = '';
onStep1(fileType: string) {
this.step1 = this.step1service.returnCode(this.language, fileType);
this.step1Updated = true;
}
Now on my html page, when I click from a selection of buttons executing onStep1() with different content, the content within my string interpolation changes, the {{ step1 }}, but the content within my prism-block doesn't. I can see that this is because we need two-way databinding but I've tried to put the [(ngModel)]="step1" two way data binding in the prism-block, div, etc... hoping that it would catch the update and then update the block, same as putting code in [(code)] but all resulted in errors..
any help or advice would be really appreciated!
here you need to load PrismComponent dynamically to update its view.refer my plunker(http://plnkr.co/edit/tEgnnS) code.
onStep1(fileType: string) {
const crf = this.cfR.resolveComponentFactory(PrismComponent);
this.cc.clear();
const cf = this.cc.createComponent(crf);
(<PrismComponent>cf.instance).code = this.step1service.returnCode(this.language, fileType);
}

Error on looping through a RelatedLinks property of dynamic Node in Razor

I have a Razor partial which displays my site navigation:
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var home = CurrentPage.Site();
umbraco.NodeFactory.Node navigationSettingsNode = MySite.Umbraco.NavigationSettings;
dynamic navigationSettings = new umbraco.MacroEngines.DynamicNode(navigationSettingsNode.Id);
var settings = home.Children.Where("DocumentTypeAlias == \"Settings\"").First();
}
#if (navigationSettings.HasValue("topNavigation"))
{
<ul>
dynamic topNavigation = navigationSettings.topNavigation;
var topNavigation2 = settings.topNavigation;
<span>#topNavigation</span>
<span>#topNavigation2</span>
foreach(dynamic item in topNavigation)
{
<li>
#item.caption
</li>
}
</ul>
}
Initially I was looping through topNavigation2 items which worked fine and with no problem.
Now I'm looping through topNavigation items and it throws an error:
Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 'char' does not contain a definition for 'link'
I don't want to use var settings anymore, I want to use only dynamic navigationSettings variable. In order to get the right node of navigationSettings I need to some operation and I don't fancy to paste the same code in every view I want to use it so I want it to be accessible from dll and available to use anywhere.
Also the navigationSettings node in my Umbraco is outside of main content tree so is not a child of Home.
Why isn't it working? Both
dynamic topNavigation = navigationSettings.topNavigation;
var topNavigation2 = settings.topNavigation;
produce the same json result and both are dynamic objects.
How to make it work correctly?
I'm using MVC 5.2.3
It looks like your topNavigation property is a string, and so when you call for each on it, it's iterating through the characters in the string.
Also, don't use NodeFactory, it's deprecated. You should be using IPublishedContent instead.
I'd use the strongly typed content objects instead of dynamic, as a) they're faster, and b) they're easier to work with.
Here's a great article explaining the different ways of getting content: https://24days.in/umbraco-cms/2015/strongly-typed-vs-dynamic-content-access/

making newsletter(HTML) with SpringFramework3

I am sending newsletter like below with Springframework 3.
private void sendMail(Map<String,Object> mailInfo) throws Exception{
JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
mailSender.setHost("smtp.myhost.com");
mailSender.setPort(587);
mailSender.setUsername("email#email.com");
mailSender.setPassword("12345");
MimeMessage msg = mailSender.createMimeMessage();
MimeMessageHelper mHelper = new MimeMessageHelper(msg, true, "UTF-8");
mHelper.setFrom(new InternetAddress(
mailInfo.get("send_mail").toString(), mailInfo.get("send_name").toString()));
mHelper.setTo(new InternetAddress(
mailInfo.get("recv_mail").toString(), mailInfo.get("recv_name").toString()));
mHelper.setText(mailInfo.get("mail_desc").toString(), true);
mHelper.setSubject(mailInfo.get("mail_title").toString());
mailSender.send(msg);
}
In my case value of mail_desc is an HTML(it has css and other resources). Mail goes well, but its CSS and all of images are broken.
I appended to all of src value like below in JSP
function getDomain(){
var DNS = location.href;
DNS = DNS.split('//');
DNS = 'http://' + DNS[1].substr(0,DNS[1].indexOf("/"));
return DNS;
}
So When I print this in browser console it returns localhost:8080/myApp/{image_src}.
However, When I open with gmail it looks quite different. it looks like...
<img src="https://ci5.googleusercontent.com/proxy/FVJ1IBTWmX0l0KPlNQVY_AkDsCL02O2Y_kZS7KACQlnXgfgNvNQvjBKpn9zIdPH84N_r-ulunXvzlMCVUOWsMG1WCjfYUFVX7VpjJ5OV5RdpV2ReZFjM9Yw=s0-d-e1-ft#http://localhost:8080/resources/gtl_portal/images/newsletter/ci.png" alt="ci" class="CToWUd">
Now I got questions like below :
How to implement newsletter in Normal? Where can I find some examples or references?(I think this can solve lots of problem here)
How to change value things looks like. it is quite tricky, since it is embedded in style attribute.:
<td height="50px" style="background:url('/resources/images/newsletter/top_bg.png') repeat-x 0 0;padding:15px">
Thanks a lot :D bb
You cant include your external css like you do normally , but you can prefer the way of wrapping the styles in the inline way (in <head> tag). So something like this,
<style>
.bigFont{
font-size:14px;
}
<style>
<body>
<p class='bigFont' >Hi , i am bigger </p>
</body>
so this looks separate instead adding style attribute to your tags , you can also avoid some code by resusing .
AFAIK , for adding inline images Spring framework has very good documentation. It is supported widely by mail clients, an example,
FileSystemResource res = new FileSystemResource(new File("c:/Sample.jpg"));
helper.addInline("identifier1234", res);
so that you can simply use it as <img src='cid:identifier1234'>.
For advanced templating options you can integrate your web app with Apache velocity, a templating library

Build a RazorEngine template by specifying a layout in the calling code rather than the template?

Using Antaris RazorEngine, given two strings:
a Razor template without a layout specified
<h1>My template</h1>
and a layout in which it should be rendered
<html>RenderBody()</html>
I would like to be able to parse/compile the strings and set the layout in the code performing the parsing. Something like:
ParseWithTemplate(templateAsString, layoutAsString, model, etc.);
How might I implement this ParseWithTemplate(String, String, ...) method?
Background: I'm building a static site generator and want a way to provide a default layout so I don't have to specify it in every single one of my many site pages. It should be possible to override the default if a Layout = "layoutName" is provided in the template.
If you pre-compile the layout template, you should be able to set the Layout directly by casting the template to TemplateBase. If you later specify the Layout in the template markup, this will override the value in the code as you require when the template executes.
ITemplateService templateService = ...;
// Ensure layout template is cached with layoutCacheName
templateService.GetTemplate(layoutAsString, model, layoutCacheName);
ITemplate template = templateService.GetTemplate(templateAsString, model, templateCacheName);
var templateBase = template as TemplateBase;
if (templateBase != null) templateBase.Layout = layoutCacheName;
Though I ultimately decided to switch to RazorMachine for this and many other reasons, here is a hacky fix for anyone who needs it:
var finalHtml = layoutHtml.Replace(#"#RenderBody()", templateHtml);
(Thanks to aviatrix on Github.)
Expanding the of Ryan Norbauer's answer, the easiest way to implement a layout is:
Your _Layout.cshtml with the typical #RenderBody()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
<head>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
Your RazorEngine template MyTemplate.cshtml
#using RazorEngine.Templating
#inherits TemplateBase<myviewmodel>
<h1>Hello People</h1>
<p>#Model</p>
And wherever you call the RazorEngine template:
var TemplateFolderPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "EmailTemplates");
var template = File.ReadAllText(Path.Combine(TemplateFolderPath,"MyTemplate.cshtml"));
var layout = File.ReadAllText(Path.Combine(TemplateFolderPath, "_Layout.cshtml"));
var templateService = new TemplateService();
var templateHtml = templateService.Parse(template, myModel, null, null);
var finalHtml = layout.Replace(#"#RenderBody()", templateHtml);
As you can see is very simple, just place what MyTemplate.cshtml return in #RenderBody()