I am trying to use page content images in typo3 pages. I have uploaded 2 images and in DB only the filenames are stored.
OK - I found the images in uploads direcory!
But now how I have to display the image?!
I can hrdcode the upload dir url and add the filename from db, but It's realy ugly and not flexible.
I tryed to use <f:image /> but no chance since it's expecting a resource path?!
OK - I found the resource dir but I can't upload images there from the standart typo3 page in cms.
The <f:image /> is realy usefull for me because I need to display images in different sizes and crop them. This all is implemented in the ViewHelper, but I can not tell the ViewHelper to take my image in upload dir.
Please help me how to use the images on pages. The menu for uploading images on page contrent is realy usefull in backend, but I can not display the result in frontend.
In case, the upload directory is set in the TCA columns config (uploadfolder), you can write your own viewHelper and get the upload directory e.g.
/**
* #param Tx_(extkey)_Domain_Model_(entity class) $entity
* #return string rendered image tags
*/
public function render($entity) {
$html = '';
$GLOBALS['TSFE']->includeTCA();
$uploadfolder = $GLOBALS['TCA']['tx_(extkey)_domain_model_(entity class)']['columns']['(column_name)']['config']['uploadfolder'];
$images = explode(',', $entity->getImages());
foreach ($images as $image) {
$html .= $this->getImageTag($uploadfolder, $image, $width);
}
return $html;
}
Have a look at the Tx_Fluid_ViewHelpers_ImageViewHelper class (especially the render method) for code to format your image tags.
try using something like this: <f:image src="uploads/tx_extensionname/{object.image}" alt="foo" title="bar" maxHeight="50" />
See the Fluid Wiki Page
Related
I need to render a partial from my Main Template (SitePackage) within a MASK content element. The partial is located in the folder Resources/Private/Partials and the fluid code of my content element is located in Resources/Private/Extensions/Mask/Frontend/Templates.
This is my (testing) partial (Test.html):
<div class="header">
<h3>Dies ist ein Partial</h3>
</div>
In the MASK content element I try to render it with <f:render partial="Test"/>, but it doesen't work, the page is showing the following error message:
The Fluid template files "[...]/Resources/Private/Extensions/Mask/Frontend/Partials/Test.html", "[...]/Resources/Private/Extensions/Mask/Frontend/Partials/Test" could not be loaded.).
Is there a way to render a partial from outside my Extension folder?
Thanks in advance for any help!
Like for any FLUID templating you can add further paths to select layout, template or partial.
Just add the further paths with new numbers to the list of these paths.
In mask you define the paths like:
module.tx_mask.view {
layoutRootPaths.30 = EXT:your_site_extension/Resources/Private/Layouts
partialRootPaths.30 = EXT:your_site_extension/Resources/Private/Partials
templateRootPaths.30 = EXT:your_site_extension/Resources/Private/Templates
}
plugin.tx_mask.view {
layoutRootPaths.30 = EXT:your_site_extension/Resources/Private/Layouts
partialRootPaths.30 = EXT:your_site_extension/Resources/Private/Partials
templateRootPaths.30 = EXT:your_site_extension/Resources/Private/Templates
}
Mind the plural -s in "layoutRootPaths", "templateRootPaths" & "partialRootPaths"! > TYPO3 Docs - FLUIDTEMPLATE
But be careful if you mix different templating sets like page-templates, mask-/CE-templates, news-templates, ....
you might get naming conflicts!!
I have to prevent loading backgrounds by style="" attributes in the frontend but still need to be able to set up background images from the cms.
TYPO3 has a default stylesheet (e.g. typo3temp/stylesheet_[hash].css?[timestamp] for loading CSS registred by TypoScript:
plugin.tx_myext._CSS_DEFAULT_STYLE (
.css {}
)
But is it possible to extend this css file from a Extbase Controller?
Unfortunately \TYPO3\CMS\Core\Page\PageRenderer has not such a functionality.
I also tried:
$GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_myext.']['_CSS_DEFAULT_STYLE'] = 'body {display:none}';
But it seems that the \TYPO3\CMS\Frontend\Page\PageGenerator generates the page before any content is called.
You can add this to $GLOBALS['TSFE']->additionalHeaderData array, it will add any content to head section of HTML doc, just make sure that used index is unique! so you have two soultions:
One is adding styles directly to head like:
$GLOBALS['TSFE']->additionalHeaderData['tx_yourext_styles_for_action_foo_bar']
.= '<style>body {background: orange;}</style>';
second is the same technique but in better edition, let's say that you have dedicated typeNum - 1234 which generates stylesheet file for given page as a standalone stylesheet file, so you can just include it as usually:
$cssUrl = 'index.php?id=' . $GLOBALS['TSFE']->id . '&type=1234';
$GLOBALS['TSFE']->additionalHeaderData['tx_yourext_styles_for_action_foo_bar']
.= '<link rel="stylesheet" type="text/css" href="' . $cssUrl . '" media="all">';
Of course you can use any other combination ;)
i want to Flip a bunch of Images vertically. In Typoscript i would do that with filelist and the GIFBUILDER Object.
But my Situation is now, that i use a custom Plugin with Extbase Classes and a Fluid Template.
I'm inserting the Images via ...
Does anybody know a good way to vertically flip these images before showing them?
Any Combination of Typoscript and Fluid maybe?
Thanks for your help!
I solved it like this:
In my Extbase Controller i have instantiated t3lib_stdGraphic an transformed the imageas via Imagick. The i saved this image to a directory -> Because i need it in a persistent memory.
The code maybe helpful because i didn't found any good resource for imagick-using in Extbase.
$this->stdGraphic = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('t3lib_stdGraphic' );
$this->stdGraphic->absPrefix = PATH_site;
$this->stdGraphic->init();
$data = getimagesize("fileadmin/buegel_anprobe/".$artikel->getKurznr().".png");
$width = $data[0];
$height = $data[1];
$transform = $this->stdGraphic->imageMagickConvert("fileadmin/".$artikelname.".png",'png', $width, $height, ' -flop', '', '', 1);
$filepath = $transform[3]
' -flop' is the important argument to flip the image vertically
Then i passed the path to the fluid template and insert it via image-viewhelper
Good resource was the following reference: http://doc-typo3.ameos.com/4.1.0/classt3lib__stdGraphic.html
You have two options in my eyes:
First to write your typoscript as usual (e.g. lib.marks.YOUR-IMAGES = CONTENT or something) and render it via <f:cObject typoscriptObjectPath="lib.marks.YOUR-IMAGES"/>.
Second is to write your own view helper and extending the image view helper included in fluid. You can put your special config in there and use it instead of the normal one.
I have an standard image upload in TYPO3 Backend, that allows more than 1 image upload.
So I have an image database field with data like that: "image1.jpg,image2.jpg".
In Frontend, I can explode the field, send the array to fluid, and output it in a fluid:for each like that:
<f:image src="uploads/tx_myext/{image}" />
First question is: is there maybe some fancy new Extbase or Fluid Magic, that creates image objects right from database?
Second question: if I have a huge 2MB image and make a fluid:image output with width=100, is it just scaled in browser, or is it really downsized using ImageMagick?
Comma list to array:
Unfortunately as I can see in Extbase 4.7 there is still no ViewHelper for iterating comma separated strings. You have two options: write custom ViewHelper or stay with the way you are using.
TIP: To avoid passing additional params (especially when you have many comma separated fields there and/or using many Partials for rendering the view) I'm adding a public field to my model. Without representation in TCA it will be considered as transient, ie:
/**
* #var array
*/
public $imagesArray;
and then just filling it in controller right before assigning so I can access it as {project.imagesArray} in the view:
public function showAction(Tx_Myext_Domain_Model_Project $project) {
$project->imagesArray = explode(',', $project->getImage());
$this->view->assign('project', $project);
}
view
<f:for each="{project.imagesArray}" as="image">
<f:image src="uploads/tx_myext/{image}" width="200" height="200m" alt="" />
</f:for>
Most probably you are using quite similar approach...
Image resizing:
It's easiest just to ... check. ImageMagick hashes the name of the resized image and stores it in the temp folder by default, so if in code preview you see the path like: typo3temp/pics/cd27baa408.jpg instead of uploads/tx_myext/photo123.jpg that means it was converted with IM. And yes, image ViewHelper uses the IM.
You can even add perform simple calculations by giving value as width="200m" or width="200c" from viewhelper's phpdoc: See imgResource.width for possible options
Now I created a ViewHelper in Typo3 Forge as I think processing of images as they come from database would be quite usefull.
And I added imageLinkWrap for JS Window.
http://forge.typo3.org/issues/46218
I'm writing a plugin which should add HTML to the page's head area (inludeJS to be exact). Something like this should work:
page.includeJS {
tx_myplugin_pi1 = EXT:my_plugin/pi1/tx_myplugin_fe_scripts.js
}
The problem with that is that I have to assume that "page" would be the universal name used for the page object I want to work with. Since the name of this variable can be anything I would like to do this in a more intelligent way than this.
Is there a way to determine the name of the current PAGE cObject I'm working with?
cu
Roman
You can find out the default PAGE object of the current page using this snippet:
$setup = $GLOBALS['TSFE']->tmpl->setup;
foreach(array_keys($setup) as $key){
if(substr($key, -1) == '.'){
if($setup[substr($key,0,-1)] === 'PAGE' && intval($setup[$key]['typeNum']) === 0){
print substr($key,0,-1) .' is the default PAGE object';
}
}
}
But this won't help you to add the Javascript in the frontend, as the typoscript is being parsed already at that point.
If you want to add the javascript just for your extension I would recommend using:
$GLOBALS['TSFE']->additionalHeaderData['tx_yourextension_plugin'] = '<script type="text/javascript" src="' . t3lib_extMgm::siteRelPath('my_plugin') . 'pi1/tx_myplugin_fe_scripts.js"></script>';
(this wouldn't be merged with the other JS files though)
Actually there is no such way in plain TypoScript. As most installations are using page as keyword - especially those which are under your control - it is really fine to use it.
If you are writing an extension, you can put that into the documentation as a small hint!