Thread

Hey gang.
I just made a screencast after a request on twitter to detail how I used these add ons to give my client WYSIWYG for text and drop in snippets for images in the content.
It also gives me alot of flexibility to resize, align, cache, etc images they upload too.

In the vimeo comments, we’ve already improved on it.
I’ll be updating the screencast soon with some new changes.

Check it out here. http://vimeo.com/5194268

Here’s the template code used in that screencast:

{exp:weblog:entries weblog="about" limit="1"}

{exp:lg_replace:haystack needles="{cf_images backspace="1"}image_{row_count}|{/cf_images}"}
{embed="embeds/page_header" body_id="aboutus" page_title="{title}" page_intro="{cf_intro}"}

<div id="maincol">
{cf_body}
</div>

{cf_images}
{exp:lg_replace:replacement needle="image_{row_count}"}
{exp:imgsizer:size src="{image}" width="{image_size}" alt="{image_caption}" class="{image_align}"}
{/exp:lg_replace:replacement}
{/cf_images}

{/exp:lg_replace:haystack}

{/exp:weblog:entries}

{embed="embeds/page_footer"}

Excellent AJ! Thanks for doing the video. That gave me some good ideas that will help with a site I’m working on right now.

Excellent screencast - I retweeted it last night.

hi AJP, thanks for this tutorial, great, but I cant get dynamic the image count!

here’s my code:

{exp:lg_replace:haystack needles="image_1|image_2"}
        
            {articulo_body}
            
            {exp:lg_replace:replacement needle="image_1"}
                {articulo_images}
                {if {row_count} == "1" }{image_file}{/if}    
                {/articulo_images}
            {/exp:lg_replace:replacement}
            
            {exp:lg_replace:replacement needle="image_2"}
                {articulo_images}
                {if {row_count} == "2" }{image_file}{/if}    
                {/articulo_images}
            {/exp:lg_replace:replacement}            
        
            
        {/exp:lg_replace:haystack}

works but! just for 2 images… :( help please! the image_{row_count} dont works…

thanks

Look at how we’ve changed the code in the 2nd post in this thread.
Nothing is limited now, it will iterate through for however many rows you have in the Image Matrix.

NEEDLES:
{exp:lg_replace:haystack needles="{cf_images backspace="1"}image_{row_count}|{/cf_images}"}

REPLACEMENT:
{cf_images}
{exp:lg_replace:replacement needle="image_{row_count}"}
{exp:imgsizer:size src="{image}" width="{image_size}" alt="{image_caption}" class="{image_align}"}
{/exp:lg_replace:replacement}
{/cf_images}

We use the matrix field to iterate through first for the needles, and then around the replacement.
Hope this helps.

thanks a lot, now works but I dont understand why still with 2 images! I insert 4 images and put on body:

{image_1}
{image_2}
{image_3}
{image_4}

and just 2, images appear :(

code: (note I remove image resize plugin… for test first simple…)

{exp:lg_replace:haystack needles="{articulo_images backspace="1"}image_{row_count}|{/articulo_images}"}
            
            {articulo_body}

            {articulo_images}
                {exp:lg_replace:replacement needle="image_{row_count}"}
                    {image_file} 
                {/exp:lg_replace:replacement}
            {/articulo_images}            
            
            
        {/exp:lg_replace:haystack}

help please! I feel close!

Just want to make sure of a few things.
1. Make sure you have 4 images in the FF Matrix Row.
2. clear your caches, just to be sure.

Can you attach the rendered markup (html)?

Or if you’d like to PM me admin panel details, I can take a quick look inside.

Thanks!

wow works! I forget clear the cache! 😉 great!!!! thanks AJP just I need image resize plugin… (I think that is easy, I alert you for help me 😊 )

one more thing:

by example I create a bullets and links ff matrix row… with lg replace, works when I insert a “box” of bullets… BUT! i I want insert another box of bullets or links???

see the entire code:

{exp:lg_replace:haystack needles="bullets|links|{articulo_images backspace="1"}image_{row_count}|{/articulo_images}|"}

                    {articulo_body}

                    {exp:lg_replace:replacement needle="bullets"}
                        <ul id="bullets">
                        {articulo_bullets}
                            <li>{if bullet_url != ""}<a href="http://{bullet_url}" target="{bullet_target}" rel="noopener">{/if}{bullet_name}{if bullet_url != ""}</a>{/if}</li>
                        {/articulo_bullets}
                        </ul>                
                    {/exp:lg_replace:replacement}

                    {exp:lg_replace:replacement needle="links"}
                        <ul id="links">
                        {articulo_links}
                            <li><a href="http://{link_url}" target="{link_target}" rel="noopener">{link_name}</a></li>
                        {/articulo_links}
                        </ul>
                    {/exp:lg_replace:replacement}

                    {articulo_images}
                        {exp:lg_replace:replacement needle="image_{row_count}"}
                            {image_file}
                        {/exp:lg_replace:replacement}
                    {/articulo_images}            

        {/exp:lg_replace:haystack}

see the attach please:
on BODY I put {bullets} cool show that box of bullets BUT the question is how show one more box of bullets ... you know {bullets_1) {bullets_2) etc… the same for {links}

I attach the render too…

thanks A LOT!!!! YOU Save my week!

I’m assuming you want to show another list of bulleted links?
I’d think you need a second FF matrix field for bullets_2.

You’re trying to multiple boxes with multiple bullets. Since you can’t nest FF matrix fields within each other (yet), I don’t see this as possible.

This is why I use TinyMCE in my body fields, to give clients the ability to create lists with some formatting on their end, and use the image method here to replace and cache those images.

If I can help out, let me know.

thanks AJP, mmm yeah I see that is not possible… acctually right Iam think on TinyMCE, what TinyMCE is better this? http://leevigraham.com/cms-customisation/expressionengine/lg-tinymce/

please let me know whats is better for install 😉

thanks a lot, Iam searching better options for easy publish, I think that you know a lot about that, that great!

ps: what do you think about Publish Plus of LG… ? I think that I buy it today, seems really cool.

I use LG TinyMCE because, 1. I like Leevi and his add ons are great, and it gives me great control of the extension’s settings.
There is at least one other TinyMCE method, but I don’t think it works the same, as it targets all textareas, or none. With Leevi’s, you can specify which custom fields it targets.

And publish plus is AWESOME. Great for content work flow, especially when combined with LG Live Look.

great! I love too the LG add ons… I was think buy too better meta and publish form… well Great I install TinyMCE 😉 thanks for your help AJP, we talk later! have a nice day.

I am not using tinyMCE, just using a normal XHTML textbox. If I have a post that is like this:

Blog text

{image_1}

Blog Text

if outputs as

Blog Text
<img>
Blog Text

But I really don’t want the image to be in paragraph tags, does anyone have an idea how to change the paragraphs into divs?

AJP you rock, I was wondering how to solve this problem of adding images, and you’ve come to the rescue! It’s all coming together for me now. No need for me to buy the TinyMCE Image Manager plugin now.