EllisLab text mark
Advanced Search
1 of 2
1
   
Images in weblog posts - follow-up
Posted: 26 December 2007 12:40 PM   [ Ignore ]
Avatar
Joined: 2007-08-04
289 posts

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

 Signature 

Paul Burton | 16toads Design

 
Posted: 28 December 2007 02:27 AM   [ Ignore ]   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2005-06-30
654 posts

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:

{related_entries id="cf_gallery_relationship"} {!-- noticequotes onlyno curly braces on fieldname! --}

<div>
<
img src="{image_url}" width="{width}" height="{height}" border="0" alt="{title}" title="{title}" />
</
div>

<
h3>{title}</h3>

{caption}

{if allow_comments}
<a href="{id_path=gallery/comments}">{if comment_total == 0}No comments have been submitted yet{/if}{if comment_total == 1}1 person has commented{/if}{if comment_total 1}{comment_total} people have commented{/if}</a>
{/if}

<p>This image has been viewed {views} {if views == 1}time{/if}{if views != 1}times{/if}</p>

{/related_entries} 

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!  rolleyes

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.
smile
Terry

 Signature 

Terry Leigh Britton
http://twitter.com/TerryBritton
http://twitter.com/Terr_ee

Search the web using Terry Leigh Britton to find all kinds of stuff I’m into!
Or use Yasni for Terry Leigh Britton

 
Posted: 28 December 2007 12:21 PM   [ Ignore ]   [ # 2 ]   [ Rating: 0 ]
Avatar
Joined: 2007-08-04
289 posts

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.

 Signature 

Paul Burton | 16toads Design

 
Posted: 29 December 2007 10:35 AM   [ Ignore ]   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2007-08-04
289 posts

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

Worked perfectly.

 Signature 

Paul Burton | 16toads Design

 
Posted: 29 December 2007 01:20 PM   [ Ignore ]   [ # 4 ]   [ Rating: 0 ]
Avatar
Joined: 2005-06-30
654 posts

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

 Signature 

Terry Leigh Britton
http://twitter.com/TerryBritton
http://twitter.com/Terr_ee

Search the web using Terry Leigh Britton to find all kinds of stuff I’m into!
Or use Yasni for Terry Leigh Britton

 
Posted: 29 December 2007 02:01 PM   [ Ignore ]   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2005-06-30
654 posts

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

 Signature 

Terry Leigh Britton
http://twitter.com/TerryBritton
http://twitter.com/Terr_ee

Search the web using Terry Leigh Britton to find all kinds of stuff I’m into!
Or use Yasni for Terry Leigh Britton

 
Posted: 01 January 2008 06:40 PM   [ Ignore ]   [ # 6 ]   [ Rating: 0 ]
Joined: 2003-01-13
38 posts

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.

 Signature 

Blogging on Colorado and national politics, health policy,  business, technology and investing at http://www.BusinessWord.com on pMachine and EE since Jan. 31, 2003.

 
Posted: 01 January 2008 09:08 PM   [ Ignore ]   [ # 7 ]   [ Rating: 0 ]
Avatar
Joined: 2006-03-23
274 posts

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.

 
Posted: 01 January 2008 10:23 PM   [ Ignore ]   [ # 8 ]   [ Rating: 0 ]
Avatar
Joined: 2006-07-18
592 posts

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.

 
Posted: 02 January 2008 04:20 AM   [ Ignore ]   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2005-06-30
654 posts

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

 Signature 

Terry Leigh Britton
http://twitter.com/TerryBritton
http://twitter.com/Terr_ee

Search the web using Terry Leigh Britton to find all kinds of stuff I’m into!
Or use Yasni for Terry Leigh Britton

 
Posted: 02 January 2008 04:07 PM   [ Ignore ]   [ # 10 ]   [ Rating: 0 ]
Joined: 2002-11-01
951 posts
tbritton - 28 December 2007 07:27 AM

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.

 
Posted: 02 January 2008 09:57 PM   [ Ignore ]   [ # 11 ]   [ Rating: 0 ]
Avatar
Joined: 2005-06-30
654 posts

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

Terry

 Signature 

Terry Leigh Britton
http://twitter.com/TerryBritton
http://twitter.com/Terr_ee

Search the web using Terry Leigh Britton to find all kinds of stuff I’m into!
Or use Yasni for Terry Leigh Britton

 
Posted: 17 January 2008 12:13 AM   [ Ignore ]   [ # 12 ]   [ Rating: 0 ]
Avatar
Joined: 2007-07-02
15 posts

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!

 Signature 

How’s your roar? [ Rrr Pro*]

 
Posted: 17 January 2008 02:35 PM   [ Ignore ]   [ # 13 ]   [ Rating: 0 ]
Avatar
Joined: 2005-06-30
654 posts

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

 Signature 

Terry Leigh Britton
http://twitter.com/TerryBritton
http://twitter.com/Terr_ee

Search the web using Terry Leigh Britton to find all kinds of stuff I’m into!
Or use Yasni for Terry Leigh Britton

 
Posted: 23 February 2008 05:24 PM   [ Ignore ]   [ # 14 ]   [ Rating: 0 ]
Joined: 2005-03-25
537 posts

...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:

{exp:weblog:entries weblog="news" limit="15"}
entries tags
...

{related_entries id="gallery"}
   
<div class="gallery">
   <
img src="{image_url}" width="{width}" height="{height}" border="0" alt="{title}" title="{title}" />
   </
div>
   <
h3>{title}</h3>
   
{caption}
{
/related_entries}
more entry tags
{
/exp:weblog:entries} 

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.

{related_entries id="multi-gallery"}
<img src="{thumb_url}" width="{thumb_width}" 
height="{thumb_height}" alt="{title}" />
{/related_entries} 

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.

 Signature 

BKDesign Solutions - Learn XHTML and use   Web Standards to build accessible websites that validate

 
Posted: 14 March 2008 01:52 PM   [ Ignore ]   [ # 15 ]   [ Rating: 0 ]
Avatar
Joined: 2007-11-17
143 posts

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

 
1 of 2
1