Thread

This has historically been a difficult process too explain to clients/users.
There are many plugins/workrounds that have evolved over time, but the new File Manger sounded like it was going to make the whole process easier.
I have been trying out 2.0 and found that it it is in fact harder than it was under 1.6 and the plugins etc. aren’t available for 2.0 yet.

I am not sure if this is a feature request or just a prayer. This is how I would like to see the process of adding one or more images to an entry somewhere in the text flow.

1. Click image link with the cursor where you want the image.
2. Pop-up with a browse to file to upload.
3. Clean the filename to be url friendly.
4. Automatically resize the image to the maximum size set in upload preferences (if larger).
5. Create a thumbnail (and put it in a separate thumbs folder for easy gallery type display options) automatically sized to that set in the preferences.
6. Insert the image code for the thumbnail and a link to the larger version where the cursor is positioned and then close the pop-up.

It would be nice if the code for the Image button could be configurable to allow custom setups of thumbnail alignment (left or right), where to open the full sized image (pop-up, lightbox, or gallery page etc.)

I have just let my wife have a go at publishing an item to her blog (a new install of 2.0).
She has been using 1.6 up to now.
After exploring/searching around for a while she asked me how to:

Re-name an image that had already been uploaded.
Save a smaller version of an image, but keep the original.
Link to a larger version of a small image.
Place some images on the left and others on the right in the text flow.
Save what I’ve done so far without it being public.

These are pretty standard things that many users would want to do, but can’t.

She did try selecting the help button at the top of the page, but got confused when it opened in the same tab and after following some links she lost her way getting back to her publish page.

I accept that some of those things are not possible in 1.6 either, but I had hoped 2.0 would be an improvement on 1.6.

Re-name an image that had already been uploaded.
Save a smaller version of an image, but keep the original.
Link to a larger version of a small image.
Place some images on the left and others on the right in the text flow.
Save what I’ve done so far without it being public.

Those steps are logical and reasonable. It’s interesting that not one of the major open source CMS apps, let alone EE, makes the image handling process easy.

Even WP 2.9, which has plenty of options and is much easier to use, handles some of those options in a complex and convoluted manner (plenty of extra steps, no links to thumbnails, etc.).

This would be an opportunity for EE to improve on the status quo.

I thought it might be useful to anyone with the same requirements as me to see how I achieve it currently.

Install the following addons:
FieldFrame
nGen field type
Imagesizer
LG Replace

Create a custom field for your images, I tend to name my custom fields using this pattern, cf-(field group)-(name of field), so in this example it is cf-std-images.

Change the ‘Default Text Formatting for This Field’ to None before you change the Field Type, as it remembers this setting even though you can’t see or change it after. This will stop EE wrapping HTML tags around the generated field code.

Change the Field Type to FF Matrix and then set up the matrix as shown in the screenshot below.

I add an extra HTML button to the Weblog Administration -> Default HTML Buttons to make it easier for users. See below.

The screenshot of an edit page shows how it all comes together.

This is a simplified example of the code required in the template to make it all work:

{exp:weblog:entries weblog="blog"}
    
{exp:lg_replace:haystack needles="{cf-std-images backspace="1"}image_{row_count}|{/cf-std-images}"}
<!-- Now loop through the matrix and create the individual links -->
{cf-std-images}
{exp:lg_replace:replacement needle="image_{row_count}"}
<a href="http://{image}">{exp:imgsizer:size src="{image}" auto="{size}" title="{caption}" alt="{caption}" class="{align}"}</a>
{/exp:lg_replace:replacement}
{/cf-std-images}
<!-- End of loop -->

<h2>{title}</h2>
<p>{cf-std-body}<!--Custom field containing the body text--></p>

<p>{/exp:lg_replace:haystack}                     <br />
    <br />
{/exp:weblog:entries}

This article was inspired from several threads on the ExpressionEngine forums, in particular one from AJP that includes a video tutorial on a similar process, but he uses TinyMCE.
I have just tried to get it down to the bare minimum setup that you can use as a start point.

Slight tangent but what way are you removing Quick Save, Preview and changing Update to Publish?

I hide the EE upload file button with CSS always, as nGen field is always used to upload a file.

Publish Improve from Hop Studios.
I also use the Low CP by Lodewijk Schutte for other Control Panel ‘cleaning’.

I thought it might be useful to anyone with the same requirements as me to see how I achieve it currently.

I cannot be the only one who thinks that whole process is an enormous number of hoops to jump through to do something that should be built in to EE 2.0 in the first place.

Look at that effort. A bunch of add-ons, extra configurations, hacks etc.

Couldn’t agree more grramps…

Those steps are logical and reasonable. It’s interesting that not one of the major open source CMS apps, let alone EE, makes the image handling process easy.

Have you seen how Silverstripe does it? TinyMCE is baked into the CMS and they have a custom image/file management panel that slides in from the right hand side of the screen on demand; it can be launched from either a WYSIWYG field or a standalone image / file field. Very nicely done.

For 1.x I’ve been using MX Universal Editor, which uses TinyMCE and Tinybrowser for integrated WYSIWG and image/file management. I had a few problems setting it up but overall it works very well.

Has anyone tried out “Channel Images” by devdemon?

lhttp://www.devdemon.com/store/detail/channel_images

This look like a neat solution, though no support for 2.0 yet.

I looked at “Channel Images” but it still doesn’t allow individual images to be placed in the text flow by the author at the time of publishing. Which I think is a common request, especially if you post longer items with several paragraphs in them and multiple images.

You could achieve the same result as “Channel Images” with my suggestion and you wouldn’t need LG Replace and the template code would be a bit simpler.

But “Channel Images” does package it all up in an easy way to implement.

I just used this method for my site. Even though it was complicated to set up, it is fiendishly elegant in its results. I am impressed, Mr Frost!

I am now off to donate to all the extension programmers.

Hi all,

Is it possible to have 2 lg_replace haystacks within the Weblog entries tag?  I am trying to create a page that will have images (and downloadable documents at the end of the article).  I created a custom field called “page_downloads” which is an FF Matrix field type.  This field is made up of the File (an nGen File Field), and a simple description (Text).  My code is below:

{exp:weblog:entries weblog="site_pages" limit="1" disable="trackbacks|comments"}
<h1>{title}</h1>

{exp:lg_replace:haystack needles="{page_images}image_{row_count}|{/page_images}"}
    {page_images}    
        {exp:lg_replace:replacement needle="image_{row_count}"}

{if {align} == "inline"}
            {exp:imgsizer:size src="{image}" auto="{size}" title="{caption}" alt="{caption}" style="padding:8px; margin: 8px;border: 1px solid #999999;"}
{if:else}
            {exp:imgsizer:size src="{image}" auto="{size}" title="{caption}" alt="{caption}" style="padding:8px; margin: 8px;border: 1px solid #999999;float:{align}"}
{/if}  

        {/exp:lg_replace:replacement}
    {/page_images}
{/exp:lg_replace:haystack} 

{exp:lg_replace:haystack needles="{page_downloads}file_{row_count}|{/page_downloads}"}
    {page_downloads}    
        {exp:lg_replace:replacement needle="file_{row_count}"}
            <a href="http://{file}" title="{description}">{description}</a>
        {/exp:lg_replace:replacement}
    {/page_downloads}
{/exp:lg_replace:haystack} 

{page_content}

{/exp:weblog:entries}

As you can see, I am trying to replace the images first, and then replace the download links.  However, when I view the page, I only see the tags {image_1}, {image_2}, {file_1} etc, and not the actual images and links. 

Any ideas?

Thanks in advance,

Ross

I’m a bit pushed for time, but a quick look seems to show 2 separate haystacks and I’m not sure that’s allowed.
Try reading the original post from Leevi about LG replace

Heya,

It doesn’t look like it is possible to do this, i.e., have 2 haystacks in a weblog entries tag.  As a workaround, I just used lg_replace for the images, and simply inserted my links at the end of my text.  It would be nice it it were possible to replace say images and links in a field.

It would be nice if I could do:

  {image_1} here is a {link_1} to the application form.

and then replace the {image_1} and {link_1} tags using lg_replace…

Thanks again