Jump to content
MilenKo

Wrapping text around image CKEditor

Recommended Posts

Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup.

In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again? ;)

 

Spoiler

CKEDITOR-inner.png

 

 

Spoiler

CKEDITOR-frontend.png

 

Share this post


Link to post
Share on other sites

Hi,

I do it this way: in /site/modules/InputfieldCKEditor/styles.js I have:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: '1/2 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-2@s site-mar-r-10'} },
 { name: '1/2 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-2@s site-mar-l-10'} },
 { name: '1/3 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-3 site-mar-r-10'} },
 { name: '1/3 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-3 site-mar-l-10'} },
 { name: '1/4 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-4 site-mar-r-10'} },
 { name: '1/4 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-4 site-mar-l-10'} },
 { name: 'center image', element: 'img', attributes: {'class': 'align_center uk-align-center'} },
]);

align_left and similar are for the default I copied over from /wire/modules/Inputfield/InputfieldCKEditor/contents.css

uk-float-left and similar are for UIkit 3

This way I do not have to load the whole UIkit 3 css for CKEditor, instead I write my custom rules for the RTE in order the get what will be seen on the frontend. It is some extra work but there are not too many styles needed to be used in the RTE anyway.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks, @szabesz . Initially I thought it would need some styling for the output, however I was mislead by the appearance of the content inside the editor and thought that I am not doing something properly. Your suggestion seems to be quite easy doable however I should just match the proper classes for bootstrap as I don't use uikit on this project.

  • Like 1

Share this post


Link to post
Share on other sites

Thank @theo . That is what I added to my CSS, however I forgot the fact that CKEditor is not inserting the class automatically so I will have to add the classes using myclass.js approach. Let me see how would that work out,

Share this post


Link to post
Share on other sites

It works perfectly fine now. And yes, @theo it worked with Bootstrap and uikit. Thanks again. I guess I could do the same exercise for styling ordered and unordered lists, block quotes etc.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By picarica
      so hello there i have fiel field type i have lots of stuff there, and also an image i can easily get image from that field using
                                                        
      $options = array('quality' => 85, 'upscaling' => true, 'cropping' => 'north', 'sharpening' => 'medium'); $word = ".png"; // Test if string contains the word foreach($childgames->subor_hry as $file) { if(strpos($file, $word) !== false){ /* $imger = $file->size(473, 266, $options); */ echo $file; /* echo $file->url; */ } } so i get the fiel i tried invoking size on it like the commented out part and it doesnt work i get error Oh snizzle… Error:     Exception: Method Pagefile::size does not exist or is not callable in this context (in
      what am i doing wrong? can you guys help me by all logic this should work
    • By Max Esnée
      Hi,
      When I upload a large(ish) SVG (≈120ko in this case) into an image field, it tends to get stuck at 100% and block the whole website. If I force refresh the admin page, the svg has not been uploaded. The file is correctly copied into the assets folder though. Other svg tends to be uploaded fine albeit I've noticed that pages containing svg images in the admin are very slow to load generally. Other pages using the same template but with jpeg or png images are much faster to load.
      I get the following error in the JS console:

      I develop locally using MAMP on macOS and I'm using Firefox. I'm using the last ProcessWire version (3.0.165).
      I also tested in Chrome and got the same error.
    • By Marvin
      Hello, my name Marvin, i want to ask something. I'm new at processwire, and still learn it, i try yo showing an image, at a table, the image was show, but i can't resize the image
      please HELP
      Here i attach, my code belor
      <?php $num = 1; foreach($pages->get("/files/")->children as $child) { $current = $child === $page ? " class='current'" : ''; $result = $child->images; // $result->width(900); // $result->height(100); foreach($result as $items){ foreach($pages->get($child->name)->files as $file) { // $file = $child->files; // echo $file->name; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$file->httpUrl."'>".$file->name."</a></td><td><img src='".$items->url."'></td></tr>"; } } } ?>  
    • By Bike
      Hello everyone!
      I am new to PW and at this moment there are these issues that I cannot clearly understand:
      1) Image Position
      Previously I used TinyMCE and there I could get an image floating left or right by simply selecting it and pressing the text justify buttons from the menu bar. In CKEditor however it just causes the hole paragraphs content to be aligned which results in code like this and of course the image is not floating that way:
      <p class="xyz" style="text-align:right"><img alt="" src="someimage.jpg" width="1000" /></p> Q: Is it possible to add float to images just by clicking the text align buttons? As far as I figured it out the only way to align images is within the image dialouge which I find is pretty inconvenient.
      2) Image Caption / Figure / Figcaption
      When a title is given to an image it is wrapped inside a figure tag and a figcaption tag is applied. That's fine. But I need the image to be wrapped inside another picture tag for styling reasons (I want to add a shadow png with picture::after). I'd like to end up with this:
      <figure><picture><img alt="" src="someimage.jpg" width="1000" /></picture> <figcaption>Caption there</figcaption> </figure> Q: I think I have to modify the plugins code to achieve it, right? If so does anyone knows the file / location?
      Q: If a figure tag is placed how would I change its position say to another paragraph? Drag & drop just relocates the image leaving the figure tag where it was. How to reposition the whole thing?
      Q: How / where would I enter image description the be shown only in say a lightbox but not alongside the image itself? I thought the textarea provided in the image field could do the job but how to access it from the editor? Even possible?
      Well I hope someone understands and I'd be thankful for a clue of any of these questions.
      ✌️ Bike
       
    • By theoretic
      Hi there! And thanks for Processwire!
      It appears there's a possible bug in Processwire 3.0.170 concerning file and/or image inputfield. Creating such a field results in the following error:

      Fatal Error: Uncaught Error: Call to a member function get() on null
      The inputfield is created however. The closer look reveals a problem at line 60 in wire\modules\Fieldtype\FieldtypeFile\config.php:
      if(!$value) $value = $fieldtype->get('defaultFileExtensions'); Commenting this line removes the problem, but the newly created inputfield requires 'Allowed file extensions' config option to be set (which is rather expectable since i commented the above-cited line of code). Never faced this problem before, hope it can be resolved.
×
×
  • Create New...