I am updating a project to TYPO3 11 and encountered the following problem:
The project uses v:page.resources.fal to retrieve images from other pages to be presented as teaser images. The image path gets rendered as /path/to/file.jpg.
Then using v:media.exists to check if an image exists, and when not, display a generic placeholder image.
Contrary to TYPO3 10, in 11 v:media.exists requires this path to be provided without a prepending slash: path/to/file.jpg. Breaking existing modules using this feature. (Absolute paths are also not accepted).
Is there an elegant way to remove a prepending slash without having to write a custom viewhelper?
So the real question to my problem was "how do I check if a corresponding page has an image in resources".
Turns out, using VHS I can simply check the ID of the page, and see if there is a media count above 0:
<f:if condition="{v:page.info(pageUid: '{uid}', field: 'media')} > 0">
<f:then>
Show Image
</f:then>
<f:else>
Show Fallback
</f:else>
</f:if>
This circumvents my need for v:media.exists altogether.
I recommend to use a dataprocessor for that.
Here you can find a solution for Files (Images).
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/DataProcessing/FilesProcessor.html
Related
I have a bigger webpage and it would take days to add the loading=lazy attribute to all img tags on my site. Is it useful to use something like $('img'). attr('loading', 'lazy') (does this work?) to the site, or will it just make the site more slower?
It doesn‘t necessarly have the expected effect - if you‘re adding the attributes via JavaScript, the page itself has already been parsed by the browser and their preloading scripts as well and all of those images would be been put to the download queue, as if the attribute wouldn‘t have existed on them.
So I would heavily recommend to add those attributes within the source code itself already.
Cornerstone's carousel didn't work for my client's design, and so I built a custom hero component that I've included on several custom page templates. To allow the client to manually update images, I've set the hero images to use the {{cdn}} handlebars helper to pull images down from WebDAV.
E.g. background-image: url('{{cdn "webdav:img/home-hero.jpg"}}');
The issue we're running into now, is that, because the CDN caches asset files for the site on the server, when my client updates home-hero.jpg through WebDAV, the server has no way of knowing, and so it continues to serve the old version of home-hero.jpg.
Is there a way for my client to force re-caching of assets, or to bypass it altogether? I've attempted to use the imbypass parameter (webdav:img/home-hero.jpg?imgbypass=on), but this apparently just serves the unoptimized, but already cached, image.
One solution would be to append a random query string to the image src URL to prevent caching. If you're developing on a Stencil theme, the easiest way to accomplish this would be to use the {{moment}} helper to generate a date string so you can be sure you're getting a unique value each time.
<img src="/content/home-hero.jpg?{{moment}}"/>
will render as:
<img src="/content/home-hero.jpg?2018-08-23T00:00:00-05:00">
More info on using query strings to prevent caching: https://css-tricks.com/strategies-for-cache-busting-css/
I'd like to include a picture in a page element in an Inquest script: is this possible?
If so, how would you do it?
I know this question was asked 8 years ago...but I recently had the same question. So I thought maybe I could put something here in case someone in the future would have a similar question.
You cannot add a picture to the page element in Inquisit 5, but it would be possible in Inquisit 6. For Inquisit 5, you'll have to use or .
Here's some discussion on this: https://forums.millisecond.com/Topic34836.aspx
There is some discussion here.
In general, it seems that the page element only allows for simple text based instructions.
If you want to present images in instructions, there are a few options.
htmlpage element
You can use the htmlpage element, which allows for instructions to be a complete formatted HTML file that can include images.
The htmlpage element is used to define pages of text to be displayed
as instructions using the preinstructions or postinstructions
attribute. The htmlpage element is useful when complete control over
formatting and content of instruction pages is required, otherwise the
page element provides an easier way to display text with basic
formatting. The actual content of the page is contained in a separate
HTML file located on the local machine or the web. source
Picture or picture and text in a normal trial
The other option is to present instructions as normal stimuli in the main trials of a block.
See for example, the instructions in the sample script for the Iowa Gambling Task.
This can be either done as one integrated picture that includes text, or each image can be positioned as it's own stimuli.
Is there any possibility to manually define an image for flattered things?
Or are there plans by the devs to implement this?
Specify the image using Open Graph metadata in the page that is submitted, like you do for eg. Facebook: http://ogp.me/
If you're using WordPress or such there's likely a plugin that you could use.
I just checked the API and there seems to be no way of defining the image upfront. Not with an auto-submit URL and not with the create-thing request.
Only thing I could find is once you created a thing, you can edit it using this URL:
https://flattr.com/thing/edit/<thing-id>
The form has a text field that is labeled Change image by providing an url. (will take some time to update). Enter a URL to an image.
I tried it and it took about 30 secs to update.
I've set up a brochure ware kind of site - with links to different sections in the page.
http://www.leoniepalmer.com/
When clicking a menu item in the top right corner, everything works great!
Now I have a second page at
http://www.leoniepalmer.com/our-gourmet-tours/
And I want the menu to then go back home to the relevant anchor, that is, clicking About will go to
http://www.leoniepalmer.com/#about
Unfortunately (in FF 3.5.6 at least), it seems to append it to the URL and it becomes quite ugly, as well as not going to where it should!
Could it be this rule in my .htaccess, that appends a trailing slash to pages without one?
# Add trailing slash if missing
rewriteRule ^(([a-z0-9\-]+/)*[a-z0-9\-]+)$ $1/ [NC,R=301,L]
How could I modify it to work, or is there something else at play here?
UPDATE
I don't think the answer is helpful at all.
You can link to an Id using the #anchor fragment.
OK, I'm guessing it's because you're using a <div> tag as the target of a link.
Properly, named tags that are the target of links to a location in a page are also <a> tags, your syntax is similar to
<a name="about">About Leonie and Stef Palmer</a>
Here's the source:
source
This creates an anchor around the text "This is the location of anchor one.". Usually, the contents of A are not rendered in any special way when A defines an anchor only.
Having defined the anchor, we may link to it from the same or another document. URIs that designate anchors contain a "#" character followed by the anchor name (the fragment identifier). Here are some examples of such URIs:
An absolute URI: http://www.mycompany.com/one.html#anchor-one
A relative URI: ./one.html#anchor-one or one.html#anchor-one
When the link is defined in the same document: #anchor-one
Just to be safe, you might want to make the link in your navbar to the full document:
About
Not only is this one of the use cases described above, it saves Apache some work. Including the full path lets the browser go straight to the page, whereas not including the name of the document means the browser has to ask Apache on your server what the name of the page is and then go there - 2 connections for the price of 1