00:00
372
More
See all Show me
1. ExpressionEngine HowTo: FF Matrix + LG TinyMCE + i…
2 years ago
After a few requests, here's the video for how I used FF Matrix, LG Replace, LG TinyMCE, LG LiveLook, imgsizer and more to accomplish user image/wysiwyg editing in ExpressionEngine.

If you have any questions, Tweet me @ajp.
Or email contact@prettysquares.com

Thanks!

For futher discussion, visit the ExpressionEngine forums:
expressionengine.com/archived_forums/viewthread/120427/

Credits

Likes

See all likes
  • Erik Reagan 2 years ago
    Thanks for taking the time to share this. I like your approach with this. I've been thinking about a way to do something similar with some client projects.

    My only question is where does LG LiveLook fit in this picture for you? You listed it in the description but didn't use it in the video.

    Again, thanks for sharing!
  •  
  • AJ Penninga 2 years ago
    Hey Erik. Yeah, I forgot to put that part in the video. I'll probably be changing the screencast when FF 1.1.3 (or 1.2) comes out.

    Live Look just allows you to preview that exact same template that I show on the front end anyways. Only in the LiveLook tab. What's great about LiveLook is the ability to custom config your URLs for each weblog. In this case LiveLook previews at /index.php/about/{url_title}.

    Thanks!
  •  
  • Sip 2 years ago
    Exactly like what I am experimenting now, FF Matrix, LG Replace and imgsizer.

    However I use FF {row_count} so that I don't have to limit the number of rows/images.
  •  
  • Chad Crowell 2 years ago
    Wow - really great combination of resources to come up with an easy solution. I think I'll have to try and find a way to use this.

    By the way, I was totally going to change my perception of you, right up until you got to naked valentine ;-)
  •  
  • AJ Penninga 2 years ago
    @sip: I'm using {row_count} to match the exact row.

    Are you using {row_count} as part of your needle? And then loop through use lg_replace as needed? that's a great idea.

    v2 of the screencast coming soon (with FF 1.13 updates too).
  •  
  • Sip 2 years ago
    For the needle:
    {exp:lg_replace:haystack needles="{ff_field backspace="1"}image{row_count}|{/ff_field}"}

    The backspace is not yet supported.

    then loop through:
    {ff_field}
    {exp:lg_replace:replacement needle="image{row_count}"}
    code with imgsizer
    {/exp:lg_replace:replacement}
    {/ff_field}
  •  
  • AJ Penninga 2 years ago
    @Sip: Yeah, I just made the changes with respect to the replacement code. Works great!
    Did you add backspace as a parameter into lg_replace?

    If so, brilliant! The only thing I didn't like about my approach was that it was limiting and had lots of code. This certainly helped simplify it.

    I'll be updating it soon as I said.
  •  
  • AJ Penninga 2 years ago
    @Sip: backspace is supported in FF 1.1.2
    I've made all the changes we talked about here. So much simpler, and now unlimited images. Rock!
  •  
  • Ben Carlson 2 years ago
    Thanks a lot AJ! I had been planning on building out something pretty much exactly the same, and this is perfect timing. I'm hoping mine will allow for easy modular layouts for my client, much like Jason S-M talks about here 24ways.org/2008/making-modular-layout-systems
  • Emily* 2 years ago
    Yeah, I am using a similar solution to AJ's here, and when I saw that Jason S-M article I was really pleased because I knew that I'd been thinking about image positioning the right way, and that I'd be able to (let my clients) achieve that with EE.
  •  
  • Richard Angstmann 2 years ago
    Thanks for a great video! This type of solution is something that would solve one of the main issues I still have with CMS's in general.

    I get asked the question "can I place images wherever I want in the body of the page" on a regular basis, and I've always had to limit my clients to placing certain images in certain custom fields.

    My initial comment was going to be about how you still have to specify how many images are "allowed" but it looks as though thats been solved, having read the followup comments :) Excellent.
  •  
  • 44sunsets 2 years ago
    AJ, this is exactly the solution I was looking for. Thank you so much to you and the rest of the EE community. You all rock!
  •  
  • Erik K 2 years ago
    This is fantastic--huge thanks for taking the time to do this and helping me see how the pieces fit together.
  •  
  • pablo Boerr 2 years ago
    simply brilliant I'm gonna test this out real soon. thanks for sharing this with the rest of us.
  •  
  • Emily* 2 years ago
    Nice video presentation AJ. Here is my alternative solution, I must have started using around the same time you published this but its taken me 6 months to write it up!

    Uses Reeposition+Allow EE instead of LG Replace and Textile instead of TinyMCE.

    gradualism.co.uk/articles/make-adding-images-to-ee-entries-safe-and-easy/
  •  
This conversation is missing your voice. Take five seconds to join Vimeo or log in.

Advertisement

About this video

MP4
00:06:12
  • 640x336, 10.29MB
  • Uploaded Tue June 16, 2009
  • Please join or log in to download

Statistics

Date Plays Comments
Totals 4,551 26 15
Feb 14th 1 0 0
Feb 13th 4 0 0
Feb 12th 3 0 0
Feb 11th 4 0 0
Feb 10th 1 0 0
Feb 9th 0 0 0
Feb 8th 2 0 0