We have a use case where a content editor wants to
right-align an image so text wraps around it and
set the image width so it will scale well in an article.
While the rich text editor allows us to select an image with a right-aligned format, there isn't an option for specifying the image width.
How can I customize the Wagtail "Choose a format" modal to add a new field for image width and use that in the rendered output? I hope to avoid creating additional image formats with possible permutations of image alignment/width since these are two separate properties.
Prior art
See the WordPress Gutenberg image settings UI below for prior art.
Docs: https://docs.wagtail.org/en/stable/advanced_topics/images/changing_rich_text_representation.html#changing-rich-text-representation
# image_formats.py
from wagtail.images.formats import Format, register_image_format
class SubclassedImageFormat(Format):
def image_to_html(self, image, alt_text, extra_attributes=None):
original_html = super().image_to_html(image, alt_text, extra_attributes)
return original_html.replace('class="', 'class="foo')
register_image_format(
SubclassedImageFormat('subclassed_format', 'Subclassed Format', classnames, filter_spec)
)
Related
I am creating a dialog with MUI which contains three types of content whose width is very different.
First, I need to upload an image and in the second content I need to crop it and third I have to be able to add a caption for it. So how do I set the width for the dialog such that even if images of varied dimensions are chosen it is completely shown?
For that dialog, add sx = {{ width:'fitContent' }} and try if that works
In wagtail, I need to make a Struct/Stream Block
There is a dropdown on the top of the block(Image/Video)
If editor choose Image, VideoChooserBlock should be hidden.
And if editor choose Video, ImageChooserBlock should be hidden.
class MyBlock(StruckBlock):
category = ChoiceBlock(choices=(("image", "image"),("video", "video")))
image = ImageChooserBlock()
video = videoChooserBlock()
Here, editor should be able to choose only image or video depending on category.
Any help is appriciated.
Thanks
You may find it useful to review the code of wagtail-link-block which does something similar.
Main files to focus on:
blocks.py for displaying fields conditionally based on a ChoiceBlock
static/link_block/link_block.js and static/link_block/link_block.css to handle the DOM manipulation and styling with JavaScript and CSS
wagtail_hooks.py to insert JS and CSS
I currently have two command buttons in the footer / header facets - I am trying to have images in those buttons.
Using property inspector I am able to add images for these buttons - but they show up very tiny - no matter whatever the size of image.
Is there a way I can adjust the size of this image display in the property inspector or any where else please?
Did you consider styling the Command Buttons or Use Image Link instead
In my existing system Krypton button is been used. I want to display image instead of text in the button. My current Buttonstyle is set as "LowProfile". I am confused about the button style mode in tool kit also. I couldnt find any relevant documents for the ButtonStyle.
So my questions are:
Where can I find the good document/tutorial for the krypton tool kit?
How to display image in the krypton Button?
Image can be added in StateCommon -> Back -> Image -> {Select your image}
Also to visualize the image set Draw to True
Krypton is now open source.
https://github.com/ComponentFactory/Krypton
You can find some examples of KryptonButton in the KryptonExplorer.exe and KryptonButtonExamples.exe demo projects.
Source code for these projects are available here:
https://github.com/ComponentFactory/Krypton/tree/master/Source/Krypton%20Toolkit%20Examples
In these projects, the image is added with Properties, Values, Image, {Select your image}
Otherwise, you can also use: Properties, StateCommon, Back, Image, {Select your image}
The difference between Values and StateCommon seems to be "some padding" and therefore the image is not directly on the border/edge of the button.
How do I specify the default font size for CKEditor. I tried changing contents.css (body -> font-size) and I tried changing config.js (config.fontSize_defaultLabel) without any success. Does anyone know where i should be looking?
You seem to be on the right track with the contents.css file.
Is your problem that the font size while working in the editor is not correct or is it that the font size isn't being carried over to the page where you actually display the content?
As you know, ckeditor/contents.css is the default style sheet that is loaded while working in the editor, but if you use "config.contentsCss" to call another style sheet, contents.css won't be loaded.
You can call multiple style sheets like this:
config.contentsCss = ['/contents.css', '/css/anotherstylesheet.css'];
If the font size isn't being carried over to the actual page display, you'll need to set the font size in the style sheet used for the actual pages, the default font size used in the editor isn't inserted into the content output by the editor.
"config.fontSize_defaultLabel" is a label only, it doesn't have any effect on the content. Normally, when you load the editor, the font size selector will display "Size". If you set "fontSize_defaultLabel", the font size selector will display whatever value you entered.
If you can provide more details about the problem, I'll try to post a more accurate answer.
Be Well,
Joe