I have some slightly awkward markup and need to reference some elements from a separate container, and prevent those elements from appearing under the parent in their hierarchy. How can I do this?
Here's my (simplified) markup:
<body itemscope itemtype='https://schema.org/AboutPage'>
<div itemscope itemtype="https://schema.org/ProfessionalService">
<ul>
<li><img id="photo-emp1" itemprop="image" src="..."/></li>
<li><img id="photo-emp2" itemprop="image" src="..."/></li>
<li><img id="photo-emp3" itemprop="image" src="..."/></li>
<li><img id="photo-emp4" itemprop="image" src="..."/></li>
</ul>
<div id="tab-emp1" itemprop="employee" itemscope itemtype="https://schema.org/Person"
itemref="photo-emp1">
<h1 itemprop="name">John Doe</h1>
<h2 itemprop="jobTitle">Vice President, Finance</h2>
<div itemprop="description">John is...</div>
</div>
<div id="tab-emp2" itemprop="employee" itemscope itemtype="https://schema.org/Person"
itemref="photo-emp2">
<h1 itemprop="name">Jane Roe</h1>
<h2 itemprop="jobTitle">Vice President, Operations</h2>
<div itemprop="description">Jane is...</div>
</div>
...
</div>
</body>
The structure is required for a tab control, so I can't rearrange the markup.
The itemref attribute on the Person correctly drags the image 'under' the https://schema.org/Person node.
However, the image elements ALSO appear as properties under the https://schema.org/ProfessionalService node, which is not correct or desired.
How can I keep the image elements in their current location, reference them under Person, but prevent them from appearing under ProfessionalService?
Just add the itemscope attribute to the ul element. You'll get an extra, disconnected, item, but the images will no longer be part of the ProfessionalService item.
Related
Here's my code and I want to add another css class toggleable-content to the existing code:
<sly data-sly-resource="${'item' # resourceType='components/header'}"></sly>
This code would look something like this:
<section aria-label="aria label">
<ul class="row">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
</section>
I want to remove section tag and add another css class toggleable-content to the <ul> tag. Below is what I'd like to achieve:
<ul class="row toggleable-content">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
I was wondering how to use slightly to achieve the above? I tried something below but it doesn't work:
<sly data-sly-resource="${'item' # resourceType='components/header', cssClassName='toggleable-content'}"></sly>
Assuming the section markup is managed by the included resource (components/header) then you cannot do it directly. Indirectly, with AEM, you can pass a parameter (through request attributes) and retrieve it in the components/header model, then add the section conditionally (using data-sly-unwrap for example).
Or you re-organize your code and switch from resource inclusion to template calling and pass the parameter directly using data-sly-call.
I masked(mask-extension) a couple of plug-ins. When the image is generated in the template, it is always wrapped in following divs:
<div id="c63" class="frame frame-default frame-type-image frame-layout-0">
<div class="ce-image ce-center ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-outer">
<div class="ce-inner">
<div class="ce-row">
<div class="ce-column">
<figure class="image"><img class="image-embed-item"
src="fileadmin/user_upload/bla" width="975"
height="678" alt=""></figure>
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to remove all those wrappers? I simply want to have the image.
Sidenotes:
1. f:image does not work, I cannot access the proper uid for it to show. (This is perhaps an issue with mask)
2. I cannot find the tt_content.stdWrap.innerWrap > in my typoScript, as I do not know where mask puts it. It is neither in the netup.ts nor in the NewContentElementWizard.ts
You need to overwrite the fluid_styled_content partial in Resources/Private/Partials/Media/Gallery.html.
How to overwrite, you can read here: https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/8.7/Configuration/OverridingFluidTemplates/
I have adapted a code taken from example 2 on http://schema.org/ItemList
How do I use it together with Product? On frontpage and some other pages I have a list of products for which I would like to have a better markup.
The following code gives the error
A value for the position field is required.
but Product doesn't have a position, so if there is a value for position it gives different error.
<ul itemscope itemtype="http://schema.org/ItemList">
<meta itemprop="numberOfItems" content="10" />
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<!-- <meta itemprop="position" content="1" /> -->
<a href="#" itemprop="url">
<img src="asdf.jpg" itemprop="image">
<div class="product-list__title" itemprop="name">
Product name
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">
$12
</div>
<link itemprop="availability" href="http://schema.org/InStock" />
</div>
</a>
</li>
</ul>
The itemListElement property has three expected values:
ListItem
Text
Thing
ListItem is also a Thing, but it’s listed explicitly because it has a special role here: ListItem provides the position property. If you need to convey the position of the list items, you have to provide ListItem values.
Note that not every ItemList needs this. Your example with using Product values is fine (apart from the meta element which can’t be a child of ul), and unless you try to qualify for Google’s rich result (this is what the error message is about), you could keep it like that.
If you do want to provide the positions, an itemListElement could look like this:
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="position" content="1" />
<div itemprop="item" itemscope itemtype="http://schema.org/Product">
<!-- your Product -->
</div>
</li>
I'm defining a http://schema.org/Event for an "open house" tour of a residential home. The event's name is "Open House," but the location doesn't have a "name" (other than its address).
According to https://developers.google.com/structured-data/rich-snippets/events I ought to be able to use a PostalAddress for the location field of the snippet, perhaps like this:
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Open House</div>
<div itemprop="startDate" content="2015-07-04T13:00-0700">Sat, July 4th at 1pm</div>
<div itemprop="location" itemscope itemtype="http://schema.org/PostalAddress">
<div>
<span itemprop="streetAddress">123 Main St</span>,
<span itemprop="addressLocality">San Francisco</span>,
<span itemprop="addressRegion">CA</span>,
<span itemprop="postalCode">94111</span>
</div>
</div>
</div>
But this fails in the Rich Snippet test tool. https://developers.google.com/structured-data/testing-tool/ It says that my location requires "name" and "address" properties.
That makes perfect sense if the location is a named Place, e.g. a restaurant or business venue. For example, this validates in the test tool:
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Open House</div>
<div itemprop="startDate" content="2015-07-04T13:00-0700">Sat, July 4th at 1pm</div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<div itemprop="name">WHAT DO I PUT HERE?!</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div>
<span itemprop="streetAddress">123 Main St</span>,
<span itemprop="addressLocality">San Francisco</span>,
<span itemprop="addressRegion">CA</span>,
<span itemprop="postalCode">94111</span></div>
</div>
</div>
</div>
The problem is, I have no idea what name to use for a residential home. It doesn't have a name, other than its address.
What's the right way to construct this snippet? Is Google's documentation incorrect? If the test tool is correct, do I have to name a nameless Place?
Right after posting my question, I realized that I could nest the address inside the name, making the name be equal to the address. The test tool accepts this. (But this feels wrong.)
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Open House</div>
<div itemprop="startDate" content="2015-07-04T13:00-0700">Sat, July 4th at 1pm</div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<div itemprop="name">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div>
<span itemprop="streetAddress">123 Main St</span>,
<span itemprop="addressLocality">San Francisco</span>,
<span itemprop="addressRegion">CA</span>,
<span itemprop="postalCode">94111</span></div>
</div>
</div>
</div>
</div>
I've my markups as
<div id="home" class="current">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller">
<ul id="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<!-- Events Details -->
<div id="events">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller"> <!-- stuffsss --></div>
</div>
<div class="footer">Footer</div>
</div>
For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.
//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.
I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.
Can anyone help me change the codes so that it works by implementing classes instead of the the id??
Rob is right, but you can change your code to scroller classes as you said.
Then initialise your scrollers within unique wrappers like this:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.
I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread
https://stackoverflow.com/a/7584694/1232232
but for this to work you need to assign ID's to your classed (div containers)
like
<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.