I have a script that re-sizes images for me and use it to serve images as such:
http://mysite.com/createthumb.php?filename=mypic.jpg
Fancybox will serve the above image, using the following link:
<a href='createthumb.php?filename=mypic.jpg' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>
But I need to re-size it do a size that is different from the default size, by passing a parameter 'size' as such:
http://mysite.com/createthumb.php?filename=mypic.jpg&size=2000
But when I change the fancybox link to the following:
<a href='createthumb.php?filename=mypic.jpg&size=2000' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>
Now fancybox chokes and the link just gets served as an image without any lightbox. This is the case even if I change my code so that it doesn't even look at the size parameters. In other words, just adding the "&size=2000" to the end of my link seems to set fancybox completely off balance.
Any ideas about why this could be or how I can fix this?
The script can not guess the content type by looking at your link. You have 3 options:
1) Change links by appending image extension at the end, so the script can detect -
<a href='createthumb.php?size=2000&filename=mypic.jpg' class='fancybox' ..
2) Use CSS class name to specify content type -
<a href='..' class='fancybox fancybox.image' ..
3) Set type while initializing -
$(".fancybox").fancybox({type : 'image'});
It looks like fancybox is checking the ending of the URL to determine if it is an image or not. Change your URL to be createthumb.php?size=2000&filename=mypic.jpg
https://github.com/fancyapps/fancyBox/blob/master/source/jquery.fancybox.js
(line 767)
Related
There used to be an extension for older TYPO3 versions. How is this to achieve this on a per page basis in TYPO3 LTS9?
Added:
<f:for each="{variants}" key="name" as="variant">
<f:variable name="breakpoint">{variant.breakpoint as integer}</f:variable>
<f:variable name="width">{variant.width as integer}</f:variable>
<f:if condition="{width}">
<source data-variant="{name}" data-maxwidth="{width}" {f:if(condition: breakpoint, then: ' media="(min-width: {breakpoint}px)" ' )}srcset="{f:uri.image(image: file, cropVariant: name, maxWidth: width)}">
</f:if>
</f:for>
<img src="{f:uri.image(image: file,
cropVariant: 'default',
maxWidth: variants.default.width
)}"
title="{file.title}"
alt="{file.alternative}"
>
That can be done with the appropriate templating.
While earlier the rendering was done with typoscript, nowadays the rendering is done with fluid.
You probably use Fluid Styled Content (FSC), this is an system extension and has its original templates at typo3_src/typo3/sysext/fluid_styled_content/Resources/Private/...
Beyond Templates you will find Image.html, Textmedia.htmland Textpic.html,
Those will call the Partial Media/Type/Image.html
Copy those file(s) into your place (site-extension or fileadmin) and change the markup to show a small square thumbnail which is linked to the full image. Use any library for it as you like.
Don't forget to add your template-path /partial-path to the FSC settings.
If you look into this partial you will find a condition which checks for {data.image_zoom}. If set the small inline image rendered in partial Media/Rendering/Image.html is linked to a bigger version.
You will find dimensions and settings which decide the thumbnail. So you only need the correct configuration to get square thumbnails.
After a lot of tweaking in my templates that would not work to my expectations, I came up with the perfect solution for my needs. I was astonished how simple it was in the end, without even changing anything in the original bootstrap_package templates:
I set a condition for pages I want to have square thumbs
[globalVar = TSFE:id=10, TSFE:id=20, TSFE:page|pid=30]
page.includeCSS {
custom_css = fileadmin/site/Resources/Public/Css/custom.css
}
page.includeJSFooter{
scripts = fileadmin/site/Resources/Public/JavaScript/Dist/square_thumbs.js
}
[end]
css:
picture img{
object-fit: cover;
}
js:
var cw = $('picture img').width();
$('picture img').css({'height':cw+'px'});
I want to crop images in Fluid with the f:image or the f:uri.image viewhelper (TYPO3 8.7). Since TYPO3 7.2 the usual way does not work anymore:
This:
<f:image image="{file}" width="500c" height="500" />
does not work.
In the fluid guide I found the hint that since TYPO3 7.2 I have to use crop. I found this in the change log:
https://docs.typo3.org/typo3cms/extensions/core/7.6/Changelog/7.2/Feature-65584-AddImageCropping.html
So this should work, but it doesnt:
<f:image image="{file}" crop="0,0,500,500" />
The images are rendered but in default size.
Any ideas? Anything changed in later versions?
I tried with a fresh installation and found my fault.
cropping with c and m does indeed work in TYPO3 8 - the hint in the fluid manual is wrong.
in short syntax you have to use '' in order to send the c or m correct.
This syntax is wrong:
<img src="{f:uri.image(image:file, width:200c, height:200)}">
there is no error message and the images are rendered but the letter c is ignored. You have to use this syntax:
<img src="{f:uri.image(image:file, width:'200c', height:'200')}">
this will work.
One additional hint: after changing the syntax the images are not rendered every time but only when the size has changed. Sometimes you get simply the cached images ... Deleting the content on /fileadmin/_temp does help.
Well - perhaps it will help some one :-)
You can use f:image like below. it's work for me.
<f:image src="{file.originalResource.publicUrl}" width="770c" height="517c" height="350c" />
You could also specify the crop settings in tca and use this settings in the FE, for an example look at the repository : https://github.com/frans-beech-it/t3ext-config_examples.
Besides that, in the install tool you can check if cropping works on your machine. It can happen that there are already processed images for your size, if you adjust the cropping information of image with 1px a new processed image is created. If then the image works, clear the processed files to generate a new image for your desired formats.
Hello I'm getting crazy around a dummy problem: how to remove paragraph tags < p > that RTE (in Typo3 6.1.7) adds oafter saving some text contents. I wish to add some images here to better explain this funny thing but I can't since I've not (yet) enough reputation.
BTW I put the images on an external site:
http://s16.postimg.org/uqbu40fut/rte_ptags_1.jpg
http://s16.postimg.org/7q56roi11/rte_ptags_3.jpg
The first image is a text entered in RTE; the second image (not shown here for the same reputation matter) is the same text shown in the "<>" raw view; the last image is what I see in raw view AFTER saving the content element.
I think that I must do something in the template or in the Typoscritp settings to remove these < p > useless tags... But what ??
Those <p> tags are enabled by default because in most cases you want your Text wrapped in propper HTML markup. However, typing your question into google, gets me to this two lines of Typoscript, wich I just tested on a 6.1.7 and which seem to do the job:
tt_content.stdWrap.dataWrap >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines >
// Remove Class Of <p class="bodytext">
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class =
// Remove P tag
tt_content.stdWrap.innerWrap >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines >
//Remove Extra Figure Tag of Image
tt_content.image.20.renderMethod = figure
tt_content.image.20.rendering.figure
How can I add attributes to the current Insert Image dialogue box on umbraco Richtext Editor?
What I really want is to let content editor choose images and set their class, and maybe choose if this is lightbox image or not. If user choose lighbox option, then a hyper link is added with some extra attributes, like data-rel. I even want to be able to modify the image url added by the content editor, if possible.
The output should look like this
<a href="/media/2813/DSC_2615.JPG" data-rel="prettyPhoto[gal-3-col]" >
<img src="http://domain.com/imageGen.ashx?
image=%2fmedia%2f2813%2fDSC_2615.JPG&width=420" alt="DSC_2615" title="DSC_2615"
class="alignright">
</a>
I found this very useful link http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx which solve half of my issue, but I can't figure out how to continue
Default umbraco tinymce add image interface is
<plugin loadOnFrontend="false">umbracoimg</plugin>
I was able to modify it to show additional field in the image selection interface, then render markup I want.
I edited \umbraco\plugins\tinymce3\insertImage.aspx, added my field there and some jquery logic:
<ui:PropertyPanel id="pp_desc" runat="server" Text="Description">
<input type="text" id="title" style="width: 300px"/>
</ui:PropertyPanel>
...
Then if you are adding custom attributes, you might want to add them to \config\umbracoSettings.config
<!-- what attributes that are allowed in the editor on an img tag -->
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>
and \config\tinyMceConfig.config
<validElements>
<![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align],-h2[id|dir|class|align],
-h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],
dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],code[*]]]>
</validElements>
Then I modified the .js that is in charge of rendering html that will be added to tinymce editor:
\umbraco_client\tinymce3\plugins\umbracoimg\js\image.js
ed.execCommand('mceInsertContent', false, '<div id="__dimps_width" class="img-with-text"><img id="__mce_tmp" /><p id="__dimps_desc">description</p></div>', { skip_undo: 1 });
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');
ed.dom.setAttribs('__dimps_width', {style: 'width: ' + nl.width.value + 'px;'});
...
One important thing: everything is cached and bundled, so to make sure your changes was applied remove all files from \app_data\TEMP\ClientDependency\ and use new instance of incognito browser. You probably can disable it somewhere, but I just removed the cache.
There is no magic in Umbraco TinyMCE. Just a bunch of .aspx and .js code. Modify it to your needs.
I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!