EllisLab text mark
Advanced Search
1 of 3
1
2
3
Next
   
Howto: FF Matrix + LG Replace + LG TinyMCE + imgsizer + LG LiveLook
 
AJP
Posted: 17 June 2009 01:03 PM   [ Ignore ]
Avatar
Joined: 2006-01-20
336 posts

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

 Signature 

AJ Penninga
Pretty Squares, LLC - http://www.prettysquares.com
 
AJP
Posted: 17 June 2009 01:12 PM   [ Ignore ]   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2006-01-20
336 posts

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"} 
 Signature 

AJ Penninga
Pretty Squares, LLC - http://www.prettysquares.com
 
mayest
Posted: 17 June 2009 07:00 PM   [ Ignore ]   [ # 2 ]   [ Rating: 0 ]
Joined: 2007-11-20
327 posts

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.

 Signature 

Tim


TVMCalcs.com - New and Improved! Now proudly powered by EE.
 
Sean C. Smith
Posted: 17 June 2009 08:22 PM   [ Ignore ]   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2004-05-13
3805 posts

Excellent screencast - I retweeted it last night.

 Signature 

web: Caffeine Creations twitter @CS_sean
 
bmovie
Posted: 24 June 2009 02:46 PM   [ Ignore ]   [ # 4 ]   [ Rating: 0 ]
Avatar
Joined: 2007-12-04
912 posts

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" }<img src="{image_file}" class="float{image_alignment}" alt="{image_caption}" title="{image_caption}"/>{/if}    
                {/articulo_images}
            {/exp:lg_replace:replacement}
            
            {exp:lg_replace:replacement needle="image_2"}
                {articulo_images}
                {if {row_count} == "2" }<img src="{image_file}" class="float{image_alignment}" alt="{image_caption}" title="{image_caption}"/>{/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
 
AJP
Posted: 24 June 2009 02:50 PM   [ Ignore ]   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2006-01-20
336 posts

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.

 Signature 

AJ Penninga
Pretty Squares, LLC - http://www.prettysquares.com
 
bmovie
Posted: 24 June 2009 06:38 PM   [ Ignore ]   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2007-12-04
912 posts

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}"}
                    <img src="{image_file}" class="float{image_alignment}" alt="{image_caption}" title="{image_caption}"/> 
                {/exp:lg_replace:replacement}
            {/articulo_images}            
            
            
        {/exp:lg_replace:haystack} 

help please! I feel close!
 
AJP
Posted: 24 June 2009 08:24 PM   [ Ignore ]   [ # 7 ]   [ Rating: 0 ]
Avatar
Joined: 2006-01-20
336 posts

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!

 Signature 

AJ Penninga
Pretty Squares, LLC - http://www.prettysquares.com
 
bmovie
Posted: 24 June 2009 09:48 PM   [ Ignore ]   [ # 8 ]   [ Rating: 0 ]
Avatar
Joined: 2007-12-04
912 posts

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

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="{bullet_url}" target="{bullet_target}">{/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="{link_url}" target="{link_target}">{link_name}</a></li>
                        {/articulo_links}
                        </ul>
                    {/exp:lg_replace:replacement}

                    {articulo_images}
                        {exp:lg_replace:replacement needle="image_{row_count}"}
                            <img src="{image_file}" class="float{image_alignment}" alt="{image_caption}" title="{image_caption}"/>
                        {/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!

Image Attachments
body.pngmatrix.pngrender front.png
Click thumbnail to see full-size image
 
AJP
Posted: 24 June 2009 11:13 PM   [ Ignore ]   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2006-01-20
336 posts

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.

 Signature 

AJ Penninga
Pretty Squares, LLC - http://www.prettysquares.com
 
bmovie
Posted: 25 June 2009 09:37 AM   [ Ignore ]   [ # 10 ]   [ Rating: 0 ]
Avatar
Joined: 2007-12-04
912 posts

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 wink

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.
 
AJP
Posted: 25 June 2009 09:45 AM   [ Ignore ]   [ # 11 ]   [ Rating: 0 ]
Avatar
Joined: 2006-01-20
336 posts

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.

 Signature 

AJ Penninga
Pretty Squares, LLC - http://www.prettysquares.com
 
bmovie
Posted: 25 June 2009 10:09 AM   [ Ignore ]   [ # 12 ]   [ Rating: 0 ]
Avatar
Joined: 2007-12-04
912 posts

great! I love too the LG add ons… I was think buy too better meta and publish form… well Great I install TinyMCE wink thanks for your help AJP, we talk later! have a nice day.
 
Joobs
Posted: 18 July 2009 09:22 PM   [ Ignore ]   [ # 13 ]   [ Rating: 0 ]
Joined: 2007-07-04
459 posts

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

<p>Blog Text</p>
<p><img/></p>
<p>Blog Text</p> 

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?
 
44sunsets
Posted: 02 August 2009 11:31 AM   [ Ignore ]   [ # 14 ]   [ Rating: 0 ]
Avatar
Joined: 2007-02-10
41 posts

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.
 
reinvent
Posted: 03 September 2009 01:17 PM   [ Ignore ]   [ # 15 ]   [ Rating: 0 ]
Avatar
Joined: 2009-05-04
93 posts

This is my first EE Site….Sorry for the lame question….

How do I define a file field (As you say: Engine File Field)  in column ONE of the Field Frame Matrix. I do not have the option in the drop down….

Thanks

I am able to define this outside of the matrix on another custom Field…whereas a File Option is available via (File, by Mark Huot (v.3.1.1)) .

But no default Expression File Field
 
1 of 3
1
2
3
Next