I have a problem with an token template in 2sxc V.8.4.5 on DNN 7.4.2. It's a template with support ListContent and ListPresentation:
<div class="row">
<div class="col-md-12">[ListContent:Toolbar]
<h[ListContent:Presentation:TitleHTag] style="text-align:[ListContent:Presentation:TitleTextAlign];">[ListContent:Titel]</h[ListContent:Presentation:TitleHTag]>
<p style="text-align:[ListContent:Presentation:TextTextAlign];">[ListContent:Text]</p>
<repeat>
<div class="col-md-[Content:Presentation:BootstrapWidthContent]">[Content:Toolbar]
<div>
<p><img src="[Content:Image]" style="float:[Content:Presentation:CssImageFloat];margin-top:8px; width:[Content:Presentation:CssWidthImage]"/></p>
</div>
<h[Content:Presentation:Title1HTag] class="[Content:Presentation:CssClassColorTitle]">[Content:Title]</h[Content:Presentation:Title1HTag]>
<h[Content:Presentation:Title2HTag] class="[Content:Presentation:CssClassColorTitle2]">[Content:SubTitle]</h[Content:Presentation:Title2HTag]>
<div class="[Content:Presentation:CssClassColorText]">[Content:Text]<br /><br />
<a class="[Content:Presentation:CssClassColorLinkText]" href="[Content:Link]">[Content:LinkText]</a>
</div>
</div>
</repeat>
</div>
</div>
The problem are at the lines:
<h[Content:Presentation:Title1HTag] class="[Content:Presentation:CssClassColorTitle]">[Content:Title]</h[Content:Presentation:Title1HTag]>
<h[Content:Presentation:Title2HTag] class="[Content:Presentation:CssClassColorTitle2]">[Content:SubTitle]</h[Content:Presentation:Title2HTag]>
Some tokens in that lines are not replaced with values. i'm getting
<h class="titlered">Title1<h>
<h class="titlered">Title2<h>
It cannot be a problem with Content:Presentation, because the other tokens from this presentation are correct replaced.
Any hints?
I have to guess a bit, but I'm thinking of some kind of spelling / naming issues. Are you sure, that the field is really called Title1HTag, or could it be a misspelling like Titel1HTag or TitleH1Tag?
I recommend that you try to output the value somewhere else just to look at it, like
XXX[tag-to-test]YYY
Related
I have certain tags for tracking events in analytics.
<div class="video"
analytics-event="{{track.event}}"
analytics-category="{{track.category}}">
...
</div>
The thing is that sometimes track.event (or track.category) is empty and I don't want that empty tag in there. <div class="video" analytics-event>...<div>
Is there a way to display them conditionally?
Use ng-if
<div ng-if="track.event" class="video"
analytics-event="{{track.event}}">
...
</div>
if it does not present,
<div ng-if="!track.event" class="video"
analytics-event>
</div>
This is what I gotta deal with:
<nf-field>
<div id="nf-field-2-container" class="nf-field-container lastname-container label-above ">
<div class="nf-before-field">
<nf-section></nf-section>
</div>
<div class="nf-field">
<div id="nf-field-2-wrap" class="field-wrap lastname-wrap nf-fail nf-error" data-field-id="2">
<div class="nf-field-label">
<label for="nf-field-2" class="">Last Name <span class="ninja-forms-req-symbol">*</span> </label>
</div>
<div class="nf-field-element">
<input id="nf-field-2" name="nf-field-2" class="ninja-forms-field nf-element" type="text" value="">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div class="nf-error-wrap nf-error">
<div class="nf-error-msg nf-error-required-error">This is a required field.</div>
</div>
</nf-section>
</div>
</div>
</nf-field>
Please notice the <nf-field> tag. It isn't HTML and has nothing I can use to style it with, regarding what type of input it is, ie. text, textarea, etc.
I have no previous experience of backbone.js and all the javascript by Ninja Forms is minified, so I don't know where to even begin with all that. This is what I did come up with:
(function ($) {
$(window).load(function(){
$('.nf-field-container').unwrap('nf-field');
});
})(jQuery);
This javascript is placed and the very bottom of the page, just before </body>. My excitement was short lived when I discovered that for some reason it only works on hard reload (at least when I develop on localhost).
The whole form is wrapped in a div that has the class .nf-form-cont (or just create it if there isn't).
Your JS should look like this:
(function ($) {
$(window).load(function(){
// Remove unnecessary NF mark ups
$('.nf-form-cont').find("nf-field").contents().unwrap();
$('.nf-form-cont').find("nf-fields-wrap").contents().unwrap();
$('.nf-form-cont').find("nf-section").contents().unwrap();
$('.nf-form-cont').find("nf-errors").contents().unwrap();
});
})(jQuery);
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id=='currentUser.id'">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id=='currentUser.id'">
<h5>{{f.friend_id}}</h5>
</div>
</div>
currentUser is my rootscope variable which stores id when a user logs in.
friend_id and user_id are visible from my friend controller(which i have added) and so i know the values are present
but i dont know why the condition doesnt turn true cuz both the values show when i run this code
Remove quote of currentUser.id-
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id==currentUser.id">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id==currentUser.id">
<h5>{{f.friend_id}}</h5>
</div>
You can replace your code with my code.
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id==currentUser.id">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id==currentUser.id">
<h5>{{f.friend_id}}</h5>
</div>
We have to remove quotes because with quotes it's not a variable. After using quotes it will be now string.
I have small text portions like
<div>
<h4>Why Register?</h4>
<p>As candidate...</p>
</div>
opposed to
<div>
<h4>Why Register?</h4>
<p>As company...</p>
</div>
Based on a variable in my controller I insert the correct partial with:
<div ng-switch on="role">
<div ng-switch-when="candidate">
<div ng-include="'candidate.html'"></div>
</div>
<div ng-switch-when="company">
<div ng-include="'company.html'"></div>
</div>
<div ng-switch-default>
<div ng-include="'candidate.html'"></div>
</div>
</div>
This does the job but it looks awful. Is there any way I could do it better?
You could always hold your string vars in javascript or external json file and use markup which is tied to a model like this:
<div ng-controller="something">
<h4>Why Register?</h4>
<p>{{who}}</p>
</div>
and then inside your "something" controller provide code:
if(role == "company")
$scope.who = "As company...";
else
$Scope.who = "As candidate...";
If you have many places in code that use such feature, you could consider holding variables in external json and then reading them in javascript/controller.
You can use:
<div ng-include="(role || 'candidate') + '.html'"></div>
If the parts are not that big you can put them all up there and use ng-show to filter which gets actually shown. This takes up the least markup.
<h4>Why register?</h4>
<p ng-show="isCompany">Company targeted content...</p>
<p ng-show="isCandidate">Candidate targeted content...</p>
I have a field collection called field_logo_logos.
There are 2 fields within:
field_logo_image and field_logo_link
In views I can get the data and it comes out like this:
<div typeof="" about="/field-collection/field-logo-logos/24" class="entity entity-field-collection-item field-collection-item-field-logo-logos clearfix">
<div class="content">
<div class="field field-name-field-logo-image field-type-image field-label-hidden view-mode-full">
<div class="field-items">
<figure class="clearfix field-item even"><img width="222" height="57" title="title" alt="alttag" src="http://link/to/my/image.png?itok=1wgQypF6" class="image-style-footer-logo" typeof="foaf:Image"></figure>
</div>
</div>
<div class="field field-name-field-logo-link field-type-link-field field-label-hidden view-mode-full">
<div class="field-items">
<div class="field-item even">http://www.mylink.com/</div>
</div>
</div>
</div>
</div>
but how do I override this so I can change it to be like this:
<div class="footer-logo">
<a href="http://www.mylink.com/" target="_blank">
<img width="222" height="57" title="title" alt="alttag" src="http://link/to/my/image.png?itok=1wgQypF6" class="image-style-footer-logo" typeof="foaf:Image">
</a>
</div>
I know how to do this with ordinary fields with tokens within views or in a template override but field collections seem to work differently.
Any advise will be very much appreciated.
C
You can't do this with the current iteration of field collections.
Here's a post, they say they will allow better templating in version 2.x
https://drupal.org/node/1157794
You could always patch, but nobody ever recommends that.