How to use image tags or variables in a news story.

[Esstee]

I'm not sure which it woulc be called but here is my plan.
as a solution to image management I spent the better part of the day
putting together a total image upload, editing placement solution using
a flurry of addons.


I am at the point were I need to have a way to place pre determined
variables in my main Text field ex: img1 or img2 or img 3 etc.

each one of these variables or tags are already set.

to help explain my cause here is a screen shot, as you can see I want to
preload the images, assign the alignement and place a caption if necessary.
the use the img1 img2 and img3 tags to place the images wherever in the
text. I tried direct <field: custom_whatever> directly in the story but that
doesn't work.

[Esstee]

To answer my own post, I found this thread I don't know if it will work or not
so I will test it, but as a reference and to hopefully avoid unecessary replies
heres what I found.

Parahead

If you do which to be able to place the picture somewhere in your newstext at submission time, but you don´t like to give full HTML control to your submitters, you can use another technique, which is similar to the BB tags. You create an Multipart Upload field and use that at your submission page. Adding the code below to the top of your style that you use gives you the freedom of placing an [image] tag somewhere in your "News Text"-field and that will be replaced with an IMG-tag pointing to the Multipart image you have uploaded/selected.

Code: Select all

<PerlCode>
$MP_FieldName = "CustomField_NameOfNewsImageField";
$Text =~ s!\[image\]!'<IMG SRC="' . $fieldDB{$MP_FieldName}->{http} . '/' . ${$MP_FieldName} . '">'!ge;
</PerlCode>

Change the NameOfNewsImageField-part to what you have called the Multipart field. Of course this example can be extended to also allow additional IMG-tag attributes, like ALT, BORDER and stuff, but I will not go into how to do that...

[Esstee]

Okay this worked nicely, I modified the code as follows, now I would like to
include the radio button results to align the image as well. I was thinking of
using a secondary $MP_FieldName to catch the image alignement field
<Field: Custom_img2_alignment> and then how can I get the radio button
data into the variable?

the radio button would produce the following CSS code for alignement:

Code: Select all

<span class="floatimgleft">img goes here</span>
<span class="floatimgcenter">img goes here</span>
<span class="floatimgright">img goes here</span>


Currently I obtain the following with the bbcode script:

Code: Select all

<IMG SRC="http://www.mysite.com/imgdata/news/article_images/draft.gif">

I want to achieve this:

Code: Select all

<span class="floatimgleft"><img src="/www/phpthmb/phpThumb.php?src=http://www.mysite.com/imgdata/news/article_images/draft.gif&zc=1&bg=F5F3EF&far&w=235&h=160" border="0"></span>

Here is my code thus far:

Code: Select all

<PerlCode>
$MP_FieldName = "CustomField_Text_image1";
$Text =~ s!\[img1\]!'<IMG SRC="' . $fieldDB{$MP_FieldName}->{http} . '/' . ${$MP_FieldName} . '">'!ge;
</PerlCode>

Can someone help me out?

[SrNupsen]

I really don't see the point of all this custom perl code

You are aware that you can put directly in your news style:

Code: Select all

<span class="floatimg<Field: Custom_img2_alignment>">img goes here</span>

which would translate directly to:

Code: Select all

<span class="floatimgleft">img goes here</span>

if Custom_img2_alignment is "left"

Code: Select all

<span class="floatimgcenter">img goes here</span>

if "center"

Code: Select all

<span class="floatimgright">img goes here</span> 

if "left"


Now, your radio button has 3 values: left, right, center.


Simpler?

Also, check out the Anne Rice addon for on-the-fly replacement. There's no need to learn perl to use Coranto when somebody else allready learned it for you. Seems to me you're thinking too complicated

SrNupsen

[Esstee]

SrNupsen

First off thanks for the response.

Well I knew that I could place those tags in the style, but if I did doen't this
mean that I need to place those images in a fixed location in the layout?

the whole purpose of my approach is to place img1, img2 etc. anywheres
along the article or publication as needed.

Unless I am totally missing something here "in which case I would not be suprized"

[SrNupsen]

Ok well in that case you need the Anne Rice addon. It allows you to replace a with b in the text field, so you can:

1. Set up the fields needed (like you've done in your screenshot: img1, img2, img3, img1_caption, img2_caption etc.)

2. Set up Anne Rice to replace any occurence of [img1] (or whichever alias you choose) with the whole HTML code for displaying image 1- here's an example of what that HTML code might be:

Code: Select all

<span class="floatimg<Field: Custom_img1_alignment>"><img src="<Field: CustomField: Custom_img1>"></span>

3. Do the same for img2 and img3


A bonus tip is to check out the annoying notice addon too - it displays a custom notice on top of every screen, to those users you select. I use it to link to a page I wrote about how to submit articles (it virtually says "Click <a href="tutorial.html">here</a> to learn how to submit articles.") Makes things fool proof for your submitters

SrNupsen

[Esstee]

Well anne rice sounds fantastic!

I thought it was only a text based word glossary and so I didn't bother
because writting <field: xxx> in the Text input field would be useless.
But it sounds like this addon would greatly simply things

I will definately use that instead.

Along this line, I have been poking about looking for the variables or
tags for the radio button have you any idea what those are or where I could
find a reference? as this point I can't tell if its a custom field feature or
a default coranto one. In either case I don't quite know how to call that
field of equivalent field.

[Parahead]

Along this line, I have been poking about looking for the variables or
tags for the radio button have you any idea what those are or where I could
find a reference? as this point I can't tell if its a custom field feature or
a default coranto one. In either case I don't quite know how to call that
field of equivalent field.

Am I completely missunderstanding your problem or maybe are you totaly missing the "Field Type" dropdown box with different selections when you create a new field at the Edit News Fields page? Radio Button is one of the options there... Or have you created a Radio Button field and don't know how to use it in a style? Just use the same approach: <Field: CustomField_NameOfField>? I fail to see what you have problems with, sorry?

[Esstee]

Well I think your right, I have no idea really.

I want to setup a conditional where, depending on my radio button data
it would return option 1, 2 or 3 (class alignement tags in this case)

I was thinking of generating these conditions from the radio buttons:
Left ,center or right to produce output. * holding head

hmmm. I'm now convinced the anne rice addon will help replace the img
tags, those tags will vary depending on weither there is caption in the
field or not and finally that last decision will once again be ajusted
depending on the alignment chosen.


I think I have the Caption field condition okay, this code is to hopefully
place an image in a table with a caption underneath, the caption will
wrap according to the table size determined by the image:

Code: Select all

<If: Field: CustomField_img_caption1>
<table width="5"  border="0" cellpadding="0" cellspacing="0" class="floatimgleft">
  <tr>
    <td width="5" nowrap><FilePath: CustomField_Text_image1></td>
  </tr>
  <tr>
    <td><div align="justify" class="newsroom_update">
      <Field: CustomField_img_caption1></div></td>
  </tr>
</table>

<If: Else>
<table width="5"  border="0" cellpadding="0" cellspacing="0" class="floatimgleft">
  <tr>
    <td width="5" nowrap><FilePath: CustomField_Text_image1></td>
  </tr>
</table>


Now these tables need to be aligned with css according to the radio button.
then finally the output results would have to replace the [img1] tag in
the Text field, can anne rice replace a word with this much code?

[Parahead]

I was thinking of generating these conditions from the radio buttons:
Left ,center or right to produce output. * holding head

SrNupsen gave you an example above, use that? Specify the radiobutton value as left|center|right and just place the radiobutton tag in the right position in your style...

Code: Select all

<table width="5"  border="0" cellpadding="0" cellspacing="0" class="floatimg<Field: CustomField_RadioButtonField">

[Esstee]

I will follow that model

furthermore anne rice is not redering my fields, they still show as <field: xxx>
in the article. I was under the impression that anne rice would allow to
replace [img1] with <img src="<field: custom_my_field_here>"class="floatimg">

?

[SrNupsen]

Did you set Anne Rice to work on the correct field?

[Esstee]

hmmm I think so.

I set it to work in Text. But now that you mention this was I suppose to
enable it in the other fields involved as well ex:

... custom_article image1> and so forth?

[Esstee]

Parahead

Sinve I beleive you wrote this code I wanted to ask you, what changes would
I make with this to produce:

Code: Select all

/web/imgdir/misc/test.jpg

instead of

Code: Select all

http://www.mysite.com/web/imgdir/test.jpg

because my thumbnail script looses performance when it goes out with a
http path vs. an internal one.

The script I'm using is this one:

Code: Select all

<PerlCode>
$MP_FieldName = "CustomField_Text_image1";
$Text =~ s!\[img1\]!'<IMG SRC="' . $fieldDB{$MP_FieldName}->{http} . '/' . ${$MP_FieldName} . '">'!ge;
</PerlCode>

[Lumberjack]

You should probably do something like

Code: Select all

$Text =~ s{http://www.mysite.com}{};