I am using Fluid for developing a typo3 v8.1 template. I want to give the user the possibility to comfortable change the logo in the backend. It should be possible to change the logo for each page.
How to do this?
You can use typoscript for this.
lib.logo = IMG_RESOURCE
lib.logo.file = fileadmin/logo.jpg
lib.logo.file.width = 100
lib.logo.file.height = 100
lib.logo.stdWrap.wrap (
<img src="|" alt="logo"/>
)
So, when the user wants to change the logo, the thing is need to do is to change lib.logo.file.
Check this code :
lib.logoImage = FILES
lib.logoImage {
references {
table = pages
uid.data = tsfe:id
data = levelmedia: -1, slide
fieldName = media
}
renderObj = TEXT
renderObj {
data = file:current:publicUrl
wrap = <img src="|" />
}
}
Add logo : edit page, go to page resources tab and add logo image
Related
I have a tinymce editor in which I want to extend it to add accordion. Is there an easy way to do this?
The file is way too big to add it though what I am basically trying to do is add a new button on the editor as shown below;
tinymce.init the toolbar has a new button called acccordionInsert
tinymce.init({
...
toolbar1: 'undo redo | link customImage media snippetInsert template formInsert acccordionInsert | bold italic forecolor backcolor',
...
accordionInser function;
function accordionInsert(editor) {
editor.focus();
var highlightedContent = $(tinyMCE.activeEditor.selection.getContent());
$('#accordionFormPopup').remove();
$('body').append('<div id="accordionFormPopup" class="popup accordionFormPopupBackground"><div id="addAccordionFormPopup"></div></div>');
$('#addAccordionFormPopup').load('/test/widgets/accordionForm.php');
$('#accordionFormPopup').fadeIn(500, 'linear');
}
add button fuction inside editor setup, this basically triggers the fuction above when clicking the button in the editor
editor.addButton('accordionInsert', {
icon: 'arrowdown',
title: 'Insert accordion',
onclick: function() {
accordionInsert(editor);
}
});
Everything mentioned above works fine, the probalem is in the accordionForm.php file
the file has a dropdown option which you can select which accordion you want to add on the editor, this queries a database and upon inserting it it will use the following function to display it
function insertSnippet(){
if(!$('#insertSnippet').hasClass('disabled')){
id = $('#snippetSelect').val();
tinyMCE.activeEditor.execCommand('mceInsertContent',false,"<div class='snippetWrapper' contenteditable=false><div class='snipCode'>[accord,id="+id+"]</div>Please save the page for the accordion to display.</div>");
$('#accordionFormPopup').fadeOut(function(){
$('#accordionFormPopup').remove();
});
}
};
I haven't figured out a way to style the tinyMCE.activeEditor.execCommand mentioned above or make it display an accordion somehow, as of now it just diplays the selected id but I want to be able to display the name and content from the database and then use css to display them as an accordion.
I actually figured out the issues.
I just had to echo the content which is probably not the best idea but works for now.
if(stristr($content,"[accord"))
{
$accordionCount = substr_count($content, '[accord');
if(!$db) {
$db = new DB;
}
for($i=0; $i < $accordionCount; $i++)
{
$pos = strpos($content,"[accord");
$endpos = strpos($content,"]");
$incData = trim(substr($content,$pos+1,$endpos-$pos-1));
$accordionId = afterlast('id=', $incData);
//finding accordion content
$db->query("SELECT aName, aContent FROM ls_accord WHERE aId='$accordionId'");
$db->next_record();
list($aName, $aContent) = $db->Record;
//wrapping content in accordion indicator
echo "</br><div class='myAccordion'><button class='menu'>$aName<span class='arrow rarrow'>+</span><span class='arrow darrow'>-</span></button><div class='panel close'><div style='padding:10px'>$aContent</div></div></div>";
$content = str_replace("[accord,id=$accordionId]", $displayContent, $content);
}
$content = str_replace("|{|processedAccordion", "[accord", $content);
$content = str_replace("|}|", "]", $content);
}
I have a site running Typo3.
If I add an element of the type image or textpic, I want the <img>-tag to be surrounded by a couple of divs. So, i thought, i have to use typoscript for that.
So I added:
tt_content {
image.20.wrap = <div class="hello">|</div>
}
I can see it in the object-browser, but it isn't displayed in the frontend. From what i got so far, is, that for image and textpic I have to override this image.20.
Typoscript:
tt_content {
uploads.wrap = <div class="tro-uploads-wrap">|</div>
}
tt_content {
table.wrap = <div class="tro-table-wrap">|</div>
}
tt_content.image.20.imageStdWrap.wrap = <div>|</div>
Adding a wrap around the whole element can be done via:
tt_content.image.20.stdWrap.wrap = <div>|</div>
If you just want to wrap the image it self, use
tt_content.image.20.imageStdWrap.wrap = <div>|</div>
Can't quite find an issue that fits the following characteristics, so I'm Asking you guys for some help. (I found this ref, for example, but I can't seem to be able to adapt it to my needs: jquery background image preloading)
I have a PHP-built gallery. I have a PHP code that looks for all images in a folder and then puts them up into my "Gallery" section. This is all working great. The issue is that I would like to minimize load-time.
Because I am using the $(window).load() in order to set the page display once overall load is completed, when my user gets to the gallery section, this takes a long time. In order for the entire page (plus section) to quickly load and then each individual image to take its time, I would like to first use low-quality images so the page loads quickly and the user can at least see them as "previews," then the high-quality images should preload (probably triggered by the same $(window).load()) in the background to eventually substitute the low-quality ones once their individual load process is complete.
Perhaps my approach has not been the best (you must keep in mind that I initially just wanted the simple PHP-to-Gallery function) but it's all I have so far.
So, first, I now have a folder called "gallery" and a child folder called "thumbs". In both folder I have the same images: one, high-qual, the other, low-qual.
I have the following PHP that takes care of finding all my images and getting info from them:
$img_types = array('png','jpg');
$imgs_gallery = array();
foreach($img_types as $img_type):
foreach(glob('img/gallery/thumbs/*.'.$img_type) as $th_img_filename):
$imgs_gallery[] .= $th_img_filename;
endforeach;
endforeach;
$imgs_gallery = array_reverse($imgs_gallery);
foreach($imgs_gallery as $th_img_filename):
$stripped_filename = explode('/',$th_img_filename);
$stripped_filename = $stripped_filename[3];
$stripped_filename = str_replace('th_','',$stripped_filename);
$targetWidth = 500;
$targetFinalResizeWidth = 999;
//Thumb
$th_img_size = getimagesize($th_img_filename);
$th_img_position = explode('-',$th_img_filename);
$th_img_position = $th_img_position[1];
$th_img_position = explode('.',$th_img_position);
$th_img_position = preg_replace('/[0-9]+/', '', $th_img_position[0]);
$th_img_positions = array('l'=>'left','c'=>'center','r'=>'right');
$th_img_position = $th_img_positions[$th_img_position];
$th_sourceWidth = $th_img_size[0];
$th_sourceHeight = $th_img_size[1];
$th_sourceRatio = $th_sourceWidth / $th_sourceHeight;
$th_scale = $th_sourceWidth / $targetWidth;
$th_scaleFinalResize = $th_sourceWidth / $targetFinalResizeWidth;
$th_resizeWidth = (int)($th_sourceWidth / $th_scale);
$th_resizeHeight = (int)($th_sourceHeight / $th_scale);
$th_finalResizeHeight = (int)($th_sourceHeight / $th_scaleFinalResize);
if($th_resizeHeight<499):
$th_imgholderHeight = $th_resizeHeight;
else:
$th_imgholderHeight = 499;
endif;
//BIG Img
$img_filename = str_replace('thumbs/th_','',$th_img_filename);
$img_size = getimagesize($img_filename);
$img_position = explode('-',$img_filename);
$img_position = $img_position[1];
$img_position = explode('.',$img_position);
$img_position = preg_replace('/[0-9]+/', '', $img_position[0]);
$img_positions = array('l'=>'left','c'=>'center','r'=>'right');
$img_position = $img_positions[$img_position];
$sourceWidth = $img_size[0];
$sourceHeight = $img_size[1];
$sourceRatio = $sourceWidth / $sourceHeight;
$scale = $sourceWidth / $targetWidth;
$scaleFinalResize = $sourceWidth / $targetFinalResizeWidth;
$resizeWidth = (int)($sourceWidth / $scale);
$resizeHeight = (int)($sourceHeight / $scale);
$finalResizeHeight = (int)($sourceHeight / $scaleFinalResize);
Then comes the HTML that runs for each image found:
<div class="element one_photo photo">
<div class="hd">HD Loading...</div>
<div class="mask">
<div class="masktxt">
ZOOM
</div>
</div>
<div class="imgholder" style="<?php
echo 'width: 199px;';
echo 'height: '.$th_imgholderHeight.'px;';
echo 'background-image: url('.$th_img_filename.');';
echo 'background-size: '.$th_resizeWidth.'px '.$th_resizeHeight.'px;';
echo 'background-position: '.$th_img_position.' center';
?>">
</div>
</div>
<?php
endforeach;
?>
All the PHP code does is find the images and put them into an array, invert the order of the array, then output the images, finding their height and width and all that in order to make them look nice and all the same size in the gallery.
As you can see, the 'thumb' image is displayed as the background-image of the imgholder. On top of that layer, the "HD Loading..." text will show in order to let the user now that better-quality photos are on the way.
What I want to achieve (and for this I am thinking jQuery) is that, once the page is fully loaded and everything is displayed fine, so the user doesn't have to wait, the high-quality photos start preloading or loading in the background. To be substituted, as each one finished loading, as the background-image of its respective imgholder; upon which time the "HD Loading..." div should be called to hide() or fadeOut().
I have a form for user input in which users can add images hosted elsewhere using a form. The images are displayed as a small icon which is both a link and which will load an image into a div with stacking order +1 on hover. The image source address is stored in the link tag only.
I am using a <div /> with contenteditable=true for the user input. The icon is appended when the form is used. The code for this part works fine. What I would like to do is check the source of all image tags to make sure that users are not adding their own html to display full size images in their post.
I am using php on the backend to remove all tags except links and images, but would like to use jQuery to check the src of the image tags before posting.
<img src="my_icon" /> //this is what my form will input
<img src="anything_else"> //this is what I want to prevent
Update: I apologize if this is not clear. Essentially, I don't want the user to be able to input any html of their own. If they want to add an image, they have to use my built in form which inserts something like above.
You could loop over the images and then check the src attribute.
$("img").each(function(index) {
if ($(this).attr("src") == ...) {
// do something
}
}
See http://api.jquery.com/each/ and http://api.jquery.com/attr/ for more information.
Say we have the <div id="editor" /> the jQuery script would look something like this:
var srcs = [];
jQuery ('div#editor img').each (function () {
srcs.push (jQuery (this).attr ('src'));
});
srcs will now hold all the src-attributes from the <img />-tags provided in the <div id="editor" /> tag.
Especially for your site following code alerts the links for all images:
$('.postimage').each(function(){
alert($(this).attr('href'));
});
I have an answer. When users input a < or > in a contenteditable="true" div, the browser replaces them with the html notation < and >. The good news is the images would have never displayed when outputting the user comment. The bad news is that the jQuery based solutions given above will not work to remove the ugly coding. I ended up using php to do it with
$post = $_POST['comment'];
$imgcheck = true;
$stringstart = 0;
while($imgcheck == 'true'){
if($stringstart = strpos($post,'<img',$stringstart)){
if ($stringend = strpos($post,'>',$stringstart)){
$strlength = $stringend - $stringstart +4;
$substring = substr($post,$stringstart,$strlength);
if (!preg_match('~src="\/images\/ImageLink.jpg"~',$substring)){
$post = str_replace($substring, "", $post);
}
else{
$stringstart = $stringend;
}
}
else{
$imgcheck = 'false';
}
}
else{
$imgcheck = 'false';
}
}
I am using CKEditor with PHP.
Using the sample PHP where the $code variable gets echoed printing the code that triggers the CKEditor to show. I do the same only in a real layout and the what happens is the Editor engulfs the surroding HTML inside it as if it was the initialValue for it.
Any idea why I am getting this, please?
Here is the code:
// Include CKEditor class.
#require_once("ckeditor/ckeditor.php");
// Create class instance.
$CKEditor = new CKEditor();
// Do not print the code directly to the browser, return it instead
$CKEditor->returnOutput = true;
// Path to CKEditor directory, ideally instead of relative dir, use an absolute path:
// $CKEditor->basePath = '/ckeditor/'
// If not set, CKEditor will try to detect the correct path.
$CKEditor->basePath = 'ckeditor/';
// Set global configuration (will be used by all instances of CKEditor).
$CKEditor->config['width'] = 600;
// Change default textarea attributes
//$CKEditor->textareaAttributes = array("cols" => 80, "rows" => 10);
//Set formatting options
$config['toolbar'] = array(
array( 'Source','-',
'NewPage','Preview','Templates','-',
'Cut','Copy','Paste','PasteText','PasteFromWord','-',
'Undo','Redo','-',
'Find','Replace','-',
'SelectAll','RemoveFormat','-',
'Maximize', 'ShowBlocks'),
'/',
array('Bold','Italic','Underline','Strike','-',
'Subscript','Superscript','-',
'NumberedList','BulletedList','-',
'Outdent','Indent','Blockquote','-',
'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-',
'Link','Unlink','Anchor','-',
'Image','Flash','Table','HorizontalRule','SpecialChar'
),
'/',
array('Format','Font','FontSize','-',
'TextColor','BGColor')
);
//Set skin
//$config['skin'] = 'kama';//kama si defailt skin for 3.4
//Set language and UI Color
$config['language']='ro';
//$config['uiColor']='#AADC6E';
//Remove the html tags in the status bar (e.g. body p strong for when cursor is in a strong tag within a p tag within the body)
$config['removePlugins']='elementspath';
//Allow / deny resizing of editor from dragging the bottom-right corner. Maximize will still work.
$config['removePlugins']='resize';//Remove resize image
$config['resize_enabled ']=false;//Disallow resizing
//Remove the collapse formatting area button (arrow on the middle-right part of the editor
//$config['toolbarCanCollapse']=false;
// The initial value to be displayed in the editor.
$initialValue = '';
//Add the CKFinder for upload of files directly from the `Add Image` / `Add Flash` buttons.
include_once($CKEditor->basePath.'ckfinder/ckfinder.php');
// You can use the "CKFinder" class to render CKFinder in a page:
$finder = new CKFinder();
$finder->BasePath = 'ckeditor/ckfinder/'; // The path for the installation of CKFinder (default = "/ckfinder/").
//$finder->SetupCKEditor($CKEditor,$CKEditor->basePath.'/ckfinder/');
// Create first instance.
$CKEditorOutput = $CKEditor->editor("continut",$initialValue,$config);
Afterwards, I just do: $output.='<div>'.$CKEditorOutput.'</div>;
Of course, the layout around the div in which the CKEditor resides is larger.
Thank you!
Ah, got it...
This line: $CKEditorOutput = $CKEditor->editor("continut",$initialValue,$config);
The layout contains a div with an ID selector of "continut", so <div id="continut">. Thus messing everything up and turning that div and all inner HTML into the RTE Textarea.
Sorry and thanks everyone!