Jump to content
eze102

Outputting multiple paragraphs and floating image

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

  • 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.

×
×
  • Create New...