6

Ok, let say I have a channel entry that is dynamically being displayed on a page, and I also want to have an image displayed in that text as well, with the text nicely flowing around the image. So far I've been able to put an image at the top by putting the image inside the P tag, and I can float it to get the text to wrap around it, but that only puts the image at the beginning or the end of the text, depending on where I place the image tag in relation to the EE tag that pulls in the channel content.

I would really like to have a few paragraphs of text, and then an image floated nicely to the side with the text flowing around it, and then have more text after that. How would I do that?

To be clear, I know this can be done with a WYSIWYG editor, or by having the content administrator enter an image tag in the midst of the paragraph when they're actually writing the channel entry, but that's not what I'm looking for. I have a file upload channel field that allows an image to be uploaded for that channel entry, and then the template dynamically pulls that image in if they uploaded one.

The only way I can think of to do it would be to have multiple channel fields, and one field would be the portion of text before the image, and the other would be the portion of text after the image, but that feels like an ugly work-around to me. I would think this would be something pretty standard, I just don't know how to do it.

8

You can use jQuery with .insertBefore() or .insertAfter() to accomplish this.

If you want to insert the image after the first paragraph, use something like:

<div class="article">
    {article}
</div>

$('{custom_image_field}').insertAfter('.article p:first-child');

If you want it elsewhere, just adjust your selector (ie: '.article p:first-child').

| improve this answer | |
  • 1
    I love this suggestion. Depending on how much control you wanted to give the end user, you could make the nth-child pseudo-selector a custom field so they had some flexibility with where the image got dropped into the text area. – Brett Burwell Jan 24 '13 at 19:00
  • @BrettBurwell, Very good idea! – Anna_MediaGirl Jan 24 '13 at 19:10
  • Ok, so good suggestions all. As far as add-ons go, I would like to first look at a way to do this with the factory EE install, as my client doesn't have a huge budget. I like Anna_MediaGirl's suggestion, but my only hang up is that my entire "article" is wrapped in a P tag. So let's say I wanted to insert it after the 3rd of 5 paragraphs. I would use the code aboe, with the p:nth-child(3) selector. But if my whole article is only wrapped in a single P tag, that wouldn't work right? Wouldn't each paragraph have to be wrapped in seperate P tags? I hope I'm making sense. Its very early. – hyphen81 Jan 25 '13 at 11:43
  • You don't have to use a <p> tag as the selector. It can be anything you want. You can insert <span class="image"></span> into the article and insert before or after that tag. – Anna_MediaGirl Jan 25 '13 at 16:19
2

I accomplish this all the time with a Matrix field and NSM Transplant. Basically, you upload your images row-by-row in a Matrix field, then insert tokens (like {image_1}, {image_2}, etc) into your content area where you want the images to appear. NSM Transplant then replaces these with your images when rendered on the front-end.

This tutorial video should give you an idea of how to do this. (Some of the add-ons it uses are outdated now, like ED ImageResizer, but you can substitute similar current add-ons with ease.)

| improve this answer | |
2

In addition to the options already listed, Hop Studios has created an "Inject" addon to do exactly what is being asked (just float the inserted element):

http://devot-ee.com/add-ons/hop-inject

| improve this answer | |
0

I've done what you're looking for before with Matrix. One field, with, for example, a column for image, image caption/description and "body paragraph". Basically you just instruct the admin to create a new row each time a new image is being inserted into the body flow. The main complicating factors are that you really should clear floats after each row when rendered on the front end - which doesn't always look pixel-perfect but does prevent your floated images from banging into each other. I have a couple of clients for whom this was the preferred approach. In my case I added a couple other columns that related to the image position (such as left vs right, for example). Perhaps not quite as elegant a solution as you were looking for, but it's less ugly than a bunch of separate custom fields and allows you the same separation of markup from content that you're aiming for.

| improve this answer | |
0

You could whip up a plugin to process the content tag's output and swap the image with a custom "tag" you've embedded in your content. It's basically a find & replace. Something like:

{exp:swapimage img='/path/to/img.jpg'}{content_field}{/exp:swapimage}

In your content you could have:

<p>Some text...</p><swapimage/><p>Some more text...</p>

Check out the article method in this plugin I've been working on this week. It has some replace functions that will show you how to do the swap in a plugin:

https://github.com/Clearbold/ee-toc

| improve this answer | |
0

For simple setups, you can also go vanilla and make it very simple for the end user. Basically, create x image/file fields and divide you body into x textarea/Wysiwyg fields.

  • Image 1
  • Body 1
  • Image 2
  • Body 3
  • Image 3
  • Body 3

Only the first image and body field would be mandatory and shown by default. The other would be collapsed. Then, the end user can upload up to three images and place them exactely where she/he wants by splitting the content of the article into the three body fields.

You could then add custom fields for floating each image left or right, crop it a certain way, etc.

Simple approach, not much margin for error on the client side. Easy to move back into a single field if needed down the road.

| improve this answer | |
0

We've recently released a plugin we had made for this on a project. It's available for free at Devot:ee. Check out String Divide, it might help you.

http://devot-ee.com/add-ons/string-divide

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.