The Question
How can I add images to a MediaWiki extension in a way that they can be referenced by css files registered as ResourceModules?
The Situation
I'm developing a MediaWiki extension which leverages a third party tool and I'm including a copy of that tool as part of the extension's resources.
The tool has js and css, which I am including like so:
...
"ResourceModules": {
"ext.leaflet": {
"scripts": "ext.leaflet/leaflet.js",
"styles": "ext.leaflet/leaflet.css"
}
},
...
The third party tool also includes an image directory which includes various images referenced by leaflet.css, but I don't know where to put that in a way that MediaWiki will serve it alongside the CSS / JS.
The image url is resolving to {SERVER}/ext.leaflet/images/marker-icon.png
You can put the image assets in an image folder in your extension folder, and reference it in your CSS in a relative fashion.
Take a look at the Echo extension for example:
The image is referenced like this in the css
background-image: url( ../../images/pending.gif );
https://github.com/wikimedia/mediawiki-extensions-Echo/search?q=pending.gif
And stored here:
{SERVER}/extensions/Echo/images
https://github.com/wikimedia/mediawiki-extensions-Echo/tree/master/images
The CSS is registered as ResourceModule on this line
https://github.com/wikimedia/mediawiki-extensions-Echo/blob/97771e3369b7949db242f72551ac6efe803881e5/extension.json#L460
In your JS you could use mw.config.get('wgExtensionAssetsPath') in my case this returns /extensions
Related
I want to use a SVG logo in my woocommerce storefront theme. I can't use the Customizer b/c it won't allow SVG uploads. Is there a way around that restriction?
If not, how would I edit the hook/action to use the SVG?
I see the storefront_site_branding template function in the storefront/inc folder and I tried creating an inc folder in the child theme but apparently the override does not work on files within the inc folder.
If you are using a child-theme you can add this to your functions.php, if you update you themes functions.php it may override during your next patch/update.
I sourced this code from:
https://themeisle.com/blog/add-svg-to-wordpress/
Method 1: Use the SVG Support plugin
If you’re looking for the fastest way to add SVG to WordPress, this is it. We’re going to use the SVG Support plugin, which enables this particular image format and adds support for it to your media library:
The process is simple. You just need to install and activate the plugin as usual, and then you’ll be able to add SVGs to your WordPress site.
WordPress now requires us to have the tag in our SVG files before uploading. Please open your SVG file in any code editor (such as sublime text) and add the following to the very first line of your SVG file and save, so that you don’t encounter security errors:
<?xml version="1.0" encoding="utf-8"?>
However, there are two more settings you might want to change depending on your needs. First off, let’s go to the Settings → SVG Support tab:
How to add SVG to WordPress using SVG Support plugin
Inside, you’ll find two options. The first turns on the plugin’s Advanced Mode, which lets you target your SVGs with CSS. If you don’t want to animate your SVGs, then you can skip this option.
Second, you can also restrict the ability to upload SVGs to administrators only by enabling the Restrict to Administrators? feature. That one’s up to you!
Method 2: Modify your site’s functions.php file
Every WordPress website has its own functions.php file. This essential component includes important functions, classes, and filters. It’s also your ticket to adding SVG support to WordPress through a few lines of code.
To reach this file, you’ll need to access your website via FTP. If you don’t have a client, we recommend using FileZilla. Once you’ve found your FTP credentials and accessed your site, you’ll want to head to your root folder, which is usually either called public_html or named after your site:
The WordPress root folder.
Now, enter the wp-includes folder and look for the functions.php file within. It’s important to note that this is the parent file, while there are also individual functions.php files for each of your themes:
The wp-includes folder.
For this example, we’ll add the code to the parent file. However, you may find the changes are lost when WordPress is updated, so feel free to alternatively add it to your theme-specific functions.php file depending on the approach you’re more comfortable with.
(Editor’s note: Doing this in your theme’s functions file is actually the recommended approach.)
Access the functions.php file now by right-clicking on it and choosing the View/Edit option. This will open it using your default text editor. Now, scroll to the bottom and paste this code snippet there:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
I have an image file in the same directory as my login.vue component (which is where the following code is located). But, when I try this code, the image will not load:
<div background="benjamin-child-17946.jpg" class="login" style="height:100%;">
I'm getting this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
This is strange, because I can see in my terminal that my image is in the same directory as login.vue. I am using webpack to compile. What might be causing this?
Your primary issue is that single file components are compiled and the compiled script is very unlikely to reside in the same directory as the current location as your image. Your second issue is that you are not assigning the background image to your div correctly. You should use CSS.
I would suggest that you make an images directory in the root of your electron application (or assets or static or whatever you want to call it). Then, you can reference files in that directory using the file:// protocol.
Second, I would recommend you define a CSS class and use that. So, in your single file component, define this style section:
<style>
.background {
background: url('file:///images/benjamin-child-17946.jpg') no-repeat center center fixed;
background-size: cover
}
</style>
And on your div just use the class.
<div class="login background">
Finally, you could also use webpack's url-loader to load the file as a dataUrl but I would recommend that as a more advanced exercise and just stick with the simple method for now.
Edit
I created a project from scratch using electron-vue which uses webpack and I did run into an error with the above using the file:// protocol, that I don't run into when not using webpack. With the above template, instead of using
file:///images/benjamin-child-17946.jpg, put the file in the static directory and use /static/benjamin-child-17946.jpg. That allows vue-loader to work properly.
If you are not using electron-vue, then your webpack configuration may be different.
Worth noting that background is not a valid HTML attribute anymore.
Compiled VUE code doesn't match the way the folders are built, assuming you're using the CLI.
You would need to reference the images full URL in its static resource location.
I'm not sure what that would be in this case as I haven't used static resources with the Vue CLI yet.
I have the following code in my stylesheet:
body
{
margin: 1cm 3cm 1cm;
background-image:url("bg.png");
background-position:center top;
background-repeat:no-repeat;
}
But the background isn't found on the server. I have tested this code with just a basic html page and it does work, there must be something that isn't allowing it within the Phalcon framework.
Possibly the file location of the image? I have it in the same folder as the html file.
Yes, I believe that the location of your file is "changing", I mean, when you access a page in your Phalcon application, all your server side includes will take as the current directory the path of your main bootstrap file (the main index.php file path), and for client side the browser will always think that the action executed (like www.myapp.com/users/login-form/) is actually a existent directory structure on your server (so the browser will try the load your background in www.myapp.com/users/login-form/bg.png).
That's why Phalcon offers many ways to deliver html assets to solve not only this problem but also make your application future proof (what if you need to move all your images, CSS and JS to a CDN server?), and here it is:
You could either use an assets manager(more advanced) or simply a view helper which can produce all assets URLs needed based on your url service configurations. Your application should have a valid URLs configuration by setting the desired base URI (for URLs that leads to Phalcon controllers) and your desired static URI (for URLs that leads to CSS files, images, etc), more info about this can be found here.
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.
I want to use custom css/js. I have moved these to the server. But the drupal page starts with a section. how do I add the custom css/js to my drupal site page. I have admin and just need to know what to do to get this included on the page. Please send exact steps as I am totally new to drupal. Thanks
"Custom CSS and JavaScript files" module allows to specify two folders, one for CSS and one for JS where the stylesheets and javascripts files are located respectively.
The module creates two sub-folders under your files folder:
files/customcssjs/css
files/customcssjs/js
Indeed, it's depend on your task, what css and js files should do, and adding these in custom module (drupal_add_js, drupal_add_css) or custom theme (info file, preprocess in template.php or directly in page-XXX.tpl.php and so on).