CKeditor5 by default has image plugins that support toolbar icons which can insert an image by (a) uploading the image and (b) insert an IMG tag into the HTML.
We do not want any capability to upload an image, but we need a simple widget that takes user input and inserts an image tag with attributes (user supplied) including e.g. SRC, HEIGHT, WIDTH, CLASS.
Seems strange that this isn't available in the standard build, have I missed it somehow?
Do we have to write our own plugin?
Custom build your CKeditor here:
https://ckeditor.com/ckeditor-5/online-builder/
Use toolbar item 'imageInsert'
relevant plugins:
Image,
ImageCaption, // adds ability to caption image via the toolbar
ImageInsert,
ImageResize, // this will cause resize handles to appear in the editor, operates by applying CSS to the enclosing <figure> tag
Also useful plugin
LinkImage, // adds link capability when editing an inserted image
Found the relevant doc here
https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/images-inserting.html
Related
I'm very new to Webflow. I am somewhat familiar with CSS and web design concepts.
I downloaded one of the clonable templates to use as a practice:
https://webflow.com/made-in-webflow/website/Spaces-Urbanistic
With this template, I try to replace the logo image on the upper left.
I have a colorful webpage logo and inside the designer, I see all the colors.
When I click on preview, the logo turns into a grayscale image.
Webflow has Effects option that I could enable, but it is currently set to off, for Logo image element as well as all parent nodes up to the body tag.
When I inspect the logo in chrome dev tools, the immediate parent has this CSS:
element.style {
filter: invert(100%)
grayscale(100%)
contrast(128%);
}
My question is, where do those filter parameters are stored in webflow interface, if not under Style->Effects->Filters? Is there any other place I don't yet know about where the above code can be injected?
Thank you,
edit-1: I just noticed this code on top of the main HTML file:
Still, doesn't help me to identify where this code comes from. Thank you,
We're evaluating an upgrade from ckeditor 4 to the new ckeditor 5, but I need to be able to extend the Image plugin/package with some custom elements, e.g. a text input for licensing information about the image, a button/checkbox for toggling the image to be a thumbnail or not etc.
How can I add these custom elements in the image package and write my own javascript code to handle the values from these elements?
The image toolbar is being controlled by the config.image.toolbar property. It accepts names of UI components registered in the editor.ui.components factory. In other words, it works like the main editor toolbar which is configurable via editor.toolbar and you can learn more how to create buttons here: Creating a simple plugin.
I'm using the ACF gallery field to add images into a custom post type. The problem is that in the case of one post I've added around 80 images which means that they all have to load before Masonry is triggered. I thought I'd use lazy load to load the images in as you scroll down the page but that requires for you to know the image dimensions.
I found this https://github.com/okadots/masonry-wp-lazy-load but it turns out that it isn't very secure.
Anybody have any other ideas?
You can use something like imagesLoaded (which is made by the creator of Masonry) to make sure all images are loaded before triggering Masonry.
imagesLoaded in Masonry documentation: http://masonry.desandro.com/appendix.html#imagesloaded
You can use the imagesLoaded plugin, found here: http://imagesloaded.desandro.com/ then each time an image gets loaded you can refresh the layout of the grid, it will look like this:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
each time you add more items to the grid, probably via AJAX, you'll need to execute the lines where you layout masonry
if you are having a hard time with this you can use a plugin ready to use, like this one: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 with this plugin you can have lazy load, you only specify the URLS of your images and the plugin will do the rest, you can configure how many images you want to load on each set
I am using the popup menu in Extension Library like this
<xe:popupMenu id="pop">
<xe:this.treeNodes>
<xe:basicContainerNode image="/vwicn148.gif" label="Container">
<xe:this.children>
<xe:basicLeafNode label="Child" image="/vwicn148.gif"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes></xe:popupMenu>
And it look like this with an image added before the label
As my site is using only "font icons" from FontAwesome I want to display these instead of normal images. how can I do that?
You have 4 options (and they are not pretty):
use a custom renderer as Tim suggested
subclass the control so label is rendered passthrou
lobby the ExtLib team to add new properties
use an XSP.OnLoad script to add the font awesom tags
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.