I'm trying to produce modular webpack bundles, I'd like to put my TS files on the folders where I would use those specific scripts and then transcript them to the public folder.
Example: the blade 'index.blade.php' and 'index.ts' are in resources/views/register/client.
The blade would have a tag <script src="{{asset('assets/js/register/client/index.js')}}"> </script> to import the webpack-generated bundle 'index.js'.
I think this way my resources would be more organized but I can't find a way to do this nor a better solution.
I am working with Vue.js 2 and Laravel and have been trying to load a video from a local folder of my project without success.
Vue-loader plugin is correctly installed and added in my webpack.config.js as specified on the docs: https://vue-loader.vuejs.org/guide/#manual-setup
I have tried the most simple way.
<template>
<div>
<video autoplay muted loop id="myVideo">
<source src="/storage/videos/landing.mp4" type="video/mp4" />
</video>
</div>
</template>
I have also tried with a different approach as suggested on another stackoverflow question by dinamically updating the src attribute when the component is mounted.
<template>
<div>
<video ref="videoRef" src="" autoplay muted loop id="myVideo"></video>
</div>
</template>
<script>
export default {
mounted: function() {
this.$refs.videoRef.src =
"/storage/videos/landing.mp4";
}
};
</script>
None of those have worked tho.
Im quite sure the problem lies in Vue not resolving the video route properly since I have tried to use a dummy video link from the web and it is working absolutely fine.
Firefox is also giving me some clues.
However, Im not sure about what the problem is or how to solve it. Thanks in advance.
PS: I have triple checked the route specified and it definitely exists in my project.
Either you load your video with an es module import, your loader has to be able to import mp4, and you put that in the src
import video from 'path/to/video/a.mp4'
and in your component you do
<video :src="video">
PS make sure that the imported video is then defined in your data function.
Or you can use it like your doing with src="path/to/folder" and try to understand where that path is pointing at through your network tab, and put the video in the right folder based on that.
In my custom Joomla 3 extension I am using Bootstrap 2.3.2 for the front-end. I noticed that the default Joomla template protostar overwrites default Bootstrap classes which is not what I would like. Is there a way to load my stylesheet after the template's stylesheets so they overwrite any common rules may exist?
Try something like this,
This will add the css at your component calling time inside the component HTML section . Keep in mind it will not add the css at head section but for sure it will appear after the template css
$stylelink = '<link rel="stylesheet" href="../css/css.css" />';
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
Hope it works..
We are trying to use CKEditor as a Widget for Vignette, when we try to specify a content css outside the environment of CKEditor such as:
"CKEDITOR.config.contentsCss = 'http://lvhost:27110/CKEditorbk/my.css';"
doesn't work, but when we specify a content css included in the war where we have our deployment of ckeditor such as:
CKEDITOR.config.contentsCss = 'http://lvhost:27110/CKEditor/ckeditor/my.css';
It's working as we expected. Isn't possible to specify a css outside "CKEditor.basepath"?
In fact you can't because CKEditor path scope is anything within a folder named ckeditor.
However you could have your custom css outside the CKeditor's ckeditor by replicating the same folder structure, that is /js/CUSTOM_CKEDITOR/ckeditor. I've done so when I wrote a plugin for CKeditor.
I have a custom css at /js/CUSTOM_CKEDITOR/ckeditor/plugins/my_plugin/css/custom.css. And in my /js/CUSTOM_CKEDITOR/ckeditor/config.js I used:
CKEDITOR.config.contentsCss = CKEDITOR.plugins.getPath( 'my_plugin' ) + 'css/custom.css';
Works sweet :)
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.