TYPO3: Trying to add link to images - typo3

On our site, other admins add images via the "Resources" tab of the main page. These images are displayed as Banners in a Slider on the main page. However, now they want the ability to add links to specific images.
My first thought on this (after receiving some help on making a loop for images to be added to the page) was to perhaps let them be able to add the link to either the "Title" or "Caption" spot I saw there. And later, on the slider "create" function, pull the said data from the image and make <a> wrap around the image before the slider finished building. I've already tested the slider plugin with this functionality, and that would work fine, however, I can't seem to pull anything from the "Title" or "Caption" and add it to the image in any way.
My other thought would be, is there a way to extend the back end to give them an actualy spot to paste links on images so that I may pull that and wrap the image via the typoscript, or can i pull from caption and wrap image in <a> "if" the link is available.
In other words, does typoscript have a type of "if" statement? What I ahve so far, thanks to maholtz is as follows:
#BANNER IMAGES LOOP BEGIN
page.10.marks.topimage = TEXT
page.10.marks.topimage {
# retrieve data
data = levelmedia: -1, "slide"
override.field = media
# we have some filenames in a list, let us split the list
# and create images one by one
# if there are five images selected, the CARRAY "1" will be executed
# five times where current is loaded with only one filename
split {
# the images are separated via ","
token = ,
# you can do funny stuff with options split, f.e. if you want to give first
# and last image a different class... but thats another topic;)
# we just say, render every splitted object via CARRAY "1"
cObjNum = 1
1 {
# just render the single image,
# now there should be one filename in current only
10 = IMAGE
10 {
file.import.wrap = fileadmin/user_upload/|
file.import.current = 1
border = 0
file.height = 670
file.width = 1800
altText = Banner
titleText = Banner
# attempt to add link to image if available
caption.1.typolink.parameter.field = image_link
caption.1.typolink.parameter.listNum.stdWrap.data = register:IMAGE_NUM_CURRENT
}
}
}
wrap = <div id="slides">|</div>
}
#BANNER IMAGES LOOP END
I was thinking perhaps I could do something like:
10 {
file.import.wrap = fileadmin/user_upload/|
file.import.current = 1
border = 0
file.height = 670
file.width = 1800
altText = Banner
titleText = Banner
# attempt to add link to image if available
caption.1.typolink.parameter.field = ???
caption.1.typolink.parameter.listNum.stdWrap.data = register:IMAGE_NUM_CURRENT
}
But as you can see, I'm stumped on how that might even work right. Can anyone help point me the right way.
As before mentioned, perhaps I could do ONE of two things:
Pull link from "Title" or "Caption" and add it to the IMAGE Date on output so that I can use that client side to wrap the image in appropriate a tag, |OR|
Pull link from there and use typoscript to wrap the image in a tags

When accessing the ressources via levelmedia = slide you're not directly accessing the FAL table. Therefore you have to load it again to access the fields you want. We solved exactly the problem you have with the following code. Insert it inside your 1 after 10 = IMAGE.
typolink{
parameter{
cObject = RECORDS
cObject{
source.current = 1
tables = sys_file_reference
conf.sys_file_reference = TEXT
conf.sys_file_reference.field = #title or description
}
}
}

Related

Render TypoScript Objects in a CommandController

tldr: How do I render a TypoScript COA Object with a GIFBUILDER image from inside a CommandController?
I'm currently developing an eCommerce platform for which I need to periodically import an excel file that holds the product catalog. After a product is created from a row of data in the excel file, a directory is searched for product images related to that item, and they are linked as FileReferences to the product. I've written an ImportCommandController that takes care of that.
This all works like a charm, with the only glaring problem being the performance of the image manipulation. The first call to a product list pages takes a good 30 seconds, the first request of a single view. I periodically need to recreate the whole catalog from scratch, and the source product images are huge files, I have no influence on that.
The product images of that catalog are being generated by a TypoScript that takes care of fitting these images inside a square white background, returning the IMG_RESOURCE url. I call that TypoScript from inside a Fluid template with the cObject ViewHelper.
I've been trying to call this bit of TypoScript from the ImportCommandController->importAction, so that the import cronjob would take care of creating these scaled images beforehand, with the same filename hash, so they're already processed when they're called by the single view. But I can't manage to do that.
The TypoScript in question ist this:
plugin.tx_productfinder_products {
// Productfinder-Produktbilder
// Bilder quadratisch auf weissen Hintergrund einpassen
productimage = COA
productimage {
// Daten der FileReference im Regsiter ablegen
10 = FILES
10 {
references.data = current
renderObj = COA
renderObj {
10 = LOAD_REGISTER
10 {
param = TEXT
param.data = file:current.uid
}
}
}
20 = IMG_RESOURCE
20 {
file = GIFBUILDER
file {
XY = 960,960
format = jpg
quality = 95
backColor = #ffffff
20 = IMAGE
20 {
offset = 960-[20.w]/2,960-[20.h]/2
file {
import.data = current
treatIdAsReference = 1
maxW = 960
maxH = 960
}
}
// // Text aus Daten der FileReference als Wasserzeichen ins Bild rendern
// 30 = TEXT
// 30 {
// //text.data = register:param
// text.data = current
// fontColor= #dddddd
// fontSize = 12
// offset = 20,[20.h]-20
// align = left
// antiAlias = 1
// }
}
}
}
}
And I call these from inside the Fluid template like so:
<img class="img-responsive" src="{f:cObject(typoscriptObjectPath:'plugin.tx_productfinder_products.productpreviewimage', data:'{image.uid}')}">
What have I tried so far? Pretty much everything.
I've first tried to call the ContentObjectRenderer directly,
/** #var \TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer $cObj */
$contentObject = GeneralUtility::makeInstance('TYPO3\\CMS\\Frontend\\ContentObject\\ContentObjectRenderer');
$contentObject->setCurrentVal($image->getUid());
$content = $contentObject->cObjGetSingle($this->settings['productimagetest'], $this->settings['productimagetest.']);
resulting in these weird errors.
Oops, an error occurred: PHP Warning: imagejpeg(typo3temp/GB/csm_8000424600_cbbd127be3_9cb1d3c8cc.jpg): failed to open stream: No such file or directory in /html/typo3/typo3_src-7.6.16/typo3/sysext/core/Classes/Imaging/GraphicalFunctions.php line 2912
It seems that the TYPO3 Configuration regarding the Grapics Processing isn't initialized in the same way as it is for the Frontend.
Next, I tried instanciate a StandaloneFluidView to render the whole SingleItem template per item, but I cant figure that out because the Request and Context are missing and so the partials being referenced in the template aren't being rendered.
Then I tired to just create the FrontendUrls per single item and request them from the CommandController,
/** #var \TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer $cObj */
$contentObject = GeneralUtility::makeInstance('TYPO3\\CMS\\Frontend\\ContentObject\\ContentObjectRenderer');
$test = $contentObject->typolink_URL(array(
'parameter' => 671,
'additionalParams' =>
'&tx_productfinder_products[product]='.$product->getUid().
'&tx_productfinder_products[action]=show'.
'&tx_productfinder_products[controller]=Product',
'returnLast' => 'url'
));
$this->outputLine(print_r($test,true));
but the URLs generated in this way are missing the cHash.
Can anybody offer help or a different approach to this?
Since these images are generated just once for the frontend output and are then available anyway, I don't see the advantage of generating them beforehand. The white square could be easily generated with CSS, so to me this does not even look like a use case for the GIFBUILDER.
That being said there's still something you could do: Since you are in the PHP context already, why don't you instanciate the GIFBUILDER directly or use even pure IM/GM commands instead of going for an IMG_RESOURCE which is actually meant to be output in the frontend?
I know this is an old question, but I had the same issue and had to invest some time to debug it, so maybe this this answer is useful for someone else in the future.
The CLI uses a different working directory than the frontend, therefore the relative path to typo3temp/ directory used in the GifBuilder class cannot be resolved, which results in the above mentioned warning.
To fix the relative path resolution, you have to change your working directory to the frontend one, this can be achieved by:
class AcmeCommand extends Command
{
protected static $cwdBackup;
protected function execute(InputInterface $input, OutputInterface $output)
{
if (Environment::isCli()) {
static::$cwdBackup = getcwd();
chdir(Environment::getPublicPath());
}
//
if (Environment::isCli()) {
chdir(static::$cwdBackup);
}
}
}

Social media links in TYPO3 using typoscript

I'm newbie to TypoScript. I actually don't know how to make link like this:
By googling, I got some idea on typoscript like this:
lib.social = COA
lib.social.special = language
lib.social.special.value = 0,1,2
lib.social.1 = GMENU
lib.social.1{
wrap = <ul> | </ul>
noBlur = 1
expAll = 1
NO = 1
NO {
ATagTitle.field = title // nav_title
stdWrap.htmlSpecialChars = 1
wrapItemAndSub = <li> | </li>
accessKey = 1
}
}
lib.social.1.NO{
XY = [5.w]+4, [5.h]+4
5 = IMAGE
5.file = {$global.imagePath}facebook.png || {$global.imagePath)twitter.png || {$global.imagePath)xing.png
5.offset = 2,2
}
I'm sure I got a problem with lib.social = language and I also try different things lik directory or browse but it still does not work and I may have some mistakes with the above script which I can't figure out.
In overall, I don't know how to make it work by linking to the external urls using typoscript.
Thanks
Most of social networks has their own embedding code so you don't need to create it manually, just can put into the marker the code...
lib.social = COA
lib.social.10 = TEXT
lib.social.10.value = <fb:like send="true" width="450" show_faces="true"></fb:like>
you can also use www.addthis.com to place many different social buttons
If you need to use custom graphics anyway, use common links, each with custom id attribute, then just use CSS to set it's display as block set the width,height, float (to make sure the each button is in the sam line, and finally background-image with your buttons. Use sprite technique for the image for best results (all buttons in one file, then set correct button for link with background-position
I see u just want to have some image menu.
Create a new page of type Menu Separator in your pagetree
Create a new page for every menu item and use type Link to External URL (don't forget to fillin the url in the page properties)
Upload your image inside the page properties under Resources -> media
Use the code below to show the menu on your front-end (replace special.value = 2000 with the page ID of your social page.
Code: http://shrib.com/gRrK9uGL
(sorry didnt get the code visible here)

How to get row values from a Rounded Rectangle List in Dashcode?

I am new to dashcode and trying to build a simple web app for iphone using it. My primary aim is to have a Rectangular List (I have used the "Rounded rectangle list"). It is a static list and has three rows. What I want is a website to open when user clicks on any of the row, and each row would have a different URL. I was able to add a Rounded rectangle list with three static rows like
The object ID is "list"
Row 1-- Label- "Gift Cards" , Value - "http://www.abcxyz.com/giftcard"
Row 2-- Label- "Toys" , Value - "http://www.abcxyz.com/toys"
Row 3-- Label- "Bikes" , Value - "http://www.abcxyz.com/bikes"
i added onclick even to call a java script function like below
function myButtonPressHandler(event)
{
var websiteURL = "http://www.abcxyz.com/giftcard";
location = websiteURL;
}
the above code opens the same URL "http://www.abcxyz.com/giftcard" when the user clicks on any of the three buttons, but what I want is to fetch the value of each child node (which would be their respective URLs) at runtime and open it using location = WebsiteURL something like below (did'nt work for me :( -
function myButtonPressHandler(event)
{
var websiteURL = document.getElementById("list").children;
var WebURL = websiteURL[???].value;
location = WebURL;
}
Any help would be appreciated.
Thanks
OK ... so figured out my own answer. The Rounded Rectangular list is actually a multidimensional array. so to get the value of each of the rows i.e. the Http URLs and open them on the browser when the rows were touched/tapped/pressed is as below.
function buttonpresshandler(event)
{
// Insert Code Here
var list = document.getElementById("list").object;
var selectedObjects = list.selectedObjects();
//Open webpage with the value of each label
location = selectedObjects[0][1];
}
Hurray!

How to change Typo3 Backend layout Name using TypoScript?

By default typo3 Back end layout give Normal,Left,Right and Border.
To hide the blocks i used following code
mod.SHARED.colPos_list = 0,1,2
How to rename the blocks in Typo script:
Normal - Description
Left- News
Right - Publications
Border - Footer
When inserting the following in the Page TSConfig of the root page, the values of the dropdown "Columns" are changed when editing content elements:
TCEFORM.tt_content.colPos.altLabels {
0 = News
1 = Description
2 = Publications
3 = Footer
}
Unfortunately, this is only halfway :(
According to Spalten ändern und umbenennen you'll need to edit typo3conf/extTables.php which affects all pages in the tree:
t3lib_extMgm::addPageTSConfig('
mod.SHARED.colPos_list = 0,1,2,3
');
$TCA["tt_content"]["columns"]["colPos"]["config"]["items"] = array (
"1" => array ("News||||||||||","1"),
"0" => array ("Description||||||||||","0"),
"3" => array ("Publications||||||||||","3"),
"2" => array ("Footer||||||||||","2"),
);
If you're using TYPO3 4.5+, you can use the new feature called backend layout or grid view.
It is very easy to use. You don't have to edit PHP-code. You just have to configure it using a wizard.
Joey Hasenau has written a good article at news.typo3.org about how to use the backend layout.
I hope, this facilitates your daily work!

To add id and name for image inside tinymce?

I am trying to insert id and name for image inside tinymce.
var content=tinyMCE.get('faq_answer').getContent()+"--img tag is given here--";
I can add image inside tinymce by giving alt, title but i cant add id and name.
If you want to add an element at the end of your editors content i would do something like this (this way you do not have to get all the editors content and set it again):
var doc = ed.getDoc();
// create a new img element
var img = doc.createElement('img');
img.title = 'title';
img.src = '/images/my_image.gif';
img.id = 'my_id';
img.name = 'imagename';
// add the new img element to the dom
ed.getBody().appendChild(img);
Some attributes may vanish (be cleaned up) depending on the configuration of valid elements. If this configuration is not set a standard rule set will apply. You may extend this rule set using the extended valid elements option. There is a nice example concerning img elements :)