Thread

Hello,

I’d like to simplify a customers ability to add images to their weblogs.

When handing an EE as a (CMS) over to a customer, what is the best proven way to train customers to upload their own images in posts and add style to them?

Generally, I use .floatleft or .floatright css when adding images within a weblog myslef.

My question is this:

Is is possible to add a custom field with images upload and 2 options, floatleft or floatright?

I prefer not using extensions and plugins.

Thanks in advance!

Hello Mobster

I’m not sure there is a “proven” way to train customers to do what you want, it will depend very much on their ability and willingness to learn.

I can’t fault wanting to make it easy for them, so you could do as you suggest: Make two custom fields and in template style the surrounding HTML tags appropriately.

My feeling is that if you are giving a choice of the picture can “go on the left or on the right”, make the field type a list with two items left, right. Or add a third, “middle” perhaps? You could then “test” for what is chosen, and apply a style accordingly.

What’s important is that it is the CSS that defines “where” things will appear (layout), and ExpressionEngine that determines “what” will appear (content).

I add instructions when defining the fields - maximum width in pixels - just to help them to not break the layout, or particular combinations of ExpressionEngine conditionals and CSS styles to handle situations where a user might not put a piece of content and ensure that the layout does something sensible other than falling over in heap.

Hope that helps

Regards

Mark Jackson

Thanks for that Mark!

How to handle the css is the issue.  When I tag my template to display the images I’ll obviously need some if statements set up to handle the custom fields?

<div class="entry">
  /images/products/{segment_3}.png
  <h3>{title}</h3><p> <br />
  <br />
    {if thumb != ""}  {thumb} <br />
 {/if}<br />
    {if img != ""}    {img} {/if}<br />
  <br />
  {summary}<br />
</div>

I need help passing the information from the fields to the template tags I suppose.

Any suggestions there?

Hello Mobster

As your code stands, you’re going to display an image that is at the URL defined by

/images/products/{segment_3}.png

This implies that it is outside of the entry process and will need to be uploaded separately.

Why not make uploading the image part of the posting process? So you define a weblog that has custom fields for title, body, etc, and one for an image URL {picture_url} and one for “position” {{picture_position}. In your template you could then have:

<h3>{title}</h3>
<p>{entry_body}<br />
{if picture}<br />
{picture_url}<br />
{picture_url}<br />
{/if}<br />
{entry_extended}

Your customer then writes an entry, gives it a title, some body text, uploads a file (an image), and tells it whether to display left or right without having to know about CSS or HTML.

Does that help at all? This would be my approach, but it may not be what you want to achieve.

Regards

Mark

Hello Mobster

As your code stands, you’re going to display an image that is at the URL defined by

/images/products/{segment_3}.png

This implies that it is outside of the entry process and will need to be uploaded separately.

Why not make uploading the image part of the posting process? So you define a weblog that has custom fields for title, body, etc, and one for an image URL {picture_url} and one for “position” {{picture_position}. In your template you could then have:

<h3>{title}</h3>
<p>{entry_body}<br />
{if picture}<br />
{picture_url}<br />
{picture_url}<br />
{/if}<br />
{entry_extended}

Your customer then writes an entry, gives it a title, some body text, uploads a file (an image), and tells it whether to display left or right without having to know about CSS or HTML.

Does that help at all? This would be my approach, but it may not be what you want to achieve.

Regards

Mark

Sorry this posting seems to be stripping out some logic that I want you to see. Not sure why.

Try again

<h3>{title}</h3>
<p>{entry_body}<br />
{if picture}<br />
**{picture_url}**<br />
**{picture_url}**<br />
{/if}<br />
{entry_extended}

Nope sorry not sure why