I am new to Umbraco, and just discovered that the Image editor (the one that is included in selectable editors for content rows) does not provide a way to enter a CSS class. This is surprising, considering that it is pretty standard these days to use Bootstrap classes to style images (img-responsive, for example). NOTE: I had planned to add screen shots of this; however, I've been given a message that I cannot do this until I earn 10 something-or-other-points. THIS NOT HELPFUL TO NEW MEMBERS!
While I understand that I can set a class within the Umbraco UI on the containing column div, this is not ideal. I also understand that I could use the Rich Text Editor, but this seems to be overkill for a column that is intended to contain images only.
What I would like to do is modify the existing editor to allow users to enter CSS classes, but I cannot find it.
Has anyone made this modification to your own implementation of Umbraco, and if so, could you guide me to how I could do this?
The image picker just stores the id of the image, it's up to you how you render it, if the classes are the same for all of the images in the column, you can just assign the class in the view/partial that renders the images.
If you want to have different classes for each image, rather than modifying the built in image picker, best practice is to create a new property editor. There is a tutorial on this here: https://our.umbraco.org/documentation/tutorials/Creating-a-Property-Editor/. Modifying the built in one will cause you problems if you ever upgrade Umbraco (your changes will be overwritten). But a custom property editor will be unaffected, and you can also use it on other Umbraco sites that you build!
Related
I am in the brainstorming phase of a website and trying to select how to write my CSS. The website will support two languages. One language is latin based, think French, and the other is not, think Arabic. Arabic is rtl language. Also, that means menus text are going to change along with other elements. For example if I have a menu button with "Who are we", it must be translated to the other language.
Do I need to define two separate CSS files and pick one based on region/or user selection? Or is there a better way to approach this?
Also, when it comes to changing menu text, do I change only these fields or the entire HTML? Or it depends on the amount of text needs to be changed per HTML page?
The way I do it, in vanilla JS, is I make a copy of each text element for each language and add language class to it(so I can query select it later). Make a html selector for languages. From JS I add class "hide" to all elements belonging to unselected languages. All CSS that class hide contains is display:none. Frameworks, like Angular, contain more elaborate solutions, but for JS this one makes due.
For react you can use npm install i18next react-i18next --save. This solution will leave you with much cleaner view template since there you are just going to name every text field and then in code add to each field its possible translations. As margins, alignments and rest of css goes, usually you don´t even have to touch it, translated text is usually quite similar so if there are breaking differences go with individual solutions. For example, since Arabic is written from right to left, add class with text-align: right; when detecting Arabic.
I'm looking to find a way to show an image in some various 2sxc drop-down controls. The image would help visualize some style guides. The most obvious example would be where we have a drop-down that gives the user the ability to select a few different heading styles. Variances in heading styles are often much more complex than h1,h2,h3,h4 (also some projects could have upwards of 15 heading styles) and if we could give the end-user a visual representation of how each drop-down might alter the view, I think this would go a long ways to help end users managing content.
This gets a little complex because while something like content types and views already have an image thumbnail, in a more dynamic content type with more flexible data entities, the end result could vary significantly.
I think drop-downs are the most common use case for a image representation because drop-downs or bools often have the largest change in final view code.
I don't think there is currently a way to do something like that unless you want to build your own custom input controls (which I do think is possible). A useful alternative is the Notes field for your Content-Type field. This is WYSIWYG and as of v10+, is also visible in the content editor's UI. So you can include a separate reference page link right there. We do this all the time lately. For example, we often use Bootstrap Buttons and Alerts and most sites have these in customized colors, so we include a link to a page (opens in new window/tab) that shows them what the various choices will look like.
Note that in 2sxc 9 and 10 you can create custom input types. It's fairly difficult in V9 and V10 will have a different API (because it's using WebComponents now). It's still not final and not documented, but that would be an option. If it's really urgent you can contact us through 2sxc.org
I am having difficulty navigating to different MXML pages in my Flex application. I checked some other questions on SO about it but they seemed to be to do with tab navigation.
I am trying to navigate from one MXML page to another via Actionscript code. How is this possible?
Cheers
Edit:
I am a real beginner in Flex and I worked out that I actually needed to use States, and have now discovered how to use them. Thanks for your help.
You don't navigate between MXML pages. MXMLs are not pages to begin with. Instead they are components, that are displayed in the application. So if you want to change the current display, then you need to remove the already added components, and add others that should be displayed now.
There are different approaches to do this. The very raw way of manually removing elements is rarely used, instead there are two main methods: ViewStacks and display states. Display states should be used when there are not many different changes in a view, for example when you click a checkbox that adds new options to an existing formular. If you want to change the whole displayed content (this does not have to be the whole application content though, think in components instead), you can use ViewStacks.
ViewStacks are like a stack of paper, where each paper reflects a single view. So if you want to display something else, you move the new view to the top, hiding all others below. Many components, including TabNavigators, are just ViewStacks with an additional menu to select the view that should be displayed. But you can also just use a ViewStack and manually change to what you want to show.
Flex is not sidebased like html.
You have to instantiate or remove classes, components or all this stuff.
i would use the states.
You can register handler to buttons and swap the state.
Then you are able to instatiate or remove components via the tsates.
Which flex version dou you use? The management of the states are changing between flex3 and flex4
Assume, you have one app with two content areas, home and gallery. First you have to create these two areas with project->new->component and named there related.
After that, you instanciate both components in your app.
Define two states, home and gallery and swap these with a button or two.
set the propert excludefrom or include with the name of the states. finally, you have an app with two content areas, but you never swap pages, you instanciate or remove components in runtime.
br
Frank
BR
Frank
I'm new to QT, and am trying to figure out the best means of creating a WYSIWYG editor widget for a custom markup language that displays simple text, images, and links. I need to be able to propagate changes from the WYSIWYG editor to the custom markup representation.
As a concrete example of the problem domain, imagine that the custom markup might have a "player" tag which contains a player name and a team name. The markup could look like this:
Last week, <player id="1234"><name>Aaron Rodgers</name><team>Packers</team></player> threw a pass.
This text would display in the editor as:
Last week, Aaron Rodgers of the Packers threw a pass.
The player name and the team name would be editable directly within the editor in standard WYSIWYG fashion, so that my users do not have to learn any markup. Also, when the player name is moused-over, a details pop-up will appear about that player, and similarly for the team.
With that long introduction, I'm trying to figure out where to start with QT. It seems that the most logical option would be the Rich Text API using a QTextDocument. This approach seems less than ideal given the limitations of a QTextDocument:
I can't figure out how to capture navigation events from clicking on links.
Following links on click seems to only be enabled when the QTextEdit is readonly.
Custom objects that implement QTextObjectInterface are ignored in copy-and-paste operations
Any HTML-based markup that is passed to it as Rich Text is retranslated into a series of span tags and lots of other junk, making it extremely difficult to propagate changes from the editor back to the original custom markup.
A second option appears to be QWebKit, which allows for live editing of HTML5 markup, so I could specify a two-way translation between the custom markup and HTML5. I'm not clear on how one would propagate changes from the editor back to the original markup in real-time without re-translating the entire document on every text change. The QWebKit solutions looks like awfully bulky to me (Learning WebKit along with QT) to what should be a relatively simple problem.
I have also considered implementing the WYSIWYG with a custom class using native QT containers, labels, images, and other widgets manually. This seems like the most flexible approach, and the one most likely not to run into unresolvable problems. However, I'm pretty sure that implementing all the details of a normal text editor (selecting text, font changes, cut-and-paste support, undo/redo, dragging of objects, cursor placement, etc.) will be incredibly time consuming.
So, finally, my question: are there any QT gurus out there with some advice on where to start with this sort of project?
BTW, I am using QT because the application is a desktop application that needs platform independence.
Given that I got no advice here, I decided to go with the QTextEdit approach, although I'm actually using a QTextBrowser that is set to be editable so that I can capture link navigation events. I will be using QTextCharFormat's with the link names set to unique identifiers in order to convert from the QTextEdit back to the custom markup. The QTextEdit supports images already, so I won't have to deal with those.
I think I will hit the biggest roadblocks with the fact that I need to be able to insert/grow/shrink tables whose cells can have Excel-style functionality. I have not yet figured that whole process out.
I have an asp.net website with 5 items (home, products, news, about, contact) on the main horizontal navigation.
The site uses a master page which splits the page into a header, body and footer using
I want to be able to display a different header (which will include different colors and images) depending on which of the 5 navigation items is selected.
Can anyone tell me the best way to achieve this without bloating the page download?
I know my way around asp.net, html, css, javascript and vb but I am no expert.
I'd probably create a base CSS class that they'd all use, and then create 5 different themes in the app_themes directory (create one if you don't have one), one for each nav option; in there, you can override the base CSS with more specific options to change the background images / colors. If you're using Asp:Images (instead of background images with CSS), you can also change the source using a .theme file in each theme. This way, you'd only download the relevant files. You'll have to change the Page.Theme on Page_Init.
Are you trying to implement a menu?...
One possible strategy that I can think of is making a usercontrol for the header and then rendering the design in HTML based on the mode.
This way you will still be able to take advantage of a distinct header and will be able to have a flexible design.
Create conditional statements within the header depending on what page is selected.