So far I successfully configure image variations in theme and render different variations of one image in ftl template
[#assign myAsset = damfn.getAsset("jcr","/futuristic_city_1.jpg")!]
[#if myAsset??]
<img src="${myAsset.link}"/>
[#assign myThumbnail = damfn.getRendition(myAsset, "240x180")!]
[#if myThumbnail??]
<img src="${myThumbnail.getLink()}"/>
[/#if]
[/#if]
I would use Device Detection module to detect incoming requests but can't find any guide or sample code on how to use it in FTL template to pick proper image variation.
2nd question is what should I use if the content is rendered with ReactJs components (their content loaded with JSON data retrieved from JCR)
There is a community module to do that. It has a filter and attempts to detect the device upon request. For more information: https://documentation.magnolia-cms.com/display/DOCS57/Device+Detection+module
the best and most modern way would be to define several image variants and define a set of responsive images.
the new html standards includes the attribute "srcset" for the img-tag:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
in a responsive website the best fitting image will be loaded by the browser
Related
I am trying to implement Retina.js plugin for displaying alternate images on retina display. This will certainly work if I have a fixed image path hardcoded into the page or theme but how do I make this work through the Image block? Or is there a better alternative to this?
That library sounds a little heavy handed in just pinging your server for every single image. However, if you include it in the page it should work just fine.
One thing to keep in mind is that by default concrete5 uses the <picture> tag to output from the image block. Any library you use should have compatibility with that tag.
If you end up using a library that requires you output the image differently, I'd recommend creating a custom \Concrete\Core\Html\Image subclass and binding it to the container in you /application/bootstrap/app.php file:
<?php
$app->bind('html/image', \My\Custom\Image::class);
Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla
My page is showing regular component presentations very well.
I have a flash/video file in my local machine and i want to upload this file on my page.
How can I achieve this?
I have this code snippet for rendering components on my page:
<!-- TemplateBeginRepeat name="Components" -->
<!-- TemplateBeginIf cond="ComponentTemplate == 'HomePageCT'" -->
##RenderComponentPresentation()##
<!-- TemplateEndIf -->
<!-- TemplateEndRepeat -->
Please provide all details related to flash files and video files.
Placing a Flash file on a page follows exactly the same process as placing any image in the output of your templates. The steps are outlined below:
Create a Multimedia Schema which allows the Flash multimedia type (e.g. Flash Video Schema)
Upload your Flash file using your new Schema
Create a Component Template to render the HTML you want to use to display the Flash file, and actually publish the binary itself. (e.g. Display Flash CT)
Create a page template (you seem to have done this part) which renders the Page, and renders the Components on the page using ##RenderComponentPresentation()##
Create a Page, and place your Flash file on it using the Display Flash CT
Publish the Page
Without details of the output you want to produce, it is hard to provide the sample Dreamweaver Template Building Block code for the DisplayFlash CT, but it might look something like this:
<embed src="##Component.Id##" allowFullScreen="true" width="540"
height="438" bgcolor="#000000" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
Make sure you use the Default Finish Actions TBB after this in your Component Template so that the src link is processed and the binary is published.
There is nothing special about Flash files with Tridion. They can be treated just like any other Multimedia Component. You can upload them into the CME (or by using Webdav) and thus you will have a Multimedia Component. Make sure of course, that you Multimedia Schema allows the Flash (and extension) as Multimedia Type.
Regarding how you put the Flash file on the Page - again just like a normal Multimedia Component. In your CT you have to generate the output that will make use of your Flash file URL somewhere. You will have to publish your Flash MMC in order to get its URL. You can use Engine.AddBinary or RenderedItem.AddBinary methods for that, or use the Publish Binaries in Package Default TBB, if your MMC is in the package. Then you can simply refer to your Flash URL as package item. Have a look at this URLs for some inspiration: http://yatb.mitza.net/2012/03/publishing-images-as-variants.html (your case doesn't have to be that complex) and http://yatb.mitza.net/2012/04/referencing-image-variants-from.html.
There are several approaches to rendering Multimedia with a Tridion-managed page.
Multimedia components can be:
Part of a component presentation, added to a page with a template selected
As a linked-to multimedia component within a "container" component, which is added to a page
In a rich text format (RTF) area within another component
You could also just publish binaries with dynamic component templates and handle the markup and links outside of Tridion. Get creative with the above basic scenarios depending on the markup and/or metadata you need.
Chris addresses #1 and Mihai explains schema setup and .AddBinary. The second option would be similar, except you'd have to get the referenced ID rather than the component on the page. The third option requires you to parse multimedia within RTF which depends on your templating language and multimedia type.
I've seen XSLT (<xsl:template match="">), grep, and various .replace options to parse specific markup such as Flash videos.
In SDL Tridion, Dreamweaver template, I have to set a relative path to my image in Page Template.
Tridion produces output as below when I do have code like this in DWT.
DWT Markup
<img src="##Field##"/>
Template Renders
<img src="image.jpg"/>
However when I add a relative path like this, the template returns tcmid
DWT Markup
<img src="Folder/img/##Field##" type="text/css" rel="stylesheet"/
Template Renders
<img src="tcm:8-674"/>
And this causes images not being presented properly in website. I tried with Tridion type: multimedia etc, but nothing has worked so far.
Has anyone seen a similar issue before?
The behaviour you experience is that Tridion (the Dreamweaver mediator) will interpret your src image attribute as WebDAV path of an item in the Content Manager. So if it finds a Multimedia Component under Folder/img/##Field##, it will replace your path with the TCMURI of that Multimedia Component. That's expected behaviour.
However, I don't think that's what you are trying to do (it's not clear from your question). Is your image in Tridion as a Multimedia Component? Are you trying to show this image? Then you should use Multimedia Links (i.e. links to a Multimedia Component) in your DWT: <img src="##Compoennt.Fields.link_to_mmc##"/>, where field link_to_mmc is a Multimedia Link field defined in your Schema. Use then also the 'Resolve Links' Default TBB to convert the TCMURI into a relative image path.
If you are linking to an external image, then you need to specify the URL of that image in your DWT template. Something like this <img src="##Component.Fields.external_url##"/>, where external_url is a Text field in your Schema and it contains the actual URL of the external image you want to show.
It seems like you are almost there, only when you add the string as a relative path, the default TBBs don't recognize the uri held in the SRC attribute anymore. If you are trying to publish the binary to a different location, you will need to bind it to a different Structure Group, alternatively try changing the multimedia URL on your publication. that way the images will be published (and resolved) to you sub directory.
If your imagefields field is a link to a Multimedia Component, then all you need is <img src="##Field##"/>. With that Tridion will (in this order):
replace the ##Field## with the TCM URI of the image (e.g. tcm:6-874) when it executes the DWT
put the image item into the package as an implicit step after executing the DWT
publish the images (as one of the steps in the Default Finish Actions)
replace the TCM URI (tcm:6-874) with the path of the published image
Since you'll probably have custom TBBs between the DWT and the Default Finish Actions, you could use those to modify the image item and influence what gets published (and where, using item properties).
If you've set up your Tridion installation correctly, you'll typically store the base path to the images in the Publication properties and then step 3 just puts the the image in there and step 4 puts the full path (including what you specified in the Publication properties) into the HTML.
If you want more control over the relative path, the Publish Binaries in Package and Default Finish Actions TBBs have a parameter that allows you to specify to which Structure Group the images will be published. That way you can have different templates output their images to different Structure Groups/directories on disk.
For the ultimate in control you can also decide to publish the binaries yourself. In that case have a look at the source of the Publish Binaries in Package TBB (available from the forum on SDL Tridion World), modify it to suit your needs and replace the one in Default Finish Actions with your modified version.
Pipbox says it's "Plone 4 compatible way to do AJAX pop-ups in Plone 3".
http://plone.org/products/pipbox
Then, what's the proper way of doing jQuery Tools image pop-ups in Plone 4?
Scan HTML for images using selector
Install click handler
On click open the image in pop-up, using one of predefined sizes from plone.app.imaging
All pipbox really does is load plone.app.jquerytools support in Plone 3. In Plone 4, plone.app.jquerytools is built in.
plone.app.jquerytools loads jQuery Tools and some Plone-specific support for easy AJAX popups. That support allows you to associate AJAX popups with jQuery-selectable page components. See the PYPI page for full documentation.
A quick example: let's say that you want to set up lightbox-style popups for images in the content area using the preview-scale supplied by plone.app.imaging. JS to do this is:
jQuery( function($) {
$('img.image-right, img.image-left, img.image-inline')
.prepOverlay({
subtype: 'image',
urlmatch: '/image_.+$',
urlreplace: '/image_preview'
});
});
You would load this code by registering a javascript resource as a skin or browser layer, then add it to the portal_javascripts js resources.
The code:
Sets up a function to load when the page is ready, with "jQuery" aliased to "$";
Selects all image items in the page that use the styles used by the visual editor;
Calls the prepOverlay routine (from plone.app.jquerytools) to associate them with overlays;
Specifies that the overlays will be images, which means that size information may be determined from the loaded image;
Does a little regular expression matching and replacing to pick up the image URL and convert it to a preview.