I have an issue with Facebook Instant Articles validation. For one of my articles this error message pops up:
Slideshow Contains Unsupported Elements: Only image elements can appear in a slideshow. Ensure that slideshow (at /html/body/article/figure[3]) only contains supported elements. Refer to Slideshows under Format Reference in Instant Articles documentation for more information.
Here's the code:
<figure class="op-slideshow">
<figure>
<img src="https://www.example.com/image1.jpg">
<figcaption>Caption1</figcaption>
</figure>
<figure>
<img src="https://www.example.com/image2.jpg">
<figcaption>Caption2</figcaption>
</figure>
</figure>
It was generated by the official PHP SDK, and in the example they are using very similar structure. (http://take.ms/nookv) Is this a bug?
you can't add a figcaption for each slide, only images can be enclosed within the inner tags.
Correct format would be:
<figure class="op-slideshow">
<figure>
<img src="http://example.com/path/to/img1.jpg" />
</figure>
<figure>
<img src="http://example.com/path/to/img2.jpg" />
</figure>
<figure>
<img src="http://example.com/path/to/img3.jpg" />
</figure>
<figcaption>This slideshow is amazing.</figcaption>
</figure>
I've found the problem. It had nothing to do with the structure. One of the images was a GIF, which as it turns out, isn't supported in a slideshow.
Related
SOLVED
I Simply did not have the closing a tag at the end. Sheesh....
I need help. I'm still a student so still learning. Any help would be appreciated. I'm lost.
I'm using bootstrap5, adding a carousel ("With captions" https://getbootstrap.com/docs/5.1/components/carousel/ for the full code.) to a page and a link in that slide on the h5.
After adding the link, the text went from white to blue and gives me this
"Cannot GET /WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
I've checked this address NUMEROUS times. Even said it out loud to myself. The link IS in the same folder as the rest of the project.
So why won't it work?
I tried to google and found "data-bs-target" does that have anything to do with it? Like I said, still new so still learning.
****Someone pointed out I missed the quotes in the link. Did not fix it.
I added that quote. It was discolored so I don't know where that came from but I think it's because you were right about the quotation style.
I commented that whole line out and started over. I just wanted to see the difference.
So now, the blue is gone in the lettering but now it won't even open another page to show an error. It does nothing.
First slide label
Key West Photo Gallery -->
This is my code snippet ---- KeyWestPhotoGallery.html is the link I'm trying to get to.
<!-- Carousel of Projects -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/palmLighthouse1.jpg" class="d-block w-100" alt="Key West Lighthouse">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-2"><a href=“KeyWestPhotoGallery.html>Key West Photo Gallery</a></h5>
<!-- <p>Some representative placeholder content for the first slide.</p> -->
</div>
You have:
<a href=“KeyWestPhotoGallery.html>
That is not a quote " as used in HTML, that is a Unicode Left Double Quotation Mark a.k.a. opening typographer's quote (a display character with no special meaning). So it thinks that is part of the URL that is why it is urlencoded into that address as %E2%80%9C
let path = "/WilliamVest/%E2%80%9CKeyWestPhotoGallery.html"
console.log(decodeURI(path))
Solutions include the following:
Remove it: <a href=KeyWestPhotoGallery.html> (Unquoted attribute-value syntax)
Or, replace it adding the missing closing quote: <a href="KeyWestPhotoGallery.html"> (Double-quoted attribute-value syntax)
Or, use single quotes: <a href='KeyWestPhotoGallery.html'> (Single-quoted attribute-value syntax)
On photoswipe docs the markup is div/figure/img. But i want other markup.
How to "Creating an Array of Slide Objects" for this ul/li/figure/img markup. I know i need somehow to edit the "var initPhotoSwipeFromDOM = function(gallerySelector) {" function. But do not now what the changes i need to do?
This is my markup:
<ul class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<li>
<figure>
<a href="large-image.jpg" data-size="600x400">
<img src="small-image.jpg" itemprop="thumbnail"/>
</a>
<figcaption itemprop="caption description">Image caption</figcaption>
</figure>
</li>
</ul>
Related Q i so on the internet:
https://codedump.io/share/Hc9do6CIJgwH/1/how-do-i-get-photoswipe-to-recognize-entire-gallery-from-list-of-thumbnail-images
You must correctly travers the DOM and pass proper elements, I am not able to explain it, it's just about understanding how and which nodes are selected - here's a gist: https://gist.github.com/TMMC/6ec51c46d9fa57e1fd6a480f0d5da86d - I had the same issue, exactly the same code. Look for comments starting with make it works with.
Try ".my-gallery > li > figure > a" as gallerySelector
On my newly created webpage, I have a column of links that all work except for the top two. I have double checked the code and all of it seems to be uniform. I am not too sure why it is not allowing me to click on the two links at the top, but the rest seem to be working perfectly. If anyone could take a crack at what the problem may be I would really appreciate it! I have pasted the section of the code that I thought might contain the problem! Thanks!
<!DOCTYPEhtml>
<html>
<head>
<title> Rockwell Utilities </title>
<link href="rockwell.css" rel="stylesheet" type="text/css"/>
</head>
<div class="pos_top"><div id="bubbles"><img src="/rockwell/sepiawater.jpg" alt="Water Drop" height="250" width="1000"/></div></div>
<div id="header"><div id="logo"><img src="/rockwell/Rockwellnewnewedit.png" alt="Rockwell Utilities" height="400" width="500" /></div></div>
</body>
<div id="wrapper">
<h1> Rockwell Utilities Welcomes You! </h1>
<div id="intro">
<p>Rockwell Utilities is your number one choice in water and sewage.<br> We provide service to the Lakemoor, Illinois area,
<br>and have since 2007.
</p>
<img src="/rockwell/award.png" alt="Illinois Department of Health" height="200" width="500"/>
<a href="http://www.idph.state.il.us/public/press12/2011_Fluoridation_award_list.pdf"> <p>Rockwell
Utilities wins Illinois Department of Health Community Water Fluoridation Award four consecutive years!</p>
</a>
</div>
<div id="navigation_sidebar">
<div id="navigation_links">
<p>
<img src="/rockwell/emailus.png" alt="Email Us"/>
<img src="/rockwell/paymybill.png"alt="Pay My Bill"/>
<img src="/rockwell/calendar.png"alt="Calendar"/>
<img src="/rockwell/notices.png"alt="Notices"/>
<img src="/rockwell/paymentop.png"alt="Payment Options"/>
<img src="/rockwell/ourrates.png"alt="Our Rates"/>
</p>
Your logo (Rockwellnewnewedit.png) is overlapping the two links.
Have you double checked that email.html and payments.html are in the directory as calendar.html, notices.html, paymenttop.html, and rates.html? If the bottom 4 work and the top 2 give you a 404, that is most likely problem.
I don't know if this causes the problems you describe, but what catches my eye is the fact that there is no space between the src-attribute value ant the alt attribute, as in:
<img src="/rockwell/paymybill.png"alt="Pay My Bill"/>
http://i46.tinypic.com/dpvgo7.png
Your picture is overlapping the two links in this image my suggestion is to shrink the image and use the develop tools to see what is wrong because with that you can see what the picture is doing.
I'm trying to integrate Yoxview to my Rails 3 application that uses Paperclip to upload pictures.
The main problem is that the pictures (both original and thumbs) are not in the public area, i.e. they are accessible via Controller as described here.
The relevant HTML looks like:
<div id="my_wrapper">
<img src="/assets/1/thumb" />
<img src="/assets/2/thumb" />
</div>
When a thumbnail is clicked, I expect the Yoxview player to be opened, but what happens is that the original picture is opened in a browser.
When the pictures are in the public area like this:
<div id="my_wrapper">
<img src="/images/thumbs/1.jpg" />
<img src="/images/thumbs/2.jpg" />
</div>
everything works perfectly!
Any ideas ?
UPDATE
I tried also:
<div id="my_wrapper">
<img src="/images/thumbs/1.jpg" />
<img src="/images/thumbs/2.jpg" />
<img src="/assets/1/thumb" />
<img src="/assets/2/thumb" />
</div>
Here, if I click on thumbs/1.jpg or thumbs/2.jpg the player is opened properly, but shows only these two (original) pictures. If I click on one of the other two thumbs, their original picture is opened in a browser.
I found the answer. It's so simple. Just had to use the allowedUrls option of Yoxview:
allowedUrls: /^\/assets\/\d+\/(thumb|original)$/i
Here's my code for my Facebook share link:
<img src="/Content/Img/Png/SocialIcons/facebook_16.png" width="16" height="16" alt="share on facebook" />
the resulting url looks like this (copy and paste from view code within Firefox):
<img src="/Content/Img/Png/SocialIcons/facebook_16.png" width="16" height="16" alt="share on facebook" />
Notice how the spaces in "Acrylic%20Nails%20for%20less" are represented by %20.
Yet, it appears Facebook totally strips out the %20, but also strips out the space all together! Since the name, with spaces, is how it is looked up in the database... my Facebook share link always reports a broken link.
Any way to make it keep the spaces?
Update
I removed my code, added the AddThis code instead. The links generated by their service are encoded like this:
http%3A%2F%2Fwww.apoads.com%2Fen%2FYokota%2FBiz%2FShow%2FAcrylic%2520Nails%2520for%2520less
Is there a .net/c# utility to encode like this? or will I have to roll my own?
I would think that you'd want the link to be:
<a href='<%= String.Format("http://www.facebook.com/sharer.php?u={0}",
HttpUtility.UrlPathEncode("http://www.apoads.com" + Request.Url.PathAndQuery)) %>'
title="Share on Facebook"
rel="nofollow"
target="_blank">
<img src="/Content/Img/Png/SocialIcons/facebook_16.png" width="16" height="16" alt="share on facebook" />
</a>
Update
From your update, it looks like it may be doubly encoded:
<a href='<%= String.Format("http://www.facebook.com/sharer.php?u={0}",
HttpUtility.UrlEncode(HttpUtility.UrlPathEncode("http://www.apoads.com"+ Request.Url.PathAndQuery))) %>'
title="Share on Facebook"
rel="nofollow"
target="_blank">
<img src="/Content/Img/Png/SocialIcons/facebook_16.png" width="16" height="16" alt="share on facebook" />
</a>