So, I'm fairly new to Three20, but so far the benefits have outweighed the pains in my ass that it's taken to get things working.
I'm using some TTStyledTextLabels, and I need to use a particular font for links. I've overridden TTDefaultStyleSheet and added a new style, like so:
- (TTStyle*)futuraStyle {
return [TTTextStyle styleWithFont:[UIFont fontWithName:#"Futura-CondensedMedium" size:20] color:kColorTextLink next:nil];
}
I can use tags to apply this style to normal text, but it doesn't seem to affect links.
I found that if I add the style class directly to the links, as in
link!
then the links do appear in the proper font. However, they are then no longer tappable! WTF?
Got it!
set the name in the link with a double dash and than the link style will be called with the UIConstrolState parameter, and all will work fine:
- (TTStyle*)futuraStyle:(UIControlState)state{
if(state==UIControlStateNormal){
return [TTTextStyle styleWithFont:[UIFont fontWithName:#"Futura-CondensedMedium" size:20] color:kColorTextLink next:nil];
}else{
return [TTTextStyle styleWithFont:[UIFont fontWithName:#"Futura-CondensedMedium" size:20] color:kColorTextLinkHiglighted next:nil];
}
}
and in your text:
link!
Related
I know this problem sounds a bit complex but it's not.
I'll try my best to explain it in a simple way:
I'm making a list of blog posts for the homepage of my Gatsby website.
The list is made of "boxes", every box that links to a post has a background-image.
I pass this background-image to a styled-component, it gets the image from a prop value that I inserted in the main < div > element (you'll find the example bellow).
It works fine, till I try use an image from my local folder under src (instead of using an online link that I simply putted on frontmatter).
Here's what I did in the past, and worked:
I put the url of the image on the frontmatter of the markdown file:
---
slug: "/post/my-post"
[...]
imghero: "https:/path/to/image-online.jpg"
---
Then query it with graphql:
const LISTING_QUERY = graphql`
query BlogPostListing {
allMarkdownRemark(limit: 10, sort: {
order: DESC,
fields: [frontmatter___date]
}) {
edges {
node {
excerpt
frontmatter {
title
slug
date(formatString: "MMMM DD, YYYY")
imghero
}
}
}
}
}
`
After that I insert the {node.frontmatter.imghero} it on a prop on the main div:
const Listing = () => (
<StaticQuery
query={LISTING_QUERY}
render={({allMarkdownRemark}) => (
allMarkdownRemark.edges.map(({node}) => (
<Article img_background={node.frontmatter.imghero} key={node.frontmatter.slug}>
[... etc ...]
</Article>
))
)}
/>
)
export default Listing
And finally I call that img_background prop in the styled-component:
const Article = styled.article`
background-image: url(${props => props.img_background};);
[... etc ...]
`
This method works.
Now I want to get the image from my "images" folder and not from a random url.
I installed gatsby-remark-images
Set it on gatsby-config.js and put the path of some image on frontmatter.
Test everything with http://localhost:8000/___graphql (and worked)
Insert the additional query throught graphql:
[...]
frontmatter {
date(formatString: "DD MMMM, YYYY")
title
imghero
hero {
childImageSharp{
fluid(maxWidth: 630) {
...GatsbyImageSharpFluid
}
}
}
[...]
I modify the node on the component with the new path:
<Article img_background={node.frontmatter.hero.childImageSharp.fluid} [...]>
[...]
</Article>
Gatsby Develop compiles fine.
But then my homepage is completely white.
And the console of the browser says that node.frontmatter.hero is "null".
I don't know that else to do.
Thanks for the help.
I think a bit more info is necessary to resolve your issue, none of the thing you listed out looks wrong in itself. However so many folks got tripped off by image handling in gatsby that I'm writing a check list. It's meant to be generic, but I think no.5, 8, 9, 12 might help you locate the problem.
Using image with gatsby-transformer-remark + gatsby-transformer-sharp troubleshooting
Setup
Is there any error at all? Sometimes gatsby will still compile successfully despite something's wrong. Check the console for anything that's... red.
Did you restart gatsby i.e turn it on and off again? Try removing cache & public folder (.cache and public) if you suspect something's wrong with them.
Did you list your image folder, or any of its parent folders in gatsby-source-filesystem?
In your frontmatter, is the path to the image relative to the markdown file itself? i.e path starts with a dot ./relative/path/to/image.png
Does all markdown has a hero field in frontmatter? If a file doesn't have a hero field, it will be null.
If the image path in frontmatter is not relative or doesn't link to a file, it'll be treated as a regular string.
Query & Fragments
Does your query work? Test your query in http://localhost:8000/___graphql. Make sure the image field show up as a File node. Try something simple like
query {
allMarkdownRemark {
frontmatter {
title
hero {
id
name <-- just enough to know the file exists
}
}
}
}
If your hero shows up as a string, something's wrong, check the setup again.
Are you using fragments? Currently fragments can't be test in the graphiql tool, so you might need to find the definition of that fragment and test it manually. Here's a list of the default ones that come with gatsby-transformer-sharp and their definitions.
If you're using a custom fragment, make sure to define & export it somewhere.
Usage
If image doesn't show up in the browser, inspect & try to find what's shown up in place of your image.
Are you using gatsby-image? If so, make sure you're passing in something it can work with.
Make sure your image component receives what it should. If your component's expecting a path, don't pass in an object, like result of a fragment.
Some side note
gatsby-remark-images only handle relative links in markdown image & html <img>, so if your image is living in frontmatter, it won't do anything.
I have tried to add justify plugin to be able to align text right, left or centre. But after following the instructions in the documentation (http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html), I wonder if the plugin should be located in a specific folder (mine is at public/modules/apostrophe-areas/js/ckeditorPlugins/justify/), as it disappears when the site is loaded, but if I include it in some other folder such as public/plugins/justify still doesn't work.
This is my code just in case: (located at lib/modules/apostrophe-areas/public/js/user.js)
apos.define('apostrophe-areas', {
construct: function(self, options) {
// Use the super pattern - don't forget to call the original method
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
// Now do as we please
CKEDITOR.plugins.addExternal('justify', '/modules/apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
};
}
});
Also, it would be nice to know how the plugin should be called at the Toolbar settings for editable widgets.
Thanks!
The URL you need is:
/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/
The my- prefix is automatically prepended so that the public folders of both the original apostrophe-areas module and your project-level extension of it can have a distinct URL. Otherwise there would be no way for both to access their user.js, for instance.
I'll add this note to the HOWTO in question, which currently handwaves the issue by stubbing in a made-up URL.
As for how the plugin should be called, use the toolbar control name exported by that plugin — that part is a ckeditor question, not really an Apostrophe one. But looking at the source code of that plugin they are probably JustifyLeft, JustifyCenter, JustifyRight and JustifyBlock.
It turns out that it's not enough to simply call CKEDITOR.plugins.addExternal inside apostophe-areas. You also need to override self.beforeCkeditorInline of the apostrophe-rich-text-widgets-editor module and explicitly call self.config.extraPlugins = 'your_plugin_name';.
Here's what I ended up with:
In lib/modules/apostrophe-areas/public/js/user.js:
apos.define('apostrophe-areas', {
construct: function(self, options) {
// Use the super pattern - don't forget to call the original method
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
// Now do as we please
CKEDITOR.plugins.addExternal('justify', '/modules/my-apostrophe-areas/js/ckeditorPlugins/justify/', 'plugin.js');
};
}
});
then in in lib/modules/apostrophe-rich-text-widgets/public/js/editor.js:
apos.define('apostrophe-rich-text-widgets-editor', {
construct: function(self, options) {
self.beforeCkeditorInline = function() {
self.config.extraPlugins = 'justify';
};
}
});
For some reason doing CKEDITOR.config.extraPlugins = 'justify' inside apostrophe-areas does not work, probably due to the way how CKEDITOR is initialized;
One more thing: this particular plug-in (justify, that is) does not seem to follow the button definition logic. It has button icons defined as images, whereas CKEditor 4.6 used in Apostrophe CMS 2.3 uses font-awesome to display icons. It means that the icons that ship with the justify module won't be displayed and you'll have to write your own css for each button individually.
There is another issue which you'll probably face when you finally enable the justify buttons. The built-in html sanitizer will be strip off the styles justify adds to align the content.
Apostrophe CMS seems to be using sanitize-html to sanitize the input, so changing CKEditor settings won't have any effect. To solve the issue, add the following to your app.js:
'apostrophe-rich-text-widgets': {
// The standard list copied from the module, plus sup and sub
sanitizeHtml: {
allowedAttributes: {
a: ['href', 'name', 'target'],
img: ['src'],
'*': ['style'] //this will make sure the style attribute is not stripped off
}
}
}
Thank you both for your help. After following both approaches of: locating the plugin at my-apostrophe-areas folder as well as editing editor.js on the apostrophe-rich-text widget (the sanitize.html file was already using that configuration), I got the plugin working. However, I was still having the issue with the icons.
I fixed that adding the Font Awesome icons that correspond to align-justify, align-right, align-left and align-center at the end of public/modules/apostrophe-areas/js/vendor/ckeditor/skins/apostrophe/editor.less
I can't understand why I cannot change picture (background of field and image of imageview) from this method:
private void loginCheck(String loginText){
String login = loginText.trim();
if(login == null || login.equals("")) {
loginField.setStyle("-fx-background-image:url('images/registration_login_wrong.png');");
logoTick.setStyle("-fx-image:url('images/registration_wrong.png');");
logoTick.setVisible(true);
}else{
loginField.setStyle("-fx-background-image:url('images/registration_login_right.png');");
logoTick.setVisible(false);
}
}
CSS code for logoTick is:
.login_tick{
-fx-image:url("images/registration_tick.png");
visibility:false;}
Everything besides -fx-image and -fx-background-image seems to work fine. I also changed background image in another class(of a label) and didn't encounter any problems. That's why I can't understand what can be possibly wrong. I checked images location and name everything seems correct. If I manually replace the image path in CSS it is working, but from the code images just disappear.
The paths in the CSS url(...) function are treated as relative paths; the location to which they are relative is different in a stylesheet and in an inline style. From the CSS documentation:
If the style appears in a stylesheet, the path is relative to the base
URI of the stylesheet. If the style appears in an inline style, the
path is relative to the root of the classpath.
Without knowing your project layout, it's not possible to give you the correct paths for the images, but that should be enough to figure it out.
Alternative Solution
An alternative solution is to define all the styles in CSS, and to manipulate the style class in the Java code to select the appropriate style. I like to use JavaFX 8 CSS PseudoClasses to do this:
.login-field:login-incorrect {
-fx-background-image: url('images/registration_login_wrong.png');
}
.login-field:login-correct {
-fx-image:url('images/registration_login_right.png');
}
.login_tick {
-fx-image:url("images/registration_tick.png");
visibility:false;
}
.login_tick:login-incorrect {
-fx-image:url('images/registration_wrong.png');
visibility: true ;
}
And then the Java code looks like:
private void loginCheck(String loginText){
String login = loginText.trim();
boolean loginIncorrect = (login == null || login.equals("") ;
PseudoClass loginIncorrectPsuedoClass = PseudoClass.getPseudoClass("login-incorrect");
PseudoClass loginCorrectPsuedoClass = PseudoClass.getPseudoClass("login-correct");
loginField.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorrect);
loginField.pseudoClassStateChanged(loginCorrectPseudoClass, !loginIncorrect);
logoTick.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorret);
}
The advantage of this approach is that all style information is stored in the CSS file; the Java code just changes the selector used for the UI elements.
I am using Fontawesome in my website and have my own CMS to edit the website pages. What I would like to develop is a dialog for the user where he can pick an fontawesome icon but for now it is OK to add them in the codeview of ckeditor.
Icons added to the content are not shown in ckeditor designview. I have changed ckeditor config file so that the editor accepts i tags (*). I added the fontawesome CSS file as an #import rule to contents.css but still no fontawesome icon visible in the editor area.
(*)config.js
config.allowedContent = true;
config.ProtectedTags = 'i' ;
config.protectedSource.push( /<i[\s\S]*?\>/g ); //allows beginning <i> tag
config.protectedSource.push( /<\/i[\s\S]*?\>/g ); //allows ending </i> tag
What can I do to make this work?
config.protectedSource.push( /<i class[\s\S]*?\>/g );
config.protectedSource.push( /<\/i>/g );
What you have will interfere with img tags.
AND OR, after all of config:
CKEDITOR.dtd.$removeEmpty['i'] = false;
Both work well. Just be sure you have cleared cache completely when making changes.
*EDIT
One works while messing something else up. A no go solution.
I stopped using this bulky editor. Created my own.
However, to solve the solution, use EM or SPAN instead of I tags for this.
When you add something to the protectedSource setting, you're hiding it from the editor, that content is converted into a HTML comment to protect it and avoid that it can be modified by the user, but being a comment it's obviously hidden.
I'm using 4.11.4 and this solution not working correctly
This solution correctly work on 4.11.4
config.protectedSource.push( /<i class[\s\S]*?\><\/i>/g ); // Font Awesome fix
Goodluck
Instead of:
config.protectedSource.push(/<i class[\s\S]*?\><\/i>/g );
use more stronger and best way:
config.protectedSource.push(/<i class="fa[s|r|l|b] [A-Za-z0-9\-]+"><\/i>/g);
Because when user pasting content from another source, CKEDITOR.dtd should remove empty < i >, or convert < i > to semantic < em >, but only fontawesome icons with class="fas/far/fal/fab *" should be preserved.
(Naming in fontawesome: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started)
Take a look at this: ckeditor fontawesome addon.
Basically, you should download the fontawesome addon in zip format, and extract to "ckeditor/plugins/", with the name "fontawesome".
Then, open "ckeditor/config.js" and signal the usage of the new addon:
config.extraPlugins = 'fontawesome';
config.contentsCss = 'path/to/your/font-awesome.css';
config.allowedContent = true;
The next thing is to edit your HTML's section:
<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
The final step is to use the toolbargroupname: "FontAwesome" in your toolbar:
config.toolbar = [
{ name: 'insert', items: [ 'FontAwesome', 'Source' ] }
];
Here is a demo.
This also applies for glyphicons, in the same way the fontawesome is used.
Cheers
I'm using Magento to build a storefront - I'm not used to Prototype, but that's what they use by default, so I'm trying to play nice. I have used the tabs setup provided in the Modern theme (built by the Magento team), and I've integrated it into my theme and it works great.
Where I need help is in directly linking to a specific tab - I've created a tab to house the product reviews, and that works fine, but there are links higher up on the page that link to reviews - however, they are linking to another page, which I would rather not use. I'm not familiar with the prototype being used, and I don't know what the link would look like to link to the tab - I'd like the experience to be something similar to:
1) Click on the link
2) The reviews tab opens and the page moves you down to it - like a run-of-the-mill anchor.
The href value of the tab is simply:
javascript:void(0);
The javascript that runs the operation is this:
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
My guess is that I need to invoke the showContent function and just force it to use the reviews tab, but I'm not quite sure how to do this. If anyone could shed some light on it, I'd appreciate it.
Thanks.
Not entirely the right answer, ie it cheats a bit, but we solved this by using jQuery's 'click()' function to simulate the tab click.
ie
Gave the reviews tab title anchor an id of 'tab-reviews-tab' and in our link at the top of the page added the following JS:
jQuery('#tab-reviews-tab').click();
Obviously it would be silly to include jQuery just for this, but if you're using it for something else already, sticking to what you know can work!
If someone is still interested in a solution, here is a hint to the same question:
souce link http://www.magentocommerce.com/boards/viewthread/59930/#t262411
Hope this can help u.
The answer to your question is on gist and ipaste.
Here's this summary:
You need to save the Varien.Tabs object in a var so replace the new Varien.Tabs('.product-tabs'); with var csTabs = new Varien.Tabs('.product-tabs');
If you are only doing this one time just create link as such:
<a href="#" onclick="javascript:csTabs.showContent($$('#product_tabs_email_or_other_id a')[0]);" >The Link</a>
If you expect to do this often just add a new method to the Varien.Tabs (at line 75)
openTab: function(b) {
var controlledLink = $$("#"+b+" a")[0];
this.showContent(controlledLink);
}
Now your links work like this:
Email
Further Info