I am developing a website on my local environment and want to add "Custom HTML" widgets to my website footer and megamenu. I want to be able to add images and links through these custom HTML widgets.
The problem is that I have to hardcode the absolute URL path (e.g. http://localhost/client_projects/hom/site/wp-content/uploads/2018/03/image.png)
When the time arrives to go live I will have to root out and swap all the URLs in my widgets. Not good.
So how do I dynamically link to pages and images in Custom HTML widgets?
You can add dynamic tokens/variables using add_filter.
Add the following to functions.php:
add_filter('widget_text', function($text) {
$upload_dir_array = wp_upload_dir();
$text = str_replace('{{uploads_dir}}', $upload_dir_array['baseurl'], $text);
return $text;
});
Now in your Custom HTML widget, write your URLs as {{uploads_dir}/2018/03/image.png.
Related
I might be asking the wrong question (I'm not a coder), but I'm attempting to paste HTML and the inline stylesheet into the text-side (HTML-side) of the Wordpress Visual Composer to create an email layout, and the finished product of that is the entire stylesheet written out above the un-styled HTML layout, so I'm assuming inline stylesheets are not supported in this composer.
Some back story for clarity, I'm using the plugin 'Download After Email' which only provides the standard Wordpress visual composer in order to create the email a user receives once they 'sign up'. This seemingly limits me to either jazzing up some text a little bit like I was using Microsoft Word (which isn't sufficient for a brand-focused business), or using raw standalone HTML, which isn't really sufficient for a properly formatted template.
Are there any plugins which may assist in adding CSS styling here that will work once it's displayed externally to the website, i.e. in an email browser?
Judging by the image, you have a regular editor but not Visual Composer, and this is very good because this is the only right direction! You cannot create email templates using the constructor (Visual Composer) since creating an email template requires special old school knowledge (Tables, inline styles) and clean markup. I advise you to take a ready-made template and change it to your own.
Example: https://colorlib.com/etc/email-template/3/index.html
What you need to know:
You need to use html tables
You need to use inline css
Use full src to display images (https://yoursite.wp/.../demo.jpg) the link you can get from the media post
Not recommended:
To use css styles in the header if you are interested in Gmail App support:
https://templates.mailchimp.com/resources/email-client-css-support/
Custom fonts
Visual Composer and any other constructor
Addition:
If you can use the shortcode system I recommend creating a mini plugin for you:
plugins/my-custom-emails [Root directory of new plugin]
plugins/my-custom-emails/my-custom-emails.php [Main php file of plugin]
plugins/my-custom-emails/emails/ [Directory for for all your templates]
plugins/my-custom-emails/emails/template1.html [First demo template]
my-custom-emails.php
<?php
/*
Plugin Name: My emails
Description: My custom emails
Version: 0.1.0
*/
define('MYCELS_DIR', plugin_dir_path(__FILE__));
add_shortcode( 'myemails', 'MYCELS_SHORTCODE' );
function MYCELS_SHORTCODE($attrs) {
if(empty($attrs['id'])) {
return 'ID required';
}
$ID = $attrs['id'];
$PATH = MYCELS_DIR . 'emails/'.$ID.'.html';
if(file_exists($PATH)) {
return file_get_contents($PATH);
} else {
return 'File with '. $ID . ' ID not exists';
}
}
template1.html
<div>
Template
</div>
And using:
[myemails id=template1]
Id = template name
If you want something very customisable this plug-in would work,
https://en-gb.wordpress.org/plugins/wp-html-mail/
It’s very good and would recommend!
With this you have full control over CSS and the HTML also comes with templates and has so much more control for what you need!
I am working with angularjs in html 5 mode. Which appears to take control of all href's on the page. But what if I want to have a link to something within the same domain of the app but not actually in the app. An example would be a pdf.
If i do <a href="/pdfurl"> angular will just try to use the html5mode and use the route provider to determine which view should be loaded. But I actually want the browser to go to that page the normal way.
Is the only way to do this is to make a rule with the route provider and have that redirect to the correct page with window.location?
in HTML5 mode, there are three situations in which the A tag is not rewritten:
from the angular docs
Links that contain a target attribute. Example: link
Absolute links that point to a different domain Example: link
Links starting with '/' that lead to a different base path when base is defined Example: link
so your case would be 1. add target="_self"
As of Angular v1.3.0 there is a new rewriteLinks configuration option for the location provider. This switches "hijacking" all the links on the page off:
module.config(function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
});
While disablig this behavior for all links may not be your intention, I'm posting this for others who, like me, want to use $location in html5 mode only to change the URL without affecting all links.
If you don't want Angular to take control of the href. Place a target attribute on the link.
So PDF will by pass the html5mode and the routeProvider and the browser will just go to that url.
Other solution. All links will work normally (reload page). Links marked by ng-href="/path" will play on pushState. Small JS hack help with it.
.config(["$locationProvider", function($locationProvider) {
// hack for html5Mode customization
$('a').each(function(){
$a = $(this);
if ($a.is('[target]') || $a.is('[ng-href]')){
} else {
$a.attr('target', '_self');
}
});
$locationProvider.html5Mode(true);
}])
Is there a way to include a plain html page inside a Play Framework's view template? I have a scenario wherein there is a common view template and in the body of the template, I would like to include certain static html pages. I know that I can include other templates inside a certain template, but I'm not sure if I could include a plain html page?
One option is to just make your static HTML a template, eg, create myStaticPage.scala.html:
<h1>Static page</h1>
<p>This page is static, though it is still a template.</p>
Then your view template, myView.scala.html:
#(staticPage: Html)
<html>
<head>...</head>
<body>#staticPage</body>
</html>
And then in your action that renders the template:
def renderMyStaticPage = Action {
Ok(views.html.myView(views.html.myStaticPage())
}
You just need to make sure that your HTML page escapes any # symbols with ##.
On the other hand, if which HTML page that's being included is more dynamic, then simply load the HTML from the file/database/classloader/whereever it's coming from, eg:
def renderMyStaticPage = Action {
val staticPage: String = // code to load static page here
Ok(views.html.myView(Html(staticPage))
}
You could.
Just put something like that in your routes file:
GET /file controllers.Assets.at(path="/public", file="html/file.html")
Here is a duplicated post: Route to static file in Play! 2.0
My Yii application has a particular section called 'Edit Profile' . It's a pretty data heavy section in the way a lot of data is pulled from db for this one .
However the problem is that I have tab pagination in this section . Because only this section uses tabs on the website I did not include the related CSS/Javascript files in the main layout header .These have been referenced in the view file itself . Because of this the tabs takes time to show up and the tab titles appear as a list first (for a second or two) and then get distributed into tabs with the correct UI . This is of course unacceptable behaviour . Is there any way to selectively include related js/css files into the header tag for this particular view or should I include it in main layhout file even though it won't be used in a lot of other places on the website thus possibly slowing down other pages .
Just specify the position for the file.
In your view where you are including the js or css :
// for js
Yii::app()->clientScript->registerScriptFile('url_of_file',CClientScript::POS_HEAD);
// for css
Yii::app()->clientScript->registerCssFile('url_of_file');
Recommended documentation: registerScriptFile() , and registerCssFile()
You can create your own layout in the layouts folder , where u can include all the required jquery scripts and css. U can then call your layout in the controller.
public function actionDoSomething(){
$this->layout = 'mylayout';
$this->render('myview');
}
I want to wrap a mediawiki site inside another site - using the header.inc and footer.inc files that the rest of the website's html files use.
I'm not familiar with php, is there a 'masterpage' file somewhere I can put them in?
Your best bet would be to create a custom skin, or edit one of the default skins, such as monobook. They control most of the basic presentation code. Here is one short tutorial on creating a custom skin. The files usually live in the /skins/ folder; if you skim through one, you can find where the HTML begins and ends.
You can include another file using the PHP include function, like so:
<html>
...
<body>
<?php
include 'header.inc';
?>
...
For future reference in the LocalSettings.php you can also prevent users from using any other skin.
$wgDefaultSkin = 'myskin';
$wgAllowUserSkin = false;
$wgSkipSkins = array( "chick", "cologneblue", "monobook", "modern", "myskin", "nostalgia", "simple", "standard" );