Forum
Perch3 Blog Redactor Image Insert
I have installed Perch 3 and the blog addon, and I am experiencing an issue with image insertion when using Redactor. When I select an image from the assets list to insert, a piece of code is inserted into the editor that looks like the following:
[cms:asset 11]
When the article is viewed or previewed, the image does display, however this is the problem: Previously with Perch2 and redactor we saw a preview of the image in the editor itself. Clicking the image allowed it to be dynamically resized and aligned. Is there a way to get these options to display again with the new Perch installation?
I have included my template code below in case I have missed something out.
<article class="h-entry">
<h1>
<a href="<perch:blog id="postURL" type="hidden" />" rel="bookmark" class="p-name">
<perch:blog id="postTitle" type="text" label="Title" required="true" size="xl autowidth" order="1" />
</a>
</h1>
<p class="meta">
<time class="dt-published" datetime="<perch:blog id="postDateTime" type="date" label="Date" time="true" format="Y-m-d H:i:s" divider-before="Publishing" />">
<perch:blog id="postDateTime" type="date" time="true" format="%d %B %Y" />
</time>
<perch:if exists="authorGivenName">
by <span class="p-author h-card"><perch:blog id="authorGivenName" type="hidden" /> <perch:blog id="authorFamilyName" type="hidden" /></span>
</perch:if>
</p>
<perch:if exists="image">
<div class="image_container">
<img src="<perch:blog id="image" type="image" width="640" height="480" crop="true" label="Image" order="4" bucket="news" />" alt="<perch:blog id="postTitle" />" />
<perch:blog id="image" type="image" label="Video thumbnail image" width="400" height="400" suppress="true" />
</div>
</perch:if>
<div class="description e-content">
<perch:blog id="postDescHTML" type="textarea" label="Post" torder="2" editor="redactor" html="true" size="xxl autowidth" required="true" />
</div>
</article>
<perch:blog id="excerpt" type="textarea" label="Excerpt" markdown="false" order="3" suppress="true" size="s" help="For video posts, please leave this field blank." />
<perch:blog id="album" type="albumlist" label="Blog Gallery" suppress="true" order="5" />
<img src="<perch:content id="main_image" type="image" bucket="blog" label="Article image" width="640" height="480" />" alt="<perch:content id="alt" type="text" label="Alt text" />"
Cheers!
You can change the image by adding attributes to the shortcode, such as
Note that these relate to attributes in the perch:image tag here: https://docs.grabaperch.com/templates/field-types/image/
Using the shortcode means you get to take advantage of assets, rather than re-uploading each time you need to use the same image. The trade off is that there's no preview in the editor. If that's non-negotiable, you can always replace the built-in redactor plugin as mentioned here: https://forum.grabaperch.com/forum/03-27-2017-perch-3-redactor
I've noticed an issue, however. As the assets shortcode provider forces use of the 'tag' output, it is impossible to add other image attributes, such as align. Attributes width, height, title, class and alt are supported.
Drew, can you please change the image field type to pass on any extra attributes passed in, such as align or style?
Thanks!
Thanks for the tip, it's good to know. Unfortunately it's not an ideal solution for us as it goes against our practice of simplifying article creation for our clients as much as possible. For most of our clients the use and customisation of wordpress style shortcodes is more than they will be willing to learn ;)
I think for now we will go with the route of using old redactor, although I hope the above can be addressed in later releases.