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.
Related
I am using RinohType for generating my RST files to PDF.
I am trying to understand how to provide custom styles in the PDF for my logo and other elements.
I somehow felt the explanation in the Default matcher doesn't provide examples on how to do this.
conf.py
rinoh_documents = [dict(doc='index', # top-level file (index.rst)
target='manual',
template='rinohtype.rtt',
logo='_static/rr-logo-vertical2022-1100px-transp.png')]
rhinotype.rtt
[TEMPLATE_CONFIGURATION]
name = my article configuration
template = article
stylesheet = my_stylesheet.rts
parts =
title
;front_matter
contents
language = fr
abstract_location = title
[SectionTitles]
contents = 'Contents'
[AdmonitionTitles]
caution = 'Careful!'
warning = 'Please be warned'
[VARIABLES]
paper_size = A5
[title]
page_number_format = lowercase roman
end_at_page = left
[contents]
page_number_format = number
[title_page]
top_margin = 2cm
my_stylesheet.rts
Here I am trying to change the width of my logo in the PDF.
What is the correct way to give the css properties here.
width: 100px
The default matcher defines the title page logo style. To adjust the style of this element, you can create a style sheet that builds upon the default sphinx style sheet and tweak the title page logo style:
[STYLESHEET]
name=My Style Sheet
description=My tweaks to the Sphinx style sheet
base=sphinx
[title page logo]
width = 4cm
This style accepts the FlowableStyle style attributes. In the linked documentation, you can see the width attribute supports a bunch of units but not px.
Please stay tuned for better documentation. Something is actually happening in that area!
P.S. If you want to make more changes to the styling of your document, the style log can be very useful to find out which style name corresponds to a particular document element.
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 a default text/image element on a TYPO3 page and the content inside is in this order:
title
image
text
I need this order:
image
title
text
I've been trying to modify the tt_content std.header object within my typoscript but it is not working properly.
Does anyone know an answer to this?
Take a look into: /typo3/sysext/css_styled_content/static/setup.txt
Search for: CType: image (line ~650), then copy it whole into your typoscript template, purge tt_content.image.10 (it's header) and try to place lib.stdheader in required place in tt_content.image.20... just a concept, I did something similar years ago and don't remember details...
Other option is using CSS/JS for changing the order, maybe it will be easier ?
tt_content.textpic {
# remove default header
10 >
20 = < tt_content.image.20
20 {
layout = TEXT
layout.value = <div class="your-classes###CLASSES###">###IMAGES###</div>###TEXT###
# insert the header as part of text
text.15 = < lib.stdheader
text.20 = < tt_content.text.20
text.wrap >
}
}
I'm currently adding a custom marker to tt_news. I want to keep the design in the template. But if the markers are empty I get <br /><h2></h2> and so on. This only makes sense if there is a content. Currently I have the logic and the formatting in class.tx_tt_news.php. Is there another way?
From what I read you put <h2>###GENERIC_MARKER###</h2> into the template. You better wrap the content in typoscript an set required=1. In this case the wrap will only be rendered when there is content. Example:
marker = TEXT
marker.field = title
marker.wrap = <h2>|</h2>
marker.required = 1