In my Umbraco 7.15.7 I'm displaying images in the Partial Views Macro Files as follow:
figure>
#if (newsItem.HasValue("articleImg"))
{
<img src="#Umbraco.Media(newsItem.articleImg.ToString()).Url" class="img-fluid news-img" alt="#newsItem.Last().photoAlt" />
}
(the reason for the .ToString() is after I switched from Obsolete to Media.Picker2 - so since it's string)
In my Umbraco 11.1 I was struggle to display the images. I tried the following and it didn't display the images, but also didn't throw an error, just didn't display the images:
<img src="#Umbraco.Media(newsItem.Value<IPublishedContent>("articleImg").ToString()).Url()" class="img-fluid" alt="#Imaging_pagesToList.Last().Value("photoAlt")" />
So I tried this one:
<img src="newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="#newsItem.Value("photoAlt")" />
And this one also doesn't show any image
I also tried this one (the same as above, just with # - #newsItem) , and this throw an error: "Argument 3: cannot convert from 'method group' to 'object?'":
<img src="#newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="#newsItem.Value("photoAlt")" />
So I tried this one:
var image = newsItem.Value<IPublishedContent>("articleImg");
<img src="#image.Url()" class="img-fluid" alt="#newsItem.Value("photoAlt")" />
And this is finally works! And I don't understand why? (why this works, and why the previous didn't work)
My question are:
Why only the last one works?
Why the first two doesn't work?
Is this is the right way to render images in Umbraco 11.1 ?
In the official documentations of Umbraco (9 and up) they suggest to render images as follow:
var mediaItem = Umbraco.Media(Guid.Parse("55240594-b265-4fc2-b1c1-feffc5cf9571"));
But they hard coding the Guid in their examples.
Not sure how to get the Guid for each node.
Please advise.
Thanks.
Please check what property editor is used; maybe it's a collection and not a single media. In that case, you will need something like:
newsItem.Value<IEnumarable<IPublishedContent>>("articleImg").First().Url()
I'm working on a Gatsby app with Netlify CMS (and hosted on Netlify). Trying to get the metadata working so that Twitter cards display correctly with images.
The metadata is generally all right, but the images aren't showing on the Twitter validator or if I try to post to Twitter. The problem is clearly the images themselves, which are hosted on the site using Gatsby and Gatsby Image Sharp to render.
In fact, the validator seems to show no fundamental issues. Simply, the image doesn't show up:
Example relevant metadata:
<meta name="twitter:url" content="https://example.com/" data-react-helmet="true">
<meta name="twitter:image" content="https://example.com/static/12345/c5b20/blah.jpg" data-react-helmet="true">
<meta data-react-helmet="true" name="twitter:title" content="Site title">
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image">
I know the images the issue, because if I replace my image URL (which is the full image URL) with an external URL, it works fine, showing the full card with image.
Any idea what could be causing this? I'm sizing the image down so it loads quickly, and it seems to load just fine directly (eg). (I mean, is there something weird/off about that image?)
NOTE: In a previous version of this question, I referenced Cloudinary and Uploadcare, but have since removed those two in a branch to simplify the problem. (They seem to have been unecessary holdovers from the starter app I used.) You can now see an example page for that branch here and the associated image in the twitter:image tag here. I feed this pre-processed/shrunk image into the header using React Helmet (and Gatsby React Helmet) and using the following code in my GraphQL call to get the image associated with the blogpost in that particular, smaller format:
featuredimage {
childImageSharp {
fixed(width: 480, quality: 75) {
src
}
}
Second Note/thought: Should I be worried about the fact that the pages in production seem to be re-rendering on every reload? Isn't SSR supposed to ensure that doesn't happen? I tested this by including a call to Math.random(), hidden, in the page. You can see the result by running document.getElementsByClassName('document')[0].children[0].innerText, and note that it produces a different number on each page reload. This implies to me that the whole page is being re-rendered by the client. Isn't that wrong? Why would that be happening? Might that relate to some sort of client processing of the images on each request, which might be screwing up the Twitter cards?
Third update: I put together a simpler reproduction here. It's based off of this starter template, with Uploadcare/Cloudinary removed and Twitter card metadata added to the header. Other than that, and removing unnecessary pages, I didn't make any other changes. I used this starter for a repro rather than a vanilla starter app, because I'm unsure whether the issue is caused by the interaction of Netlify CMS and the Gatsby Sharp Image plugin. I might try to put together a second reproduction. For now, the code for this repo is here, and the pages that should show Twitter cards are the blog posts, such as this one.
ACTUALLY, it seems that a super basic reproduction, with Gatsby 3 and no Netlify CMS or anything, has the same issue. Here's the minimal reproduction, with the image taken from src/images using an allImageSharp query and inserted into the metadata for each page. Code here.
FINAL UPDATE
Based on Derek's answer below, I removed the #reach/router stuff, and got the site URL from Netlify build env variables. It appeared that #reach/router only gave this information when JS was running, which excluded the Twitterbot, resulting in an undefined base URL, which broke the Twitter image. Including the URL from Netlify (using process.env.URL in the Gatsby config and pulling that in through a siteMetadata query) fixed the problem!
Update:
I think I might have found the issue. When opening the minimal production with script disabled, the url for twitter:image is invalid:
<meta data-react-helmet="true" name="twitter:image" content="undefined/static/03475800ca60d2a62669c6ad87f5fda0/58026/energy.jpg">
So for some reasons, during build, the hostname is missing, but when JS kicks in, it appears (Might have something to do with the way you get the hostname). Twitter crawlers probably does not have JS enabled & couldn't fetch the image.
Make sure your opengraph images are absolute urls with https:// or http:// protocols. I checked your example link & saw that it was a relative link (/static/etc.)
For Twitter, it seems to demand social cards to be 2:1
Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels.
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
If you're using the latest Gatsby image plugin, you can use aspectRatio to crop the image.
Also note that you can skip the twitter:image tag, if your og:image has already satisfied Twitter's card requirement.
SSR does not mean to never run JS in the client, React will render your page on the client side regardless of SSR.
This was solved here: https://github.com/gatsbyjs/gatsby/discussions/32100.
"location and thus origin is not available during gatsby build and thus the generated HTML has undefined there."
I got it working by changing the way I create the image URL inside seo.js from this:
let origin = "";
if (typeof window !== "undefined") {
origin = window.location.origin;
}
const image = origin + imageSrc;
to this:
const imageSrc = thumbnail && thumbnail.childImageSharp.fixed.src;
const image = site.siteMetadata?.siteUrl + imageSrc;
You need to use siteUrl from siteMetadata.
Below is my pageQuery from inside blog-post.js:
export const pageQuery = graphql`
query BlogPostBySlug(
$id: String!
$previousPostId: String
$nextPostId: String
) {
site {
siteMetadata {
title
siteUrl
}
}
markdownRemark(id: { eq: $id }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
thumbnail {
childImageSharp {
fixed(width: 1200) {
...GatsbyImageSharpFixed
}
}
}
}
}
}
`
I'm trying to use data-interchange from Foundation 5 with slim as follows:
= image_tag('', 'data-interchange' => "[#{image_path('umed-image-large.jpg')}, (medium)], [#{image_path('umed-image-small.jpg')}, (small-only)]")
The problem is that it works the first time when loading the page but when clicking on a logo in the nav bar (the url is the same), the image is no more displaed. I observed the generated HTML in the Chrome console when the image is displayed:
<img data-interchange="[/assets/umed-image-large-45e4ffd1823f658bf167972ba4a8cad74797963d9a8906f65a8710d1c7458145.jpg, (medium)], [/assets/umed-image-small-97b7dfa3c6ca88e76b355eece97b723f458ae455f501013d1b0084ce0f5bd953.jpg, (small-only)]" src="/assets/umed-image-large-45e4ffd1823f658bf167972ba4a8cad74797963d9a8906f65a8710d1c7458145.jpg" data-uuid="interchange-j30j01nh0">
And here is the HTML when there is no image:
<img data-interchange="[/assets/umed-image-large-45e4ffd1823f658bf167972ba4a8cad74797963d9a8906f65a8710d1c7458145.jpg, (medium)], [/assets/umed-image-small-97b7dfa3c6ca88e76b355eece97b723f458ae455f501013d1b0084ce0f5bd953.jpg, (small-only)]" src="">
As you see, there is no src data in the latter case. Any idea what is wrong here ? Thank you.
I'm in the middle of upgrading a very old project to the latest version of rails. So I've read a ton about the changes to the Asset pipeline between rails 3.0 and 3.1, including this entire page, and I've followed all the steps in part 9. I've also read quite a few stack exchange questions dealing with what appears to be the same issue as mine. None of these are working though.
In app/views/layouts/_sidebar.html.erb I have this html:
<img id="admin_img" style="border:none"
src="/images/<%= in_server_menu ? 'expanded' : 'collapsed' %>.gif" />
After upgrading, I've changed that src= to all of the following:
src="<%= image_path(in_server_menu ? 'expanded.gif' : 'collapsed.gif' )%>"
src="/assets/<%= in_server_menu ? 'expanded' : 'collapsed' %>.gif"
src="/assets/images/<%= in_server_menu ? 'expanded' : 'collapsed' %>.gif"
src="assets/<%= in_server_menu ? 'expanded' : 'collapsed' %>.gif"
src="app/assets/images/collapsed.gif"
and numerous similar paths, but the image fails to load. The actual HTML output for the first two is
src="/assets/collapsed.gif"
which APPEARS to be correct, as my file system looks like this:
project_folder
->app
->assets
->images
->collapsed.gif
Firefox shows the default "broken image" thumbnail, though, and image info says it's 0 bytes and cannot be loaded, which makes me think it's not being found. I've restarted the server since making changes, and manually opening the file with Firefox works, so the image isn't broken.
Rails.application.assets.paths contains
/path/to/the/project/folder/app/assets/images
as well as the other assets folders.
I've confirmed that the src tag I am modifying is indeed the broken image I'm looking at, so it's nothing as simple as that.
What else can I do to make this image load? What other troubleshooting steps can I take? I am also having issues with other assets not being loaded yet that I can see when I load a page and watch the server output, but I have not yet tackled those.
try like that:-
<%= image_tag (in_server_menu ? "expanded.gif" : "collapsed.gif"), :id => "admin_img", :style => "border:none" %>
Safari on iPhone automatically creates links for strings of digits that appear to the telephone numbers. I am writing a web page containing an IP address, and Safari is turning that into a phone number link. Is it possible to disable this behavior for a whole page or an element on a page?
This seems to be the right thing to do, according to the Safari HTML Reference:
<meta name="format-detection" content="telephone=no">
If you disable this but still want telephone links, you can still use the "tel" URI scheme.
Here is the relevant page at Apple's Developer Library.
I use a zero-width joiner
Just put that somewhere in the phone number and it works for me. Tested in BrowserStack (and Litmus for emails).
To disable the phone parsing appearance for specific elements, this CSS seems to do the trick:
.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }
The first rule disables the click, the second takes care of the styling.
Add this, I think it is what you're looking for:
<meta name = "format-detection" content = "telephone=no">
I was having the same problem. I found a property on the UIWebView that allows you to turn off the data detectors.
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
Solution for Webview!
For PhoneGap-iPhone / PhoneGap-iOS applications, you can disable telephone number detection by adding the following to your project’s application delegate:
// ...
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
// disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
return [ super webViewDidStartLoad:theWebView ];
}
// ...
source: Disable Telephone Detection in PhoneGap-iOS.
To disable phone number detection on part of a page, wrap the affected text in an anchor tag with href="#". If you do this, mobile Safari and UIWebView should leave it alone.
1234567
You can also use the <a> label with javascript: void(0) as href value. Example as follow:+44 456 77 89 87
Think I've found a solution: put the number inside a <label> element. Haven't tried any other tags, but <div> left it active on the home screen, even with the telephone=no attribute.
It seems obvious from earlier comments that the meta tag did work, but for some reason has broken under the later versions of iOS, at least under some conditions. I am running 4.0.1.
My experience is the same as some others mentioned. The meta tag...
<meta name = "format-detection" content = "telephone=no">
...works when the website is running in Mobile Safari (i.e., with chrome) but stops working when run as a webapp (i.e., is saved to home screen and runs without chrome).
My less-than-ideal solution is to insert the values into input fields...
<input type="text" readonly="readonly" style="border:none;" value="3105551212">
It's less than ideal because, despite the border being set to none, iOS renders a multi-pixel gray bar above the field. But, it's better than seeing the number as a link.
I had an ABN (Australian Business Number) that iPad Safari insisted on turning into a phone number link. None of the suggestions helped. My solution was to put img tags between the numbers.
ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709
The class exists only to document what the img tags are for.
Works on iPad 1 (4.3.1) and iPad 2 (4.3.3).
I have tested this myself and found that it works although it is certainly not an elegant solution. Inserting an empty span in the phone number will prevent the data detectors from turning it into a link.
(604) 555<span></span> -4321
I had the same problem, but on an iPad web app.
Unfortunately, neither...
<meta name = "format-detection" content = "telephone=no">
nor ...
0 = 0
9 = 9
... worked.
But, here's three ugly hacks:
replacing the number "0" with the letter "O"
replacing the number "1" with the letter "l"
insert a meaningless span: e.g., 555.5<span>5</span>5.5555
Depending on the font you use, the first two are barely noticeable. The latter obviously involves superfluous code, but is invisible to the user.
Kludgy hacks for sure, and probably not viable if you're generating your code dynamically from data, or if you can't pollute your data this way.
But, sufficient in a pinch.
A trick I use that works on more than just Mobile Safari is to use HTML escape codes and a little mark-up in the phone number. This makes it more difficult for the browser to "identify" a phone number, i.e.
Phone: 1-800<span>-</span>620<span>-</span>3803
Why would you want to remove the linking, it makes it very user friendly to have th eoption.
If you simply want to remove the auto editing, but keep the link working just add this into your CSS...
a[href^=tel] {
color: inherit;
text-decoration:inherit;
}
<meta name = "format-detection" content = "telephone=no"> does not work for emails: if the HTML you are preparing is for an email, the metatag will be ignored.
If what you are targeting are emails, here's yet another ugly-but-works solution for ya'll:
Example of some HTML you want to avoid being linked or auto formatted:
will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.
And the CSS that will make the magic happen:
#media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}
The drawback: you may need a media query for each of the ipad/iphone portrait/landscape combos
You could try encoding them as HTML entities:
0 = 0
9 = 9
Same problem in Sencha Touch app solved with meta tag (<meta name="format-detection" content="telephone=no">) in index.html of app.
This answer trumps everything as of 6-13-2012:
<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>
Change the color to whatever matches your text, text decoration removes the underline, pointer events stops it from being viewed like a link in a browser (pointer doesn't change to a hand)
This is perfect for HTML emails on ios and browser.
I too have this problem: Safari and other mobile browsers transform the VAT IDs into phone numbers. So I want a clean method to avoid it on a single element, not the whole page (or site).
I'm sharing a possible solution I found, it is suboptimal but still it is pretty viable: I put, inside the number I don't want to become a tel: link, the HTML entity which is the Word-Joiner invisible character. I tried to stay more semantic (well, at least a sort of) by putting this char in some meaning spot, e.g. for the VAT ID I chose to put it between the different groups of digit according to its format so for an Italian VAT I wrote: 06136050488 which renders in 06136050488 and it is not transformed in a telephone number.
Another option is to replace the hyphens in your phone number by the character ‑ (U+2011 'Unicode Non-Breaking Hyphen')
I was really confused by this for a while but finally figured it out. We made updates to our site and had some numbers converting to a link and some weren't. Turns out that numbers won't be converted to a link if they're in a <fieldset>. Obviously not the right solution for most circumstances, but in some it will be the right one.
Break the number down into separate blocks of text
301 <div style="display:inline-block">441</div> 3909
Adding the meta tag to turn off format detection did not work for me. I was trying to display a zoom meeting ID in a <p> tag along with other text and iOS was turning that ID into a tel link. Additionally, I was targeting tel links via a[href^="tel:"] in order to give them custom styling so disabling the styles on tel links was not an option.
The solution I found was to wrap the ID number in a <code> tag. This seems to prevent iOS from messing with it.