How do I add a style to a Template Value Image

Using TinyMCE if I Add/Edit a graphic to a body of text, the dialogue allows me to specify a CSS style to it, for example to set a top margin. However, I can't access the MCE dialogue for a TV image.

Our ModX setup has a fair number of partial page (small) Templates which consist of template variables, say, which support a News Headline, News Blurb, and a Graphic associated with that news item. The MCE editor is available to add text, and if required, to add a graphic within that block of text. If I were adding such a graphic I have the full TinyMCE dialogue available.

However, the Template Variable also contains an input area which is only supported by the TinyMCE's browser, and not the full MCE editor dialogue which is very rich and allows CSS styles to be entered. Does anyone know how this type of image dialogue can be interfaced in such a way that A CSS style can be entered?

Whenever I explore one of these partial page templates with Chrome or Firefox's Inspector, it shows me CSS Styles that are specified for these graphics and yet I can't locate any ModX element or resource that specifies these styles. They're not coming from a CSS stylesheet.

Any insight would be very much appreciated.

Thanks ... Sam

Hi which TinyMCE extra are you using? Try to avoid the old one.

I'm not sure exactly what you mean. If you're trying to insert an image into the TinyMCE editor directly, you don't need to use a TV, just link directly to where the image is stored.

Also an image TV would only store the uri to that same stored image, so you shouldn't be trying to link to a TV from a RTE. Apologies if I've completely misunderstood.

RE:samg

Whenever I explore one of these partial page templates with Chrome or Firefox's Inspector, it shows me CSS Styles that are specified for these graphics and yet I can't locate any ModX element or resource that specifies these styles. They're not coming from a CSS stylesheet.

Template variable that takes in plain old text (image location) cannot be enhanced by TinyMCE.

Check the Resource MODX Template to add or edit existing image classes.

I'am using the extra TinyMCE Rich Text Editor by John Peca and when inserting an image in a TV with RTE I can add style to the image.



Do you need more CSS styling options?

Quote from: muzzstick at Dec 08, 2016, 09:02 PM

Hi which TinyMCE extra are you using? Try to avoid the old one.

I'm not sure exactly what you mean. If you're trying to insert an image into the TinyMCE editor directly, you don't need to use a TV, just link directly to where the image is stored.

Also an image TV would only store the uri to that same stored image, so you shouldn't be trying to link to a TV from a RTE. Apologies if I've completely misunderstood.

Muzzstick, I don't know where to find the MCE version. I can tell you that the developer installed it a couple months ago with the ModX Revo 2.51 upgrade.

I looked through many of the ModX elements, especially the templates and, template variables and can't find anything that specifies a CSS style that would apply to the TV images. The best I can do to explain this would be to tell you that each resource that contains a news item (title, blurb and image) is supported by a small template. That template does not contain any php coding or CSS styles that I can see. It contains 2 TVs, one for the image (for which I need to modify the style, if it had one), and one TV for the blurb of that news item. The latter is supported by TinyMCE and therefore has the full toolbar which would allow me to do an edit/insert of an image AND its associated style. However, the former TV is only the image and is driven by the MCE browser and not the MCE Editor toolbar.

I'm going to try to post here a screenshot of the template's TV tab. That may help.

Thanks ... Sam

Quote from: donshakespeare at Dec 08, 2016, 09:50 PM

RE:samg

Whenever I explore one of these partial page templates with Chrome or Firefox's Inspector, it shows me CSS Styles that are specified for these graphics and yet I can't locate any ModX element or resource that specifies these styles. They're not coming from a CSS stylesheet.

Template variable that takes in plain old text (image location) cannot be enhanced by TinyMCE.

Check the Resource MODX Template to add or edit existing image classes.

Donshakespeare, thanks for responding. Please see the screenshot of the template's TV tab I uploaded to "Muzzstick" above. I don't really understand your answer. I looked at what I thought was the "Resource MODX Template" and can't find any style coding unless it's hidden in one of the TV tabs (e.g. Properties, Input Options, Output Options, etc ).

Quote from: donquicky at Dec 09, 2016, 06:30 AM

I'am using the extra TinyMCE Rich Text Editor by John Peca and when inserting an image in a TV with RTE I can add style to the image.



Do you need more CSS styling options?

Donquicky, if you want, please look at my responses above. My template has two template variables, the second of which is supported by the MCE dialogue you displayed above. That template variable is text and IS supported by MCE and does have the styles dialogue you showed me. However, the template variable that is only an image is not supported by MCE (as I understand things) and is only supported by an MCE browser which doesn't include such a dialogue. If it does I sure can't find it, and yet the image has an inline style associated with it somewhere. I can see those styles in the Chrome or Firebug inspector.

Thanks for your response ... Sam

Sam, could it be a workaround for you to add another TV where you put styling code in it? Assuming you want to add different styling to different images. When you have the same styling to all images you provide by the TV you can add styling by setting the type to image in the output options of the TV. [ed. note: donquicky last edited this post 9 years, 9 months ago.]

Quote from: donquicky at Dec 10, 2016, 05:34 PM

Sam, could it be a workaround for you to add another TV where you put styling code in it? Assuming you want to add different styling to different images. When you have the same styling to all images you provide by the TV you can add styling by setting the type to image in the output options of the TV.

It's possible that I could add an alternative way of adding the image. I suppose I'm being a bit stubborn but the image TV I showed you in my screenshot does work for various sized images. Each image has its own "margin-top" specification and I don't know where that's coming from.

If you go to this URL and look at any of the 4 images in the right sidebar with the equivalent of Firebug or Chrome's Inspector you'll see that they have an inline style specified with a margin-top that's different for each of the images. That's what I'm trying figure out as to where that style is coming from.

staging.edlawcenter.org

Thanks for your interest "donquicky" .... Sam

Hi Sam,

I looked in the inspector and as far as I can see these style has been generated by JQuery script loaded in the edlaw.js script.



Could that be the cause?