1

I need to know, how I can use assets inside of templates. I want to add social media buttons/links to a template, so thought the easiest way would be to use the media browser, but know I don't know how I get the right URI of those image files.

I tried something like

<img src="{f:uri.resource(path: asset://...identifier... />   
<m:image image="{asset://...}" alt='Facebook'/>

but I don't get it.

Maybe I have to put those files inside of the Resouce folder but I hope I can do it with use of the media browser.

Hope I could make my problem clear enought.

lorenz
  • 4,538
  • 1
  • 27
  • 45
dark_982
  • 171
  • 2
  • 13

1 Answers1

1

In this particular case if I were you, I would just add those social buttons to My.Site/Resources/Public/images/social and use them with resource view helper: 

{f:uri.resource(path: 'images/social/fb.png', package: 'My.Site')}

It doesn't make sense to copy asset identifier from media browser and hardcode it in template. Those ids might be different in your colleague database, your client might remove this asset by accident and so on.

So I would suggest adding those social buttons (sprite maybe) to static resources of your package, create partial with all social buttons and use this partial in page/node templates where you need them.

If you really want to use one of media:image or media:uri.image view helpers, you need to pass asset object (not identifier) as an argument. Use for that node properties - add fbIcon, twitterIcon etc. with type: TYPO3\Media\Domain\Model\ImageInterface to your node definition in NodeTypes.yaml, then insert node and choose your icons from media browser (using inspector), then in your node template:

{namespace media=TYPO3\Media\ViewHelpers}
<ul>
<li><a href="#"><media:image image="{fbIcon}" alt="fb" />..
<li><a href="#"><media:image image="{twitterIcon}" alt="twitter" />..

I haven't use Neos for a while, so it might have changed a bit.. And of course you can create your own view helper which will accept asset id and using AssetRepository and ResourceManager you can return public uri to template.

k.tarkin
  • 726
  • 3
  • 9
  • Thanks for your suggestion. I've done it adding a new elment which act as an external link and can show an image from the asset browser, so you can customize it from the backent. The idea of using the asset browser for static (templates) was to only have one place for all images and not multiple (assetbroser and file system). – dark_982 Jan 26 '16 at 10:32