Outputting multiple paragraphs and floating image

[eze102]

Hi - I'm new to pw. Searched forum for answer to this specific issue I'm having, but couldn't find an answer so far.

Here is some markup I'd like to output.

                <div class="col-md-8">

							<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Curabitur hendrerit, leo vitae interdum pretium, tortor risus dapibus tortor, eu suscipit orci leo sed nisl. Integer et ipsum eu nulla auctor mattis sit amet in diam. Vestibulum non ornare arcu. Class aptent taciti sociosqu ad.</p>

							<img class="img-fluid float-sm-right ml-sm-4 mb-3" width="280" src="img/demos/photography/about/about-me-concept.jpg" alt="">

							<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit, leo vitae interdum pretium, tortor risus dapibus tortor, eu suscipit orci leo sed nisl. Integer et ipsum eu nulla auctor mattis sit amet in diam. Vestibulum non ornare arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vitae nunc, viverra nisl eget, dictum eros. Maecenas sit amet iaculis massa. Sed dui tellus, pellentesque non enim eget, cursus sollicitudin tellus. Cras eget varius enim. Aenean ac libero finibus, varius nisi a, cursus magna. <strong>Vestibulum</strong> vitae massa purus. Etiam vulputate ullamcorper diam, a iaculis nulla placerat a. Aenean ac libero finibus, varius nisi a, cursus magna. Vestibulum vitae massa purus. Etiam vulputate ullamcorper diam, a iaculis nulla placerat a.</p>

							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit, leo vitae interdum pretium, tortor risus dapibus tortor, eu suscipit orci leo sed nisl. Integer et ipsum eu nulla auctor mattis sit amet in diam. Vestibulum non ornare arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per incept.</p>

						</div>

I would like to do this with one field, biography. I tried using the CKEditor and putting the markup in their, then inserting the image from the page, but when I insert a new image, the classes on the old one go away.

Can someone help regarding best practices for something like this?

Thank you!

[eze102]

Nevermind - it looks I can use hannacode. Unless there is an even better way...

 

[BillH]

Hanna Code may well be a good approach.

Another option, if there's some way to logically deduce what classes should be added based on how an image is included in CKEditor or the like, would be to use PHP in the template to add the classes.

Or if this was applicable to multiple fields or templates, you could look into writing a textformatter module to apply the classes (not difficult if you start by copying a simple one).

If each image will always be handled in the same way, an option might be to use image tags (https://processwire.com/docs/fields/images/) and then use PHP in the template (or a textformatter) to apply classes based on the tags.

Note that it's probably the CKEditor Advanced Content Filter (ACF) that's stripping out the classes - you could test by turning it off on the Input tab for the field. If it is ACF, then look at Extra Allowed Content (a bit further down on the Input tab). But you probably don't want to be editing the HTML by hand anyway.

[eze102]

Ah, ok. Interesting ideas. The hanna code seems to have worked for now, but I'm going to look more into ACF (didn't know about that!). Thanks!