I am adding icons with javascript in my admin bar but the icon are displayed with "squares", so I tried adding the style with the icon like this :
$('#wp-admin-bar-root-default').replaceWith('<link rel="stylesheet" id="commentator-font-awesome-css" href=".../css/font-awesome.min.css" type="text/css" media="all" /><i class="fa fa-instagram" aria-hidden="true"></i>');
Any suggestion ?
Step by Step example using FontAwesome:
Including color and custom post types
Step by Step example using FontAwesome:
Including color and custom post types 👍
1 Pick an icon
Goto: http://fontawesome.io/icons/
Pick an icon, I have chosen "fa-flask" for this example.
2 Get the SVG
Goto: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
Find the icon, it will be the name without the fa prefix - in my case, that is "flask.svg".
Click the icon, then click "Raw" in Github
Bring the SVG into Wordpress
Inside your functions.php, where you register your custom post type, add the following snippet:
add_action('init', 'my_init');
function my_init() {
register_post_type('labs', [
'label' => 'Labs',
// .. ect
'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
]);
}
Important notes:
The contents of base64_encode is the copied raw string from Font Awesomes github page.
You need to change two small things within the svg string:
1: Add a fill="black" attribute to the path/s elements - this allows the color to be change by Wordpress.
2: (optional) Change the width and height to 20, as this is the admin width/height size and seems to result it a crisper result.
Related
I'm trying to decrease page loading time. Right now all images which came from Wordpress content are geting "loading: eager". In result all images are downloading immediately all together on the page. So I would like to know is there an option to set up by default "loading: lazy" for all images which come from content of gatsby-source-wordpress.
To show images I'm just using this way:
<div dangerouslySetInnerHTML={{ __html: content }} />
Gatsby v3.14,
NodeJs 12.22.6,
Gatsby-source-wordpress 5.14,
Gatsby-plugin-image 1.14
I think your best chance is customizing the content that is rendering the dangerouslySetInnerHTML or trying gatsby-wpgraphql-inline-images
For the first approach, a library such as html-react-parser may fit your requirements.
Instead of:
<div dangerouslySetInnerHtml={{__html: content}}/>
You will do:
<div>{parse(content, {replace: replaceMedia})}</div>
Where replaceMedia is a function that gets the nodes and replaces them by a custom markup:
const replaceMedia = node => {
if (node.name === 'img') {
console.log("Check the node data:", node)
return <img src={node.attribs.src} loading="lazy" alt="Some alternative text" />
}
};
Test it to check the data inside node and tweak it accordingly. If your images are locally set, you can even use a custom component to return a GatsbyImage.
The second approach will rely on your set up, which has not been provided in the question.
Useful resources:
https://dimitr.im/optimize-loading-images-wordpress-gatsby
https://www.gatsbyjs.com/plugins/gatsby-wpgraphql-inline-images/
https://www.gatsbyjs.com/plugins/gatsby-wpgraphql-inline-images/
I am trying to improve the quality of Wooommerce thumbnails on product page, but with no results. The thumbs are always displayed blurry not matter what I do.
I have tried different plugins like for retina etc, regenerated thumbs, uploaded via ftp new photoshopped 300 dpi imgs and replaced them with the ones which were in the gallery, uploaded bigger imgs, disabled jetpack, played with the different img settings in woocommerce and wordpress (set quality to 100%/scaling etc), put this string into functions.php file add_filter('jpeg_quality', function($arg){return 100;}); and so on, still nothing.
So I think there is some settings that are maybe related to FlexSlider, the slider woocommerce uses. It might be related to Woolentor as well? Using Astra theme + Elementor. I'm clueless.
Here's a link to a product page on my website (eg. check be quiet! logo, blurry in the thumbnails gallery, orginal image is 900x900px): https://gamingaddicted.it/prodotto/handpicked-red-chillies/
Thanks in advance!
You could do it with this code bellow or directly with the customizer on your website. Here is the url with some tips, maybe you should take a look at them. - TIPS HERE
Add this code to your theme's functions.php file and change the width and height as you wish.
/*change thumbnail quality in woocommerce*/
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 600, //change this to edit thumbnail witdth - default 150px
'height' => 600, //change this to edit thumbnail height - default 150px
'crop' => 0,
);
} );
The accepted answer didn't work for me, however the below did, if anyone runs into the same issue like me.
/*Change WC Gallery thumbnail size*/
add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return array(
'width' => 200, // Set WC gallery thumbnail width
'height' => 200, // Set WC gallery thumbnail width
'crop' => 0,
);
} );
The docs are clear on using error styles for form inputs such as text fields. But how do I use the same style on a custom element such as a text label for a file upload button, or any other custom component that might not fit the a pre-defined component?
Edit for clarity: I don't want to just choose a color I like and plop it in my css with an appropriate selector. I want to make sure I'm using the same error color as the theme, whether that's the default, some imported theme, or custom (if custom it's pretty easy, but not DRY, to just use the same value in css).
Specifically, in this use case, I want to limit users to uploading files less than 100MB, and display an error message if they have selected a file larger than this limit. I'd like to display the text in the error style of the configured theme, but from the material-ui docs I can only see how to set error properties of pre-packaged components such as text fields.
So here I have, simplified:
<input
accept="video/*"
id="file-upload-button"
type="file"
onChange={(e) => {this.fileChanged(e);}}
/>
<label htmlFor="file-upload-button">
<Button variant="contained" component="span" color="default">
Browse video
</Button>
<br /><small>(Max size: 100MB)</small>
</label>
where the input tag has display: none applied via a css file. Also,
fileChanged(e) {
let file = e.target.files[0];
let sizeMB = file.size / 2**20;
this.setState({
selectedFile: e.target.files[0],
fileTooLarge: sizeMB > 100
});
}
How do I get the theme's error color to apply it to the "Max Size" message or other element?
3 steps to solve your issue:
You have to inject the theme into your app with the theme provider (apply to v3 MUI, but should be similar with v4 now). See doc.
You can then customize the theme, like such:
const theme = createMuiTheme({
palette: {
error: {
main: "#ff604f"
}
}
}
Finally you can use your custom color by injecting styles into your component with withStyles() (or useStyles() in v4 hook for instance) and create your styles const in your component, example:
const styles = theme => ({
button: {
backgroundColor: theme.palette.error.main,
}
}
Note: using error as a palette variable name will override the
default error color value.
Possible duplicate of:How to add a class with React.js?
You could give an ID and then: getElementById.classList.add("errorClass");
Then if the user uploads the proper size: getElementById.classList.remove("errorClass");
I am an absolute newbie in JS and Ajax,after going through both fancybox and colorbox I'm unable to achieve a slideshow with 'prev' and 'next option to navigate between the iframes that I'm trying to load within my html under banner.
In fancybox the height couldn't be adjusted ( although I tried various options including editing the jquery.fancybox.css directly under .fancybox-wrap with !important ,etc
I was never able to get the prev & next button working although they were under the same folder as the css
the iframe content is a panaromic flash content with (3 different).index html which I've been able to load a within an iframe but when trying to load multiple htmlfiles as slide show or with scroll prev & next option it doesn't work.
bellow is my call:
$(document).ready(function(){
$("a.iframe").fancybox({
'width' : 1000,
'height' : 500,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
<!-- html code here -->
<a class="iframe" href="360/type1/example.html"><img src="images/type1.png" height="100" width="100"/></a>
<a class="iframe" href="360/type2/example.html"><img src="images/type2.png" height="100" width="100"/></a>
</body>
Google Closure Library editor: demo, documentation.
The editable area is an iframe. How can I set the default font of the editable area? Now it is the default font of the browser. I prefer not to put a font tag around the content in the editable area**. That way, I can change the font of my website in the future, without the need to modify every HTML-content written in the editor.
** What I mean by that is something like this:
<font size="2" face="georgia, serif"><b>content</b></font>
I would prefer just this:
<b>content</b>
... and then style the editable area of the editor with the georgia font using CSS. That way, the HTML-content (produced by the editor) in my database wouldn't contain a hard-coded font, so I could change the font in the future.
Edit: maybe I should use a SeamlessField instead of a Field for the editable area?
Once you call makeEditable() on the goog.editor.Field, which creates the iFrame you referenced, the Field fires an event of type goog.editor.Field.EventType.LOAD. If you listen to that event, you can pull out the iFrame and toss in a link element to a CSS stylesheet so you can easily modify the content in your editor.
Here's the equivalent of one of my listeners that should get you on the right track. (I didn't check if the goog.editor.Field was the target of the event, but I assume it is).
some.namespace.Page.prototype.onEditorLoad_ = function(event) {
var editor = /** #type {goog.editor.Field} */ (event.target);
var iFrame = editor.getEditableIframe();
if (iFrame) {
var fieldDomHelper = editor.getEditableDomHelper();
var documentNode =
fieldDomHelper.getFrameContentDocument(iFrame).documentElement;
var head = documentNode.getElementsByTagName(goog.dom.TagName.HEAD)[0];
if (!head) {
head = fieldDomHelper.createDom(goog.dom.TagName.HEAD);
goog.dom.insertChildAt(documentNode, head, 0);
}
fieldDomHelper.appendChild(
head,
fieldDomHelper.createDom(
goog.dom.TagName.LINK,
{ 'href': '/css/myCSS.css', 'rel': 'stylesheet', 'type': 'text/css' }
)
);
}
}
Finally, in that CSS file, you can add whatever styling you want. Such as your font change.