Schema.org RDFa: marking up <img> as ImageObject? - schema.org

I'm using Schema.org and RDFa to mark up an HTML page. I have an image as follows:
<div class="image_container">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
What is the correct way to mark this up, so that:
1. big_whatever.jpg (the link href) becomes the contentUrl
2. The alt property becomes the description
3. The title property becomes the name
4. Ideally, I would also like the alt property to be the caption, as well.
Now, this is easy enough with JSON-LD, but I prefer to use RDFa for this particular case. This is what I've got so far:
<div class="image_container" vocab="http://schema.org/" typeof="ImageObject">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>

It is not possible to use the values of alt or title attributes in RDFa.
You could duplicate them with "hidden" meta elements:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
<meta property="name" content="Whatever" />
</div>
If you don’t need a property on the img element (e.g., for thumbnailUrl), you could use property+content to save one meta element:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" property="name" content="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
</div>
Thanks to the content attribute, RDFa won’t use the src value. But I think it’s more clear to go with the first snippet.

Related

Bootstrap 5 img-fluid working on firefox but not chrome

So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.

Make a component linkable or not based on the dialog

I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.

What Schema.org properties for video search results?

I'm making a website where you can search videos on. Every search returns about 50 links to a video player incl. thumbnail, name, duration, rating, actors, company that made it and a text saying "Video Results For {{QUERY}}" on the top.
I've looked at the hierarchy of Schema.org but I've no idea what properties to use as well as how to define so much information.
You could use the SearchResultsPage type for the webpage, the ItemList type for the result list, and the VideoObject type for each result.
To relate the ItemList to the SearchResultsPage, you could use the mainEntity property, and to relate the VideoObject items to the ItemList, the itemListElement property.
In RDFa, this could look like:
<body typeof="schema:SearchResultsPage">
<section property="schema:mainEntity" typeof="schema:ItemList">
<article property="schema:itemListElement" typeof="schema:VideoObject"></article>
<article property="schema:itemListElement" typeof="schema:VideoObject"></article>
<article property="schema:itemListElement" typeof="schema:VideoObject"></article>
</section>
</body>
If the search results are ordered/ranked, you might want to use ListItem and give its position:
<body typeof="schema:SearchResultsPage">
<section property="schema:mainEntity" typeof="schema:ItemList">
<article property="schema:itemListElement" typeof="schema:ListItem">
<meta property="schema:position" content="1">
<div property="schema:item" typeof="schema:VideoObject"></div>
</article>
<article property="schema:itemListElement" typeof="schema:ListItem">
<meta property="schema:position" content="2">
<div property="schema:item" typeof="schema:VideoObject"></div>
</article>
<article property="schema:itemListElement" typeof="schema:ListItem">
<meta property="schema:position" content="3">
<div property="schema:item" typeof="schema:VideoObject"></div>
</article>
</section>
</body>
According to Google's recommendation which you can see in the follow link:
https://developers.google.com/webmasters/videosearch/schema
The best practice for videos is using the VideoObject itemtype.
As you can see - there are indeed properties like actor, creator (Inherits from CreativeWork), Rating (aggregateRating), thumbnail and many many more.
I love the using of microdata tags it improves your site's SEO dramatically.
UPDATE: After author clarification - for search result - also for videos (see an example in vimeo search result) - you should use the ItemList Item type.
Good luck!

jssor slider add external link to the thumbnail

I am using the jssor templete for my slider and I have modified the setting so that I can have a slider image change when the mouse hover on the thumbnail. But I do not know how to add an external link to the thumbnail image so that I can go to the another page associated with that picture
I have try the following method from http://quabr.com/28478806/jssor-external-links-on-thumbnails but it is not worked
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Thank you for your help!
I guess it worked already.
But there is an extra enclosing '<div>' in following code,
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Please remove it by replacing
<div u="caption" t="L">My Title</div>
</div>
with
<div u="caption" t="L">My Title</div>
Also, please set 'height: 100%' for 'a' element to make the clickable area bigger.
<a href="http://mylink.com" target="_blank" style="height: 100%;">
And finally, please check out the thumbnail navigator skin html code, because it is fully customizable, and it can be very complicated. Please make sure your link element is not covered by any other element.

Can I break a block {PhotoSet} in tumblr?

Suppose that I have defined 5 custom posts, and in each of them I defined photoset to post multiple photos. But in each of one I only want to execute 1 time and get the 1 photo. So how can I break a photoset block?
{block:Photoset}
<article>
<span class="break" style="padding-bottom: 19px;"></span>
<!-- Go through each Photo in the Photoset -->
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
<p></p>
<time>{TimeAgo}</time>
</article>
{/block:Photoset}
Something like this:
{block:Photoset}
<article>
<span class="break" style="padding-bottom: 19px;"></span>
<!-- Go through each Photo in the Photoset -->
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
<p></p>
<time>{TimeAgo}</time>
</article>
**BREAK HERE??**
{/block:Photoset}
There doesn't seem to be a way to limit them, but you can comment them out:
{block:Photoset}
<article>
<span class="break" style="padding-bottom: 19px;"></span>
<!-- Go through each Photo in the Photoset -->
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
I assume you want the break here
<!--
{/block:Photos}
-->
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
<p></p>
<time>{TimeAgo}</time>
</article>
{/block:Photoset}
See that <!-- before {/block:Photos}? That opens an HTML comment right after the first image, so the rest of the images in the loop will be in a comment, invisible. After the loop we close the comment with -->. Done, all the images in the photoset after the first one will be hidden.