I'm using total.js and wanting to add a page-specific CSS link tag to a page's HTML <head> from within a view, rather than coding it into the route's controller.
I've tried to use #(head(css('page.css'))} but that results in a server error. Using #{css('page.css')} prints out the CSS link tag as part of the #{body}. Yet, the #{meta('Page Title')} directive is able to direct its output to the <head> section of the page.
Am I missing something or is it just not possible in this version of total.js?
Try to add #{head('/css/page.css')}.
Related
I'm looking for a way to change the redirect for a page in processwire.
Logging in the admin back end I see this order page
Upon editing:
But the redirect url from header meta I guess still redirects to the previous link. I tried looking in the database and changed it there also but it still keeps it in settings somewhere.
Any ideas where this is?
Seems like you expect the page to redirect via a meta description tag. Meta description is for SEO, to tell search engines what the page is about. If your page has a meta redirect tag - which should look like
<meta http-equiv="refresh" content="0; url=http://example.com/">
it doesn't seem to be edititable via your CMS. Either change it directly in the templates, or add a field for this to the backend and add an output in the template.
I'm currently building a music based website and I want to build something like this template. It uses ajax and deep linking. (And it makes use of the History.js library - please notice how there's no '#' in the URLs.)
The reason I want to use these 'ajaxy' methods (or maybe use the template altogether) is so that when music is playing, it will remain un-interrupted as the user navigates the site.
My worry is that my site wont be crawlable by Google but I think I can modify code in the page source to fix that. If I look at the source code to the template, in the head I see
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
Now if I add this to the head:
<meta name="fragment" content="!">
will that make the site crawlable? Is there other code I need to add on top of this? Or is it just not possible for this template?
I'm following this guide https://developers.google.com/webmasters/ajax-crawling/docs/getting-started, and I'm on step 3. I will of course have to complete the other steps but I don't know I'm heading in the right direction, or heading towards a dead end!
Any help would be very much appreciated. Many thanks in advance.
From what you said it sounds like your site updates the address bar with clean urls as you navigate via ajax. That's good. The next thing is you want to do is make sure those urls work. If you directly go to a url do you see the specific content it represents. And would a crawler also see the correct content without running javascript. Progressive enhancement works well for that. The final thing is you want to do is make sure bots can pick up those urls.
I've not played with the meta tag for ! But it looks like it is only for the home page and you still need to implement the escaped fragment page. Maybe it does support other pages but the article does not cover that.
Here's the code i'm trying to get work which should explain what I'm trying to do.
<script>document.write('<meta property="og:image" content="' + location.pathname.replace(/\.html$/, '.jpg') + '">')</script>
Just trying to edit meta property create an image for the og:image that has the same name of the .html file. So far no luck
Facebook thumbnail images are generated through something like a search engine web-crawler. It follows links and fetches the needed data from the page. But clients like web crawlers and fb-share only see your HTML, not all the resources on a page - namely client-side scripts like javascript & jQuery. That means your script will not be run, and thus the meta tag not created. Instead try a PHP server side implementation like:
http://mylink.com/?ogimage_id=7 calls
<meta property="og:image" content= <?php $path_to_image_dir . "/" $_GET['ogimage_id']
See my answer here Facebook sharer.php, how to have multiple og:image tags?
I have a question about the <img> tag src attribute.
Is it possible to hide the <img> tag src attribute when viewing the source in a browser?
If it is possible, how? Please tel me if you have any reliable sources.
No, it's not possible.
You can set them dynamically with JS, but you can't hide them. You can store them as base64 encoded strings, and then decode them on the fly which will "hide" them from your page's source.
However, this is still utterly pointless as in the end, the browser still makes an HTTP request to fetch the image.
Simply spoken: This is impossible.
You might try to obfuscate your image src attributes (JS, Base64, etc), but for the browser to be able to show an image, you'll always end up exposing the image URI.
Which, in turn, means that everyone who knows their firebug will be able to see where your cute kitteh image comes from.
Alternative:
Generate One-Time URIs for your images (quite expensive).
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.
Is it possible for a single page on a Joomla website to include it's own custom .js and .css files?
I basically would like to add two custom javascript and css files for a particular page. I don't want these files included into any other Joomla pages.
Any suggestions would be appreciated.
Thank you
Try using a custom code extension such as JUMI. It is designed exactly for this purpose.
From the description: With Jumi you can include php, html, javascript scripts into the modules position, articles, category or section descriptions, or into your own custom made component pages.
The solution from Soygul wont result in proper HTML since these statements / includes belong to the HTML header.
Use : http://extensions.joomla.org/extensions/edition/custom-code-in-modules/11936
This plugin allows inserting material into the head section of your Joomla web site.
You can then use the menu assignment functionality to just add that to certain pages.
Its quite easy to write a simple module like that for yourself - but since this seems already available go with that one. If it doesn't fit your needs :
You just need an "empty / hello world" module with these two statements :
( http://docs.joomla.org/Creating_a_Hello_World_Module_for_Joomla_1.5 )
( http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page )
// Add a reference to a Javascript file
// The default path is 'media/system/js/'
JHTML::script($filename, $path, $mootools);
// Add a reference to a CSS file
// The default path is 'media/system/css/'
JHTML::stylesheet($filename, $path);
I'm not a big fan of adding new extensions to Joomla unless absolutely necessary. If you do, make sure it's not on Joomla's list of vulnerable extensions, first. Each third-party extension/plugin you add is just one more potential back door for hackers.
To add your own custom CSS for a page, you can either edit your template's master CSS file, or just create your own and link it to the project. Here's how you'd do that:
First, figure out how your CSS files are being called. The actual file names will surely differ from my example, based upon the template you're using, but let's look at the Joomla SYSTEM template, which is located in templates/system. The index.php file controls everything, so open it up and you'll find this line:
<?php
include dirname(__FILE__).DIRECTORY_SEPARATOR.'component.php';
?>
Open component.php and you'll see some code that looks like this:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
You can see the call to include a CSS file in the 3rd line. All you need to do is add another line calling a CSS file you create. Create a new file called /templates/system/css/custom.css (or whatever you like) and rewrite the code segment in component.php to look like this:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/custom.css" type="text/css" />
Now you can just code out your own CSS in the new custom.css file you created. You can do this with any template system from RocketTheme or YooTheme just as easily. In fact, if you use one of their templates, they probably already have a custom.css file that you can simply add your own code to. Just be aware if you do it that way and then later update the template, you'll lose your code additions. That's why I prefer writing my own file. You can probably do something very similar to include custom JS code, but I tend to avoid JS like the plague, so someone else will have to address how to link out to a custom JS file.