Forum

Thread tagged as: Question

Adding image with caption anywhere in a textarea

Hello. I want to allow authors to add an image with caption (could be a figure and figcaption or just a div, I don't mind) at any point within an article. It would float left, with the rest of the para running round it, but the author must be able to insert it at a relevant place in their text, and be able to edit both the image and their caption.

I've studied the documentation but can't see how to let an editor insert a div at an unknown point in an article.

Peter Hammarling

Peter Hammarling 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

I've tried perch:blocks but the blocked section is always be output at the position that it is written in the template, which is not what I need.

It's likely I'm missing something but it seems that if, in the template, I have a perch textarea followed by a perch block I cannot choose where to insert the block within the text of the textarea while I am editing, but the block will always be positioned AFTER the text.

Moreover, after testing and adding a block to an edited area, I don't see how how to delete the blocks that I've added from the editing interface, even if I remove all content from them.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Each block has a delete bar to delete it. You don't delete the content to make them disappear.

Blocks is how you do what you want - it's exactly how I do what you are requesting in my own sites - it's not possible to control the markup dumped in by a third party WYSIWYG. You would need to ensure your CSS can control the layout of the text block and image when an image follows the text block.

Peter Hammarling said:

... it seems that if, in the template, I have a perch textarea followed by a perch block I cannot choose where to insert the block within the text of the textarea while I am editing, but the block will always be positioned AFTER the text.

It sounds like you have your image/caption block created, but perhaps you have not created a textarea as a block. With a textarea block, you arrange your items in the order that you wish, example:

textarea block
right-floated image/caption block
textarea block
left-floated image/caption block
textarea block

Aha! Finally I get it, thanks - I didn't realise that the textarea had also to be in a block.

It seems a tiny bit inconsistent for the end user in terms of the editors' UI - on other pages they'll have got used to a single large text area, or in some places the option to "Save and add another" or regions with a 'conditional' image field, but with the blocks solution they'll have to notice the small text at the bottom with the + sign.

Still, it works, and I guess once they get the hang of it ...

Thanks again

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Blocks have been redesigned in Perch 3, I think the UI is more intuitive although it's a fairly complex thing to design as there aren't a lot of other things like that so we can't just rely on what people are already used to.