Howto: FF Matrix + LG Replace + LG TinyMCE + imgsizer + LG LiveLook

1 of 2

AJP

Posted: 17 June 2009 10:03 AM

[ Ignore ]

Research Assistant

Total Posts: 388

Joined 01-20-2006

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

Profile

AJP

Posted: 17 June 2009 10:12 AM

[ Ignore ] [ # 1 ]

Research Assistant

Total Posts: 388

Joined 01-20-2006

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

Profile

mayest

Posted: 17 June 2009 04:00 PM

[ Ignore ] [ # 2 ]

Research Assistant

Total Posts: 354

Joined 11-20-2007

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.

Profile

Sean C. Smith

Posted: 17 June 2009 05:22 PM

[ Ignore ] [ # 3 ]

Lab Technician

Total Posts: 2312

Joined 05-13-2004

Excellent screencast - I retweeted it last night.

Signature

CreateSean Web Design | EE Forums 4 You ExpressionEngine forum customization
on twitter @createsean I am the poster formally known as The Linguist.

Profile

Bmovie

Posted: 24 June 2009 11:46 AM

[ Ignore ] [ # 4 ]

Research Assistant

Total Posts: 476

Joined 12-04-2007

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

Profile

AJP

Posted: 24 June 2009 11:50 AM

[ Ignore ] [ # 5 ]

Research Assistant

Total Posts: 388

Joined 01-20-2006

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

Profile

Bmovie

Posted: 24 June 2009 03:38 PM

[ Ignore ] [ # 6 ]

Research Assistant

Total Posts: 476

Joined 12-04-2007

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!

Profile

AJP

Posted: 24 June 2009 05:24 PM

[ Ignore ] [ # 7 ]

Research Assistant

Total Posts: 388

Joined 01-20-2006

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

Profile

Bmovie

Posted: 24 June 2009 06:48 PM

[ Ignore ] [ # 8 ]

Research Assistant

Total Posts: 476

Joined 12-04-2007

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="{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

Click thumbnail to see full-size image

Profile

AJP

Posted: 24 June 2009 08:13 PM

[ Ignore ] [ # 9 ]

Research Assistant

Total Posts: 388

Joined 01-20-2006

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

Profile

Bmovie

Posted: 25 June 2009 06:37 AM

[ Ignore ] [ # 10 ]

Research Assistant

Total Posts: 476

Joined 12-04-2007

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.

Profile

AJP

Posted: 25 June 2009 06:45 AM

[ Ignore ] [ # 11 ]

Research Assistant

Total Posts: 388

Joined 01-20-2006

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

Profile

Bmovie

Posted: 25 June 2009 07:09 AM

[ Ignore ] [ # 12 ]

Research Assistant

Total Posts: 476

Joined 12-04-2007

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.

Profile

Joobs

Posted: 18 July 2009 06:22 PM

[ Ignore ] [ # 13 ]

Research Assistant

Total Posts: 403

Joined 07-04-2007

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?

Profile

44sunsets

Posted: 02 August 2009 08:31 AM

[ Ignore ] [ # 14 ]

Grad Student

Total Posts: 47

Joined 02-10-2007

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.

Profile

reinvent

Posted: 03 September 2009 10:17 AM

[ Ignore ] [ # 15 ]

Grad Student

Total Posts: 70

Joined 05-04-2009

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

Profile

AJP

Posted: 03 September 2009 10:25 AM

[ Ignore ] [ # 16 ]

Research Assistant

Total Posts: 388

Joined 01-20-2006

There is no default file upload extension. This is ngen File Field. Search for for it here in the forums. It’s a field frame fieldtype.

Signature

AJ Penninga
Pretty Squares, LLC - http://www.prettysquares.com

Profile

reinvent

Posted: 04 September 2009 11:35 AM

[ Ignore ] [ # 17 ]

Grad Student

Total Posts: 70

Joined 05-04-2009

AJP,

Edited Post By Author: I will try a few things before bothering you….saw a possible problem by re-looking at my question/post….

Kindly

Profile

reinvent

Posted: 04 September 2009 02:41 PM

[ Ignore ] [ # 18 ]

Grad Student

Total Posts: 70

Joined 05-04-2009

Hey AJP, sorry to have to ring in again, maybe you can help me….

Well I am not having any luck. Please keep in mind that this is my first dynamic site…or attempt at one.

I am trying to have the lower block “light-up” if there is info in the matrix and to be “invisible” if nothing is entered in the matrix.

CODE BEFORE

<div id="blogPicture">
     <img src="" alt="" width="600" height="350" id="image" />
          <div id="picture_title">TitleCaption</div>
              <div id="picture_caption">Picture Content goes Here</div>
</div> 

CODE AFTER

{exp:lg_replace:haystack needles="{cf_images backspace="1"}image_{row_count}|{/blogPicture}"}
    <div id="blogPicture">
        {blogPicture}
            {exp:lg_replace:replacement needle="image_{row_count}"}
                <img src="{image}" alt="{title}" width="600" height="350"/>
                <div id="picture_title">{title}</div>
                <div id="picture_caption">{caption}</div>
            {/exp:lg_replace:replacement}
        {/blogPicture}
    </div>             
{/exp:lg_replace:haystack} 

What am I missing here? Seems like it should be easy…but I must be missing something. Thanks for your time and consideration.

Kindly…

Image Attachments

Click thumbnail to see full-size image

Profile

1 of 2

‹‹ Prev_entry next_entry and conditionals Multi Relationships Errors ››

Username		Remember Me?
Password		forgot password?

Post Marker Legend
	New posts	Hot Topic with new posts	New Poll	Moved Topic	Sticky topic
	No new posts	Hot Topic with no new posts	Old Poll	Closed Topic	Announcements

Visitor Statistics
The most visitors ever was 1743, on December 02, 2009 02:47 PM
Total Registered Members:	119539	Total Logged-in Users:	71
Total Topics:	125770	Total Anonymous Users:	44
Total Replies:	661801	Total Guests:	426
Total Posts:	787571