I'm trying to build a Jade image gallery using mixins and includes, but can't get it working. Here's my setup:
layout-template.jade (the base layout template)
block vars
doctype html
(head and all it's meta tags)...
block body
(body content)...
block main-content
h1 This is the default layout
block footer
script(src='/js/min/app-min.js')
image-gallery-page.jade (the page with the image gallery)
extends ../../__JADE/_layout-template.jade
block vars
- var pageTitle = 'New page title'
block body
body
block main-content
(main page content...)
include ../../__JADE/_include-view-original.jade
+originalImage('http://placehold.it/800x400', 'Original Image 1')
+originalImage('http://placehold.it/800x400', 'Original Image 2')
+originalImage('http://placehold.it/800x400', 'Original Image 3')
image-gallery-include.jade (the include file being pulled into the image-gallery-page, with the mixin)
.row
.large-10.columns
.text-center Click for larger view
.owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
mixin originalImage(originalLink, originalTitle)
a(href="#{originalLink}" title="#{originalTitle}")
img(src="#{originalLink}")
The original images 1-3 from the mixin appear, but not inside the owl-carousel div that I need them to be in. If I indent the mixin under the include, they don't compile.
What am I doing wrong? Thank you!
For me personally, I would dedicate a file to my mixins or individual mixins and include them at the top of a file I wish to use them in.
Then you can simply invoke the mixin where necessary.
Currently, you have the following ;
.row
.large-10.columns
.text-center Click for larger view
.owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
mixin originalImage(originalLink, originalTitle)
a(href="#{originalLink}" title="#{originalTitle}")
img(src="#{originalLink}")
But altering to;
mixin originalImage(originalLink, originalTitle)
a(href="#{originalLink}" title="#{originalTitle}")
img(src="#{originalLink}")
.row
.large-10.columns
.text-center Click for larger view
.owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
Would make the difference.
However, if you choose to do this, you could do a little shuffling and result with something like;
extends ../../__JADE/_layout-template.jade
include ../../__JADE/_mixins.jade
block vars
- var pageTitle = 'New Page Title'
block body
body
block main-content
(main page content...)
.row
.large-10.columns
.text-center Click for larger view
.owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
+originalImage('http://placehold.it/800x400', 'Original Image 1')
+originalImage('http://placehold.it/800x400', 'Original Image 2')
+originalImage('http://placehold.it/800x400', 'Original Image 3')
Additionally, you could define a map and loop over them to invoke your mixins to save you more code.
Something like the following could potentially work;
- var images = ['http://placehold.it/800x400', 'http://placehold.it/800x400', 'http://placehold.it/800x400']
each val, index in images
+originalImage(val, 'Original Image ' + index)
That last bit might need a little tweaking as it's off the top of my head but hopefully that will help you out a little.
I try to separate my Jade files into many manageable modules and pieces so that it's simple to maintain. As your project grows maybe think about having folders for the different markup components. For example, having a folder for different mixins and being able to include specific mixins for different parts of your project.
#jh3y
Related
I'm working on my first TYPO3 project and I'm done with the template, I just can't figure out how to make this work:
My page content is one column with header, text and title in every field.
I don't have any problems showing header and text on my website, but the image just won't work.
My image-path is fileadmin/user_upload/ and I can show it by setting the filename in my code, but thats obviously not what I want.
This is my Content Object Array, the code for the image is one of the versions I found when searching, but none of them worked:
page.20 = CONTENT
page.20.table = tt_content
page.20.wrap = <div id="content">|</div>
page.20.renderObj = COA
page.20.renderObj.wrap = <div id="news">|</div>
page.20.renderObj {
10 = TEXT
10.stdWrap.field = header
10.stdWrap.wrap = <div id="newstitle"><span>|</span></div>
20 = IMAGE
20.stdWrap.field = image
20.stdWrap.wrap = <div id="newsimage><img src="fileadmin/user_upload/|"</img></div>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <div id="newstext"><p>|</p></div>
}
Hope someone could help me out, so I can finally finish this project!
Maybe I don't understood correctly, but... you don't need to write it yourself, just in your main TS template include CSS Styled Content from extension, so you can render whole column like:
page.20 < styles.content.get
If you need to change some wrappings (i.e.: to add your news CSS classes) you can also override them in setup field.
edit: Go to Templates > Template analyzer and check the EXT:css_styled_content/static/ code to find declaration you'd like to change (prepare for looong reading ;)) when you finally find it, just you can overwrite it in your TS, ie: to wrap text section of Text w/ image CE you can use:
tt_content.textpic.20.text.wrap = <div class="myNewsClass"> | </div>
Finally I'd suggest not to replace original classes but add your own so the above sample would be like:
tt_content.textpic.20.text.wrap = <div class="csc-textpic-text myNewsClass"> | </div>
de facto all these classes csc- has some CSS default styling therefore you can choose to align the image to the left or right (etc) out of the box. If you'll remove it you'll need to handle these things yourself.
When I use an empty span, let's say
<span class="anchor" id="jumptome"></span>
ckeditor removes it.
To the config.js of ckeditor I added
CKEDITOR.editorConfig = function( config ) {
config.IgnoreEmptyParagraphValue = true;
};
CKEDITOR.dtd.$removeEmpty.span = 0;
Now ckeditor does not remove the spans, but they are wrapped in p's like
<p><span class="anchor" id="jumptome"></span></p>
Is there any configuration to remove the p's (I need the paragraphs for other elements, just want to avoid them for the spans).
Thanks in advance!
Why would you need the spans? If you need an anchor, why not use for example a DIV which can be styled to be a visible block in the Editor but an invisible ... anchor in the output content? I do this in my CKE app. Although I use widgets for anchors but same princible anyway.
I'm guessing the reason is because of caret positioning and user targeting - how would the user target that anchor? If it can't be targeted - why do you need it in the contents? Why not something targetable?
The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.
I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..
(ALSO See my FIDDLE Example to see this in action,)
The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.
Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:
<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
normal visible text
</option>
I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text.
In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:
.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}
Now for the change in the src/jquery.multiselect.js file
Search for the following matching code around line 130 (depending on what version id of the script you are using):
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
title = this.innerHTML,
description = this.title,
....
ADD the following line above "title = this.innerHTML,":
image = this.getAttribute("image");
so that it looks like this:
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
image = this.getAttribute("image");
title = this.innerHTML,
description = this.title,
Now Search for the following matching code around line 180:
// add the title and close everything off
html += ' /><span>' + title + '</span></label></li>';
....
Replace the code line with the following to allow for rendering of your images:
// add the title and close everything off
html += ' /><span>';
if (image != null) {
html += '<img src="'+image+'" class="multSelktrImg">';
}
html += title + '</span></label></li>';
save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.
In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.
I have an application where a user chooses a template. On this template the user can upload an image.
I use paperclip to upload the images.
Each template has different image sizes.
Is it possible to set an image style => 'widthxheight' dynamically in paperclip?
I want this functionality because if the user decides to change template then they don't have to upload the photo again they just crop the 'original'.
Thanks for any help.
I will try to clear this up.
A user uploads an image for the header of a page. The style could be called "header" and the dimensions should be the dimensions for that header space, say "400x600"
Now the user views the images they have uploaded in a gallery. They want to select one of the images for their page but this time its for the "sidebar" which has dimensions "300x100". I don't want to make them upload the same image again. I want to create a new style called "sidebar" with dimensions "300x100". I also don't want to delete the "header" style or resize it.
How can I do this with paperclip?
If I understand you have in mind something like that: Paperclip change size
Additionally:
attr_accessor :size
...
self.dimensions = self.size.split("x")
Controller:
def create
...
#file.size = params[:size] # OR Simply include such field in form
...
end
Example:
Model:
class File
has_attached_file :upload
attr_accessor :size
before_save :extract_dimensions
serialize :dimensions
...
def extract_dimensions
...
self.dimensions = self.size.split("x")
end
end
Form:
<form action="some link">
...
<label>Size: </label><select name="file_size">
<option value="100x200">Large</option>
...
</select>
</form>
I'm trying to find the best way to render a li-element :
I've read that i should never replace this.el
So it seems that i have to unwrap my template in my LiView render() function :
// replace element content with html generated from template
var $rendered = $.tmpl(this.template, this.model.toJSON());
this.el.html($rendered.unwrap().html());
I just get the contents inside the $rendered li, since i should not replace it.
But how should i transfer attributes ?
I tried :
this.el.attr('class', $rendered.attr('class'));
this.el.attr('title', $rendered.attr('title'));
But it replaces attributes... And some (like jQuery ui ui-draggable) could be lost.
All this seems a bit clunky...
Thanks !
I'm not sure I fully grasp what you're trying to do Olouv, but I'll have a stab at answering your question regardless :)
You have an liView that corresponds to an li dom element
So you need to specify
el: "li"
Do not have an li in your template. Then the result of your render will be
<li>
contents of template
</li>
Now you want to add attributes to this li element?
Class names are pretty simple, just add the className attribute to your view
className: "ui-draggable myGreatClass ui-corner-all"
If you need to add additional attributes to your root (li) element
$(el).attr("title","your title")
If that doesn't work for you, and you want to put the li attributes in your template perhaps consider some form of the following:
Tolerating HTML of the form:
Instead of an liView (list item view), just have a ulView (List view), and put a loop construct in your template