Can we add an additional field for Media Picker, giving editors an option to add a class name?
I'm on Umbraco 7.7.2. I'm gonna have a ton of pages where non-technical editors will be uploading images, via media picker or uploaded through the RTE for content nodes.
Is there a clever way we can offer an optional field for each image added to a content? The purpose of the field is to allow editors to write in a class name (i.e. half the images uploaded will need bootstraps img-responsive center-block for branding purposes.
If I should be thinking about an alternative way to go about this, i'm all ears. I just want to reduce an editor from going into code mode of RTE, as much as possible.
Adding extra fields to the existing pickers isn't really doable - you could write your own media picker - lifting most of the code from the umbraco source - but that is probibly a little over kill,
The closest 'other' solution i can think of is using editor styles to wrap the image. I will run through the steps below - but before i do, you should note this won't give you the classes on the image, instead it will wrap it in a span with the classes
I know that might be a showstopper so i thought i would put it up front.
First - either create a new stylesheet or if you already have one for the editor, add a new stylesheet property - by right clicking on the stylesheet and selecting create, this will allow you to create a stylesheet property (for use in the editor) that applied the class.
this doesn't have to hold the styles (although it can) it is just so the RTE knows how to wrap the image.
next add the stylesheet to your RTE control (developer/datatypes)
if this works, then when you are editing content you should be able to see the Image center option in the formats box in the RTE.
When the editor adds an Image to the RTE if they then select the image in the text and then select this option from the formats dropdown, it will apply the styles to the image (as in the code snippet at the top).
Its not ideal, and only really an option if you have control of styles for the site, but it's certainly quicker than creating a new media picker.
the other option i would consider would be maybe using the grid layout to let editors put images into certain places on the page, but again very much dependent on the site, layout and css you are working with.
Kevin you are man. Thank you so much for the good tips. I didn't know we could do that with custom format options in the RTE. I'm gonna play with that when I get a free minute.
I was just driving home last night and thought on the way about something that could solve this process. Would you recommend Archetype as a way to mesh-mash media picker with a text field (for a class name on the embedded image). Or maybe a drop-down of formatting options instead of a text field. Would you consider this as an alternative solution?
thinking about it if i had to do something like that - I might use a macro to insert images, then the editor can pick the image, and then have another text parameter for the class name. you can then control the html in the Macro View Partial.
this is similar to an Archetype way i suppose but - would actually render inside the editor, which might feel more 'natural' to your editors.
Can we add an additional field for Media Picker, giving editors an option to add a class name?
I'm on Umbraco 7.7.2. I'm gonna have a ton of pages where non-technical editors will be uploading images, via media picker or uploaded through the RTE for content nodes.
Is there a clever way we can offer an optional field for each image added to a content? The purpose of the field is to allow editors to write in a class name (i.e. half the images uploaded will need bootstraps
img-responsive center-blockfor branding purposes.If I should be thinking about an alternative way to go about this, i'm all ears. I just want to reduce an editor from going into code mode of RTE, as much as possible.
Thanks!
Hi
Adding extra fields to the existing pickers isn't really doable - you could write your own media picker - lifting most of the code from the umbraco source - but that is probibly a little over kill,
The closest 'other' solution i can think of is using editor styles to wrap the image. I will run through the steps below - but before i do, you should note this won't give you the classes on the image, instead it will wrap it in a span with the classes
I know that might be a showstopper so i thought i would put it up front.
First - either create a new stylesheet or if you already have one for the editor, add a new stylesheet property - by right clicking on the stylesheet and selecting create, this will allow you to create a stylesheet property (for use in the editor) that applied the class.
this doesn't have to hold the styles (although it can) it is just so the RTE knows how to wrap the image.
next add the stylesheet to your RTE control (developer/datatypes)
if this works, then when you are editing content you should be able to see the Image center option in the formats box in the RTE.
When the editor adds an Image to the RTE if they then select the image in the text and then select this option from the formats dropdown, it will apply the styles to the image (as in the code snippet at the top).
Its not ideal, and only really an option if you have control of styles for the site, but it's certainly quicker than creating a new media picker.
the other option i would consider would be maybe using the grid layout to let editors put images into certain places on the page, but again very much dependent on the site, layout and css you are working with.
Kevin you are man. Thank you so much for the good tips. I didn't know we could do that with custom format options in the RTE. I'm gonna play with that when I get a free minute.
I was just driving home last night and thought on the way about something that could solve this process. Would you recommend Archetype as a way to mesh-mash media picker with a text field (for a class name on the embedded image). Or maybe a drop-down of formatting options instead of a text field. Would you consider this as an alternative solution?
Thanks
Yeah,
thinking about it if i had to do something like that - I might use a macro to insert images, then the editor can pick the image, and then have another text parameter for the class name. you can then control the html in the Macro View Partial.
this is similar to an Archetype way i suppose but - would actually render inside the editor, which might feel more 'natural' to your editors.
Kevin
Sounds like a good plan. I'm gonna give this a shot in my development learning, and let you know!
Thanks!
is working on a reply...