Shopify liquid error 'invalid url input' in json - json

Custom Shopify 2.0 theme built on Dawn. Using Customize and selecting an image from Settings > Files. Image appears correctly in Customize and appears correctly in the website. However, the console shows this error in the json (btw line 13 in the section refered to is blank)...
<blockquote>
<p></p>
<cite>
<img
alt=""
height="0"
loading="lazy"
src="Liquid error (sections/media-quotes.liquid line 13): invalid url input"
width="0"
/>
</cite>
</blockquote>

Related

Google Search Console shows "Disallowed attribute or attribute value present in HTML tag " for <amp-img layout="fixed"

I don't understand why the layout="fixed" is an disallowed attribute value. Could anyone please help find a solution to this error being shown for several pages across our Magento store?
<amp-img layout="fixed" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy lazy-loading lazy-blur p1only" name="NewportHotHero" data-src="/images/5b22c63cd95b2.jpg" width="1500" id="NewportHotHero" height="1"></amp-img></a>
The actual content for this category in the Magento Admin is as follows:
<p><img id="NewportHotHero" class="p1only" style="display: none;" src="/images/5b22c63cd95b2.jpg" width="1500" name="NewportHotHero" border="0" /> <a name="pro_d"></a></p>
Your all attribute looks right, except name="NewportHotHero".
The
"name"
attribute is not documented in documentation.
Or you can play your code posted here and see the error.

HTML reference to image file on Google Drive does not work

I want to embed an icon for my website. The relevant HTML shall retrieve it via "src=..." from a folder on my Google Drive. I have given the folder and also the image file public access rights. (Finally I want the HTML code to run on the Google platform as well but I can demonstrate the issue also with a locally stored HTML file.)
When I use the links to my folder or to the image file directly in my browser, they show up. I therefore think that there is no authority issue. Also when I use a reference to a copy of the image file on my local PC, it works.
The code below shows 4 cases. The first 2, referring to the locally stored file, work and the last 2, referring to the file on the Google drive, do not work.
<!DOCTYPE html>
<html>
<head>
Test on local PC
<br><br>
</head>
<body>
1. Image from same directory in which this html code resides
<br>
Method: src="test.png"
<br>
<img id="myImg" src="test.png" width="50" height="50">
<br>
2. Image from directory on local PC
<br>
Method: src="C:/Users/MattheisenP/Desktop/test.png"
<br>
<img id="myImg" src="C:/Users/MattheisenP/Desktop/test.png" width="50" height="50">
<br>
3. Image from directory on Google Drive using the drive's key
<br>
Method: src="https://drive.google.com/drive/folders/0B9P-4EpF1HhMXzdoQ2tJSXotVmc/test.png"
<br>
Using this url... https://drive.google.com/drive/folders/0B9P-4EpF1HhMXzdoQ2tJSXotVmc in the browser brings me to the folder
<br>
<img id="myImg" src="https://drive.google.com/drive/folders/0B9P-4EpF1HhMXzdoQ2tJSXotVmc/test.png" width="50" height="50">
<br>
4. Image from directory on Google Drive using the files key
<br>
Method: src= "https://drive.google.com/file/d/0B9P-4EpF1HhMb0trR1NXbVhXNTg"
<br>
Using this url... https://drive.google.com/file/d/0B9P-4EpF1HhMb0trR1NXbVhXNTg in the browser displays the icon
<br>
<img id="myImg" src="https://drive.google.com/file/d/0B9P-4EpF1HhMb0trR1NXbVhXNTg" width="50" height="50">
<br>
</body>
The outcome is as follows:
As you see, the last two fail. What is wrong with my syntax or my understanding of the concept?
Thanks for any helpful hint.
Now I found a syntax which works:
https://docs.google.com/uc?id= enhanced with the FileID. In the example above the statement
<img id="myImg" src="https://docs.google.com/uc?id=0B9P-4EpF1HhMb0trR1NXbVhXNTg" width="50" height="50">
gives the expected result and the icon is shown. So, the file ID was correct as well as the access rights. But the methods/syntax as proposed in several articles and used in case 3 and 4 above did not work (at least not for me). The syntax with https://docs.google.com/uc?id= provides the image as required.

Error "Saw a start tag image." while validating HTML code

I made something with the HTML code and trying to validate it through w3.org website. It was showing the following error:
Error: Saw a start tag image.
From line 15, column 210; to line 15, column 290
="_blank"><image src="http://banglakitab.com/img/img_header.gif" height="48" width="128" /></a>
What could be wrong?
Image tag in html :
<img src="source_of_image" alt="alternate text" />
its not <image />.
Refer : HTML Images
Your image tag is not valid you should use img tag instead of image. And the image tag must have alternate (alt) property/attribute.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
<img src="http://banglakitab.com/img/img_header.gif" height="48" width="128" alt="banglakitab" />

Grails Doc Tags

Information on the grails documentation tool is sparse.
I could only find this small section in grails.org
The authors also mention that gdoc tags are similar to Textile or Confluence markup.
But so far, I have been unable to figure out how to simply align an image.
In Confluence: !someImage.png|align=center! should work, yet doesn't for gdocs.
In Textile: %align:right% should add html styles but doesn't work for gdocs either.
Is there anywhere I could find a complete reference for tags that can be used in gdoc files?
EDIT:
I have also tried...
!{padding-left: 10em;}image.png!
!=image.png!
!>image.png!
Is there no support for this in grails docs?
Images can be aligned as below
//center
!=someImage.png!
// should result
<p><img src="someImage.png" align="center" alt="" /></p>
//right
!>someImage.png!
// should result
<p><img src="someImage.png" align="right" alt="" /></p>
Test it in textile.
Here is a set of syntax definitions for images. I guess wiki syntax has already been referred.

Google Translate URL on website

I have problem with Google translate urls... On my website I put 3 linked flags - one in my language, others in english and german. Strukture of my flags:
<div class="language">
<img src="img/pl.png" alt="" />
<img src="img/en.png" alt="" />
<img src="img/de.png" alt="" />
</div>
When I translate website first time - everything is OK. But when I click flag on "translated" website Google wants to translate url from href, not my url... And I get error "URL is invalid"... Any solutions?
I would be glad for help! Thanks!