After reading through every single entry in the user guide and forums related to “including an image in weblog post”, I found the answer to “how to” in the last forum entry.

My purpose is simple - give the admin the ability to place a thumbnail image of determined dimensions in a specific place in a weblog post.

The simple (but very hard to find answer): Create a custom field (text) and then upload photo via the weblog edit page you create for the specific weblog entry.  Then from the image browser select the “short name” tag to place image.

Couldn’t be more simple. Or, could it?

I spent hours trying to figure out how to accomplish this (because I am a designer), including messing around with the Gallery and “relationships”. 

The procedure outlined above is not “simple” and is about as far from simple as it can be from a work-flow perspective. 

Question: Why is it not possible to add a single photo from the EE Gallery via the relationship drop menu?  I get the purpose of a “freestanding” gallery, but it seems to me to be a complete waste if it is not possible to integrate individual images in a simple manner.

The Gallery has some very nice features for clients - Batch Upload, image browsing, organization, etc.

Uploading images one at a time for each entry is a pain in the ass.

If utilizing the EE Gallery for the purpose of adding single pictures to weblog posts is not simple (or, impossible) to program, then what other options do I have to get the same functionality - image browsing, organization, batch upload, select single image from drop menu in weblog entry?.

I didn’t find any definitive answers to this question.

What solutions have other people come up with? 
-p

I have succeeded in getting relationships to work in placing photos in my weblog entries, but it took a bit of trial and error.

First, I added a custom field to my publish pages of the kind, “relationship”. cf_gallery_relationship is what I called the custom field. Also, named it Gallery Relationship for the heading appearing on the publish/edit page.

This was not a regular weblog kind of relationship, but specifically a gallery relationship. You have to select the lower radio button, and then assign the specific gallery to this that this relationship will relate to when using this relationship field. I related it to a gallery that I had already uploaded some test images to.

When publishing or editing a post in that particular weblog now containing this new custom field, a drop-down list of the image names in that gallery now existed, and I selected one of the images from that list after giving my post a title and some body text.

(Note 1: When entering the title, the headings for each photo as entered in the gallery appear for you to select among as a drop-down list, letting you title the entry the same as the heading for the photo in the gallery. A nice convenience!)

(Note 2: This relationship field drop-down list apparently provides an image number, perhaps, or some other unique number generated by EE as a related_entries id number for the custom field entry when it is later being used as a variable in your template.)

(Note 3: Now that this is working, I am definitely creating a gallery just for images that I can insert into posts for graphical sweetening, so that my site has more images being used on it! (It is totally image-less currently.) I can see lots of uses for this trick, especially as it makes it so easy to change an image for a particular post or article, selecting from a drop down list of existing pics. Next trick - multiple pictures for one article by creating multiple gallery-relationship fields!)

The article template then needed the gallery image relationship to be put into it for display. After the exp:weblog:entries opening tag, and after the title and body and extended text variable tags, I put in the following code:

No exp:gallery:entries tag, just what you see above! The docs aren’t clear on this, so I naturally assumed you needed an exp:gallery:entries tag, but that clearly didn’t work! 

It is simpler than that, only necessitating the related_entries opening and closing tags! (And, of course, the /exp:weblog:entries closing tag after all of this!) The related_entries id apparently “explains it all” for us that this is a gallery relationship!

I hope that helps you out. This is my first attempt to be helpful in a post! But I just figured this out tonight, and had seen your post, so thought I’d follow up with a reply.

Terry

I greatly appreciate the response Terry!  The only information I could find up to this point was using the {exp:gallery:entries} tag ... and, after spending many hours tweaking code to no avail I relented ... so thank you. 

Follow-up to “Note2” above - I noted this during my unsuccessful trial and error - All I ever got to appear was this “image number”, the image itself never appeared.

I will give your solution a try and report back.

Thank you very much for taking the time to explain your solution Terry.

Worked perfectly.

Great! Glad I could be of help. I probably should add this as a wiki article - you’re right that documentation seems to be lacking for this feature.

Happy coding!

Terry

Ok! I added my first wiki article!

Categories:

  * EE Coding
  * Image Gallery
  * Relationships
  * Tutorials

Gallery Relationships

I hope this helps a bunch of people. Pretty much pasted my post verbatim.

Edit the wiki article if you find some more ideas or need to clear up my vagaries.

Terry

I’m frustrated that I can’t save an image from a stock charting site and then drag it to EE. I can do that with Pages and Word, but not EE. I see lots of images in blogs, and they can’t be this complicated. I’m not interested in posting links to images.

Oldedit,

this is NOT an EE limitation. It’s a limitation inherent in the desktop/server paradigm. Meaning:
- Drag&Drop;in Word (etc.)—> all information is on your computer. (not quite sure what you are referring to with “Pages”).

- (Drag&Drop;) in EE: You need to upload the file from your computer to the server and link that new location in your document.

Problem
If you want something like word functionality you would need both client and server software working together. Though it can be done it is a pain (at the moment). Solutions (I’m aware if) exist in Java (expensive! since you need to certify the program) and Flash (proprietary and a bit tricky to implement on the server side).

Solutions
The best you can do right now are either
- Use an online WYSIWIG solution (such as TinyMCE) that make uploading EASIER (not drag and drop by any means).

- Use a desktop Blog Editor solution such as MarsEdit.

- OR wait a bit and see what kind of new solutions pop up (things are moving in that direction, alas it will take another year or so.

I skimmed rather quickly this thread, but didn’t see this mentioned. I think the easiest way to add a file to a weblog post is to install Mark Huot’s “File” extension. Use that for the image - it is drop dead easy.

Using the file upload link (just beneath the Quicksave button in the Publish and Edit control panels)is very easy. It will insert an image link after you view and select the file you want after uploading it, or it can let you select from files you’ve already uploaded and insert an image link into a text area or text field, conveniently chosen from a drop-down list showing available fields that lets you select which field the image link will be pasted into when you click on the ‘link’ button. (Be careful only to paste into text fields - I accidentally pasted into Mark Huot’s “File” extension field as a miserably failed experiment and had to delete the entry to get rid of the garbage it left behind!) So, in short, the link button is the most useful, IMHO. The uploader will also create pop-up windows code for either the thumbnail or large images.

I’m using the file upload tool to place the thumbnail text into the summary fields, and a gallery relationship drop-down selector field to insert the full-sized images that will be viewed in the article. The gallery relationship field allows for me to utilize the batch-uploading and processing features after I’ve uploaded a bunch of pics into my “batch” folder, creating the full-size, medium and thumbnail images automatically for me to then take advantage of.

Once you understand how to use the (included) image gallery’s features in conjunction with a relationship field aimed at a gallery, the power available “right out of the box” is something to appreciate. And it is pretty easy to use. That and the upload file tool are nice built-in solutions.

The file upload tool is barely discussed in the user guide:

File Upload

Below the Preview, Quick Save, and Submit buttons is a button to open the File Upload Utility. This opens in a pop-up window and allows you to upload files as defined in your File Upload Manager, located at:

Admin > File Upload Preferences.

But after a little exploring and experimenting it is easy to figure out!

Terry

tbritton - 27 December 2007 11:27 PM

I hope that helps you out. This is my first attempt to be helpful in a post! But I just figured this out tonight, and had seen your post, so thought I’d follow up with a reply.

Thank you, thank you, thank you, thank you, thank you, thank you, thank you for this post.

Heh! You’re certainly very welcome! Glad it came at a time you obviously needed it!

Terry

Gallery Relationships.. ow kewl.. who would of thought it could be this easy (everyone would of thought it.. but where where the doc’s?)

Thanks!

Heh - good point!

I just passed my hundredth post and so can add comments to the documentation, so I’ll stick a link to the Gallery Relationships wiki in there. Thanks for reminding me!

[EDIT]: Ok, it is done! Related Entries docs - check comment at bottom![/EDIT]

Terry

...but where are the docs?

Actually the docs are quite clear on this I thought:
Relating entries

Examples:
Gallery:  To show a Gallery Entry within a weblog entry you can do something similar to this:

where gallery is the field name,
The above allows entering one image from a drop down, but
Also can add multiple images using the multi relationship extension that Mark came out with.

Multi gallery is the field name, the img tag repeats for each related entry selected, and gallery code for title and captions can be added.
In this case I can have any number of images included.
And if thumbs wanted use the thumb code.

I would like to place multiple (a varying number, not known at template design time) images in my weblog posts. I would like the author of the post to be able to determine where the images are placed in relation to the text (to the extent that is possible, html limitations).

1. Is there a way for the weblog author to pick from images in a gallery or galleries? Note that the galleries may contain thousands of images, so a drop-down list is not very practical. Something like a folder navigation scheme to find the relevant pictures?

2. Can this somehow be accomplished through the file upload dialog? I noticed that you can pick from already uploaded images, but how do you find gallery folders?

3. Many forum discussions seem to focus on doing this with relationships, but how is this possible when you don’t know how many images are to be included?

Thanks,

/Bo

Note that the galleries may contain thousands of images, so a drop-down list is not very practical. Something like a folder navigation scheme to find the relevant pictures?

If you have thousands of images in one gallery this will be very hard to do. As is showing them. Most have multiple galleries and categories, then it’s easier to both show the gallery and select images for posts.

If using multi gallery, one can set:
Relate weblog entries to gallery entries
sort by /title/date
acending/descending
Limit 25/50/100/250/500/1000
Tho 1,000 isunrealistic lol/
. One can use the code for the gallery in the post, set a category id, and a custom field for limit and use the tags

entry_id_from=“20”
entry_id_to=“40”
limit=“12”
etc..
.gallery tag parameters

Sorry, I didn’t express myself clearly. Thousands of images, in multiple galleries.

However, it is still not clear to me how I can use relationships. I want to select multiple images for a weblog post, maybe as many as 10 or 15, maybe from the same gallery, but sometimes from 10 of 15 different galleries.

How do I set that up? How do I pick images from the galleries at the time I post the weblog entry?

Thanks again,

/Bo

I’ve been looking for exactly the same solution Bo, but not come up with any solutions. I feel EE is severely lacking in this area. There are several ways of handling images, but none of them are a total solution.

I have found MarkHuot’s file module great for adding an a variable number of images to a weblog entry. However it has drawbacks:
- Images must be uploaded from your computer, they can not come from an online gallery such as the gallery module
- No way to add the images into weblog content fields, ie into the body text as img tags

The gallery module is good for uploading and maintaining images, however you’ve uncovered its drawbacks when it comes to incorporating the images into weblog entries.

The built in weblog filemanager is not good at all - difficult to browse a list of more than 10 or 20 pictures, no thumbnails, end up inserting the img tags or urls into the wrong fields.

What I long for is a custom field type that links to the official gallery module.
- It will allow 1 or more images to be linked to a weblog entry (similar to Mark Huot’s File module)
- Initially the custom field will show a browse gallery button, which pops open a gallery thumbnail window.
- - ...from this window you can browse gallery categories and see thumbnails.
- - ...you can click on thumbnails to link them to the weblog entry
- - ...upload new images straight into the gallery
- When you close the popup window the image field on the weblog publish page will have been updated with a row of thumbnails you selected and their filenames and captions

With regards to adding images actually into the body of weblog entries (as img tags):
Using the TinyMCE extension (either LGTinyMCE, or the other one) and bluesin’s TinyMCE image dropdown list (http://expressionengine.com/forums/viewthread/43257/) hack you could quite easily do a simple dropdown list of images. But this would not be suitable for galleries with large numbers of images. Ideally there would be a way of integrating the popup image gallery with TinyMCE. Alternatively a bit of javascript could allow the popup image gallery to append a particular weblog field with a suitably formatted image tag - the same way as the basic EE File Uploader does now.