I try to build the link for a lightbox in my template of the extension calendarize.
The smaller images are correct, but in my lightbox wrong images are shown.
The title, the description ... are fine
<f:for each="{event.images}" as="image" iteration="i">
<a href="{f:uri.image(src:image.uid)}"
class="lightbox" rel="lightbox[{image.uid}]"
title="{image.originalResource.title}"
alt="{image.originalResource.alternative}">
<f:image src="{image.uid}" treatIdAsReference="1"
alt="{image.originalResource.title}"
maxWidth="200"
class="img-rounded"/>
</a>
<figcaption>{image.originalResource.title}</figcaption>
</f:for>
Thanks for any help.
I solved the problem by myself. I had to add
treatIdAsReference:1
to get
<a href="{f:uri.image(src:image.uid treatIdAsReference:1)}"
Related
I would like to expand the content element "menu of subpages" with images from page resources.
In TYPO3 8.7 the following code did everything i needed:
<f:if condition="{menu}">
<ul class="pagemenu-img">
<f:for each="{menu}" as="page">
<li>
<a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
<f:image src="fileadmin/{page.files.0.originalFile.identifier}" />
<span>{page.title}</span>
</a>
</li>
</f:for>
</ul>
</f:if>
With TYPO3 10.4 this isn't working anymore.
Is there another way? Preferably without using VHS.
It's still working.
I have tested your HTML-Template and the result is as expected:
Your problems seem to be something other...
Maybe there were some pages which didn't have any images with them...
You should therefore check if there is an image present:
[and get rid of the hardcoded fileadmin/ link there by< just using {page.files.0.originalFile}]
<f:if condition="{menu}">
<ul class="pagemenu-img">
<f:for each="{menu}" as="page">
<li>
<a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
<f:if condition="{page.files.0}">
<f:image image="{page.files.0.originalFile}" />
</f:if>
<span>{page.title}</span>
</a>
</li>
</f:for>
</ul>
</f:if>
As in the photo above, I would like to get rid of the scroll bar along with the history of all the likes and reblogs which are located once you click on the photo on my blog. Where would I locate this in the custom CSS on tumblr and which code would I use?
I have been looking at this code, but not sure where to go next.
{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=250px/></div>{LinkCloseTag}
<ul class="like_and_reblog_buttons">
Thank you.
OK, so in the template on line 408 I simply wrapped the notes component in html comments so they don't get rendered in the browser.
Simply changing:
{block:PostNotes}
</center></center>
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
To:
<!--
{block:PostNotes}
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
-->
Full html template saved here: https://pastebin.com/yva5npcW
I've also removed the redundant
</center></center> that tag is obsolete:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Nothing is being rendered in those erroneous tags.
Before:
After:
I use a Fluid Template for the backend: mod.web_layout.tt_content.preview
Is it possible to get images from FAL or data from an IRRE element in this template?
For the frontend there is the TYPO3\CMS\Frontend\DataProcessing\FilesProcessor for example. Could that also be used in backend?
You would need a custom VH (IMO VHS also provides those) which gets you the data. It is not possible by default with the core.
I ended up lately to use the hook PageLayoutViewDrawItem in TYPO3\CMS\Backend\View\PageLayoutView for doing that. That was the easiest way.
As Georg Ringer has already mentioned, you can render preview images in Fluid Preview Templates with the VHS ViewHelper v:resource.record.fal
https://viewhelpers.fluidtypo3.org/fluidtypo3/vhs/5.0.1/Resource/Record/Fal.html
As record I must pass the argument _all because I have no other record available.
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
data-namespace-typo3-fluid="true">
<f:if condition="{assets}">
<v:content.resources.fal field="assets" as="images" record="{_all}">
<f:for each="{images}" as="image">
<f:if condition="{image}">
<f:image src="{image.id}" treatIdAsReference="1" width="100"/>
</f:if>
</f:for>
</v:content.resources.fal>
</f:if>
</html>
I am using Fancybox gallery with cushyCMS for my client. It will be useful if I can create more main images as a series of photos for particular thumbnail, but in this case I want to hide empty src images so there are no white images when pictures are extended and client doesn`t fill it.
<li>
<div class="wrap">
<a class="fancybox" rel="group1" href="images/GaleryPicSixSM.png">
<img id="thumbnailSix" class="cushycms thumbnail" src="index_15_1769179488.png" caption="thumbnail 6" />
</a>
<img id="mainPicutureSix" class="cushycms main" src="" caption="main image 6">
</div>
</li>
Is there anyway how I can hide automatically empty src in case that client will not find relevant picture ? Unfortunately there is no possibility in cushyCMS for my client to add a more pictures under one thumbnail.
If you can use jQuery, the following code would do the trick:
$('img [src=""]').hide();
I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.