...
| Info |
|---|
These Bootstrap table styles can be used individually or combined as needed to enhance the presentation of tabular data in your web application. Additionally, you can customize these styles further by using custom CSS to achieve the desired look and feel for your tables while maintaining responsiveness and consistency |
Inline Images
It is recommended that you use Paragraph Bundles when dealing with content that has images, as your page’s layout will be more consistent. However, you do have the ability to upload inline images directly inside of CKEditor to add alongside body text.
Uploading Inline Images
Available in Text blocks that load the CKEditor
Click on the Image button in the toolbar.
Looks like a photo.
You will be prompted to upload an image file.
Images must be smaller than 5 MB
Alternative text field is required
Align field is available to set how text wraps around the image
Stylings and margins for image alignment will be improved in future CFW3 releases
You can make basic changes to an uploaded image by either double-clicking or right-clicking on the image to bring up the Image Properties modal.
Available properties in this modal are very limited and you will not have access to certain fields (width, height, class) as in CFW2.
Inline images uploaded in this manner are added to the files managed by Drupal
Images are uploaded to an /inline-images directory on your website
| Note |
|---|
When uploading an Inline image, CKEditor will add these attributes: These attributes are how Drupal ‘knows’ if a file should be Temporary or Permanent. Temporary files are removed with an automatic cron job. If you remove these attributes, the image will be marked Temporary and will still be available until Drupal deletes your image with the next cron. To check if a file is Temporary or Permanent, check for it on the |
Inline Image Placement
Hover over the image in the editor to locate the move handle found in the upper left corner of the image itself.
Your cursor will change to a move icon
Click, drag, and release the cursor to your desired location alongside your body text
Resizing Inline Images
For the best results, it is recommended that your image is already saved at your desired size before you upload. However, you are able to resize your image in the editor.
Hover over the image in the editor to locate the resize handle found in the lower corner of the image itself.
Your cursor will change to a resize icon
Click, drag, and release the handle to your desired dimensions.
The modal Image Properties popup for an image does not have width and height fields available due to a Drupal 9 limitation
Any specific image dimensions must be made directly in the HTML source
Aligning Inline Images
Double-click or right-click on the image to bring up an Image Properties modal.
Select one of the Align options: None, Left, Center, Right
Stylings and margins for image alignment will be improved in future CFW3 releases
Offsite Images
If you are embedding an image that has not been uploaded via CKEditor as above, you will not have the benefit of CKEditor’s image properties and features. This is due to Drupal 9’s CKEditor file management integration.
You will not see any image handles, nor be able to bring up Image Properties modal.
All edits to the width, height, and placement must be made inside the source HTML itself. An example of an offsite image might be an image for a logo that isn’t hosted on your website, or an image that was uploaded on a separate webpage of your website.
However, you do have basic alignment options available for these types of images with Formatting Styles.
Click on the image in the editor so it is highlighted
In the CKEditor toolbar, click on the Styles pulldown menu
Choose one of the available Object styles for the image
Responsive Image
Image - Left Aligned
Image - Right Aligned
Inline Files
You do have the ability to upload inline files directly inside of CKEditor to add alongside body text.
Uploading Inline Files
Available in Text blocks that load the CKEditor
Click on the File button in the toolbar.
Looks like a paperclip.
You will be prompted to upload a file.
Files must be smaller than 15 MB
Allowed types: pdf doc docx xls xlsx zip csv ppt pptx
The Title field is only used for the advisory title of the link to the file
Title is not the link text that will be used inside the editor
Clicking Save will insert a link to the file inside of the editor
The inserted link will use the name of the file as its text by default
Editing this link text can be tricky, as Drupal wants to keep a relationship to the file that was uploaded.
If you want to change this text, it is recommended that you do so in the HTML source.
If you want to use specific text for the file link, highlight the desired link text in the editor you want to link before uploading the file.
Then follow the steps above
The text you highlighted should now be linked to the file you uploaded
Inline files uploaded in this manner are added to the files managed by Drupal
Files are uploaded to an /inline-files directory on your website
| Note |
|---|
When uploading an inline file, CKEditor will add these attributes: These attributes are how Drupal ‘knows’ if a file should be Temporary or Permanent. Temporary files are removed with an automatic cron job. If you remove these attributes, the image will be marked Temporary and will still be available until Drupal deletes your image with the next cron. To check if a file is Temporary or Permanent, check for it on the |
| Info |
|---|
To remove the file icon that displays next to the file link, remove the css class for the file icon from the |