three panels
In Docusaurus V2 I am editing HomepageFeatures.js for the three panels. What I would like to do is make them clickable so that they link to the relevant sections.
In the image here this would mean the first picture, or title (Tutorials), or even the text paragraph, would link through to the Tutorials page.
Any ideas how to do that?
The code section is:
`const FeatureList = [
{
title: "Tutorials",
Svg: require("../../static/img/Pyetrosyan_awesome.svg").default,
description: (
<>
In these tutorials, you will find detailed instructions on how to install and set up
the software, as well as information on its various features and functions. We have
also included troubleshooting tips and best practices to help you get the greatest value
from the software.
</>
),
},`
Related
I inherited a vuejs project. People using screen readers as assistive devices complain that their screen readers are unable to read the options in drop down menus that were made from vue-search-select. Here is how you can reproduce the issue:
Install a screen reader such as NVDA.
Turn on NVDA screen reader.
Go to https://vue-search-select.netlify.app/#/model
Tab to a search text field.
Confirm drop down of results appear.
Press the down arrow key to focus on any of the search result items.
Confirm the NVDA says the word "Blank" instead of actually reading out the contents of the selected item.
Here is a 10 second clip to that demonstrates steps 3 of 7.
https://www.youtube.com/watch?v=Nxx1k1oKETI
How do you modify vue-search-select such that in step 7, the screen reader will read out the contents of the selected item instead of reading out the word "Blank"?
Right now, as a temporary solution, I'm trying to write a setTimeout function that will automatically add the appropriate meta data to force screen readers to read out the content. But I'm not sure how successful this approach will be. I prefer an approach that is idiomatic to vue-search-select.
I tried adding a customAttr like so:
<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
return function() { return '" aria-label="hello" tabindex="0'; }
}
Although the attributes do appear in my developer console's inspector, my screen reader still does not read out the options.
It seems custom-attr will not help you as it does not allow you to add any attr you want - anything the function returns is just placed as a value of data-vss-custom-attr attribute
Any decent Vue library with similar functionality would offer a slot to customize rendering of menu items, but this does not. Plus it doesn't seem to be maintained for a long time so maybe it is a time to look for an alternative....
I googled Top 10 Songs and it returned me a rich snippet of 10 songs from Top10 website. Digging further, the website had a list of exact same songs which google displayed in their Rich snippet.
Reading about Rich Snippet SEO, I got to know that we need to markup our data to qualify for Rich snippet card. Looking into the source of Top10 website, I found out that it didnt had schema.org/og definition that would mark their site up. To backup my claim, I checked the same on Google Structure Data Testing Tool and, as expected, it returned nothing.
I want to know how google is displaying the data on the Rich Snippet card. PS:- I read somewhere Google does not use their Knowledge Graph for Rich Snippet.
Please find the attached screenshot of the rich snippet.
That is likely a featured snippet (not a rich snippet, nor a rich result, as they are called now).
Google Search extracts the information from the webpage.
You can’t directly influence that such a featured snippet gets shown for your result:
How can I mark my page as a featured snippet?
You can't. Google programmatically determines that a page contains a likely answer to the user's question, and displays the result as a featured snippet.
What you see on top of organic result results is not Rich Snippet. A rich snippet is just a rich result. Rich snippet provides more graphical elements like rating stars, recipe cooking time, calory count, thumbnails etc. Rich snippets are generally more visually appealing. For example, I wanted to know the best recipe for chicken broth and googled to search for the same. Google will show me a list of rich snippets (like below) if the ranked pages are with structured code added for recipes.
rich snippet pic from learnly.info
Featured snippets often show up for some of the most competitive queries. Google's automated systems determine whether a page would make a good featured snippet to highlight for a specific search request. This is not something we can control using structured codes. There are ways to opt out if you don't want your content from your pages to be displayed as a featured snippet.
References for this answer: rich snippet guide by learnly.info
I'd like to include a picture in a page element in an Inquest script: is this possible?
If so, how would you do it?
I know this question was asked 8 years ago...but I recently had the same question. So I thought maybe I could put something here in case someone in the future would have a similar question.
You cannot add a picture to the page element in Inquisit 5, but it would be possible in Inquisit 6. For Inquisit 5, you'll have to use or .
Here's some discussion on this: https://forums.millisecond.com/Topic34836.aspx
There is some discussion here.
In general, it seems that the page element only allows for simple text based instructions.
If you want to present images in instructions, there are a few options.
htmlpage element
You can use the htmlpage element, which allows for instructions to be a complete formatted HTML file that can include images.
The htmlpage element is used to define pages of text to be displayed
as instructions using the preinstructions or postinstructions
attribute. The htmlpage element is useful when complete control over
formatting and content of instruction pages is required, otherwise the
page element provides an easier way to display text with basic
formatting. The actual content of the page is contained in a separate
HTML file located on the local machine or the web. source
Picture or picture and text in a normal trial
The other option is to present instructions as normal stimuli in the main trials of a block.
See for example, the instructions in the sample script for the Iowa Gambling Task.
This can be either done as one integrated picture that includes text, or each image can be positioned as it's own stimuli.
I could not find any online docs or even no docs in the extracted folder.
And on prestashop's forum it's like useless to ask questions. frustrated
I wanted to make categories appear on top menu, categories go up to 5 levels. But when I tried to configure it, it goes only 2 level and it does not seem to take the default global css.
There is no installation/configuration documents, it's pathetic! And it costs $69!
Anyone have some pointers, would greatly help. thanks!
Advanced Top Menu can't manage more than 3 levels :
First level : Tab
Second level : Group of Elements
Third level : Element
But there no limits to category depth. You have to organize your menu content as you want with these 3 levels (by example : a submenu column for each of your category level depth)
About the lack of documentation and your frustration, you have to know that PrestaModule is a major software editor for Prestashop, and they don't leave their customer without any documentation, example and support. So I think you didn't search to reach them or search correctly.
By example :
You could find the documentation here:
www.presta-module.com/docs/en/advancedtopmenu/
A complete demo for a complex menu example with back-office access here:
demos.presta-module.com/advancedtopmenu/en/
And you could contact the PrestaModule team for support here:
http://www.presta-module.com/en/contact-form.php
Hope this helps !
I have been looking at rich snippets in google. Google lists the following schema.org items as being supported:
Reviews
People
List item
Products
Businesses and organizations
Recipes
Events Music
I have noticed that in search results, Google displays Rich Snippets for Article and BlogPosting. When clicking on the link and using Firebug to check the source code, I can see that the schema.org being used is indeed BlogPosting.
I've tried adding BlogPosting to my sample code and using Google's Rich Snippet tool to check the results but I cant get an image to display. I am using the following code:
<html>
<body> etc etc....
<div itemscope="" itemtype="http://schema.org/BlogPosting">
<img itemprop="image" href="/images/test.jpg" item>
</div>
...
Although it doesn't show the image in the Rich Snippet tool, it does recognize that an image has been set and displays the url text in the "Extracted rich snippet data from the page" box. I have tried using the SoftwareApplication schema and then I get an image to show.
My question is: Does the Rich Snippet tool restrict the images it shows based on the schemas listed above, and actually once in the live search results, Rich Snippets for Article and BlogPostings will be shown?
Google has introduced Rich Snippet for Articles, so you can now use articles snippet for your article/blog post.
See this official document from Google on implementing rich snippet for your articles: https://developers.google.com/structured-data/rich-snippets/articles
And as far as your image issue is concerned, try to apply the snippet code as per the document above and it should show the image. I tested it and all worked fine.
As of now, Google is not going to display product images in SERPS for schema.org/Article or schema.org/BlogPosting item types. It's going to show the Author profile image that it pulls from Google+ using one of two methods:
https://plus.google.com/authorship
... think about it. Everyone would be trying to attach add some (spammy) image next to their blog post in SERPS. Google only wants to show verified authorship by their authentification methods (via G+) -- not just from any "author" tag in microdata.
Yes, the rich snippet tool will not show you what the actual SERP will always look like, because it depends on the query. In fact they say
Note that there is no guarantee that a Rich Snippet will be shown for
this page on actual search results.