When making a shield.io badge, is there a way to find the right way to reference a logo name? - badge

I just started trying to use shield.io badges today. I'm a little confused.
When I needed to use the C++ logo in a label I used the following request:
https://img.shields.io/badge/C++-%2300599C.svg?&style=for-the-badge&logo=c%2B%2B&logoColor=white
Which yielded a label with a logo, as intended.
I expected it to be logo=c-plus-plus and through trial and error I eventually found out that I should use the encoding for the + sign, %2B.
Now I can't find the logo for Selenium, although it is clearly on the simple-vector list (https://simpleicons.org/icons/selenium.svg) and there's nothing odd about this name, no spaces or signs, so I don't know how to find it. logo=selenium should work but it doesn't.
This is what I'm trying:
https://img.shields.io/badge/selenium-%2343B02A.svg?&style=for-the-badge&logo=selenium&logoColor=white
And what I get is a label without logo.
Any thoughts?
PS: I don't have enough reputation to post images so I can't include the resulting images in the text but you can copy the link to see what I mean.

You should follow the url structure fully https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>. The color property seems wrong.
For Selenium logo request could be like this (without message)
https://img.shields.io/badge/selenium-43B02A.svg?&style=for-the-badge&logo=selenium&logoColor=white.
The parameter for the C++ logo should be cplusplus and the color should be 00599C like https://img.shields.io/badge/C++-00599C.svg?&style=for-the-badge&logo=cplusplus&logoColor=white
https://shields.io/
https://simpleicons.org/

The link that you pasted gives the link now correctly with image
Github link which has most of the shields that you people would require

Related

How do i let a user insert a link in an input field with normal text?

I am using react.js
I'm trying to build a blog page.
there is a texterea tag to write a blog for the user.
now I want to add the function that allows users to add words that are linked.
so that when i show the text from that input words that are linked are clickable
enter image description here
like the blue words in wiki in the image above.
pardon my mistakes (1st question in StackOverflow)
I know about dangerouslysetinnerhtml. but not sure if it's the right way to do so. because then users can modify the code inside (i think). so what is the safe and right way to do so
Reading your case Markdown seems best option as it also supports links insertion. For rendering user entered markdown you may use library like React Markdown. For writing markdown textarea is fine as long as you write markdown syntax properly but you may want to consider libraries like React textarea markdown editor to make things easier.

react-swipeable-list is not working as expected

I'm using #sandstreamdev/react-swipeable-list package in one of my project to create a swipeable list with React. Explored the docs and thought of experimenting with one of the examples mentioned in it. Here is the application created by copying code from the given example. But it is behaving unexpectedly.
Actual Behavior:
Expected Behavior:
Whenever the list item shown is swiped right or left it should display reply or delete option accordingly under the list item. But instead the options are shown all the time. I think the issue here is with the CSS but I'm not sure exactly where I messed it up. Please help me in resolving this issue.
You forgot to import the css of the library.
import '#sandstreamdev/react-swipeable-list/dist/styles.css';
here is the fix
https://codesandbox.io/s/twilight-waterfall-lhkfo

(React) PNG Image will import, but won't display

I'm trying to create a helper function that will return one of two images-- either a check mark or a red error icon, depending on user input.
My header code looks like this
import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'
My helper function looks like this:
if(myVar){
return <img src={CheckMark} alt='CheckMark'/>
}
else{
return <img src={ErrorImage} alt='Error'/>
}
I'm positive that I'm importing both correctly-- they're in the same relative file path, and came from the same page source. The weird thing is, only the red x will load. The check mark is showing up as a blank image when I try to follow the path in inspect element. However, when I open the check mark in my assets folder, I get the check mark that I'd expect to see.
For reference, I'm using this image for the check mark and this image for the error icon.
I've tried setting the height and width to arbitrarily large numbers, just to make sure that I'm not creating an image with 0 size, and I've set the opacity to 1, in case it was transparent for some reason. Neither of these made the image appear.
All I can think of is that it must be a property of the image that is causing this issue, but I've tried four or five different check mark images, and none of them have worked. I don't understand what I'm doing incorrectly, and all of the supporting documentation I've found has been for improperly importing the data. So far as I can tell, I'm importing this data correctly.
Edit: One weird element that I've noticed. If I console.log my error icon, I get a long string of text beginning with "data: image/png.base64...." If I console.log my checkmark, I get "static/media/Checkmark.89156a.png" and that's it. I have much, MUCH more data for the error icon than the checkmark.
Edit 2: I still don't know what caused this issue, but I just abandoned trying to import images and swapped over to using Unicode symbols, and that's working for me without issue.
Seems like you have some syntax errors in your code
The header should be:
import ErrorImage from './../Assets/Error.png'
import CheckMark from './../Assets/CheckMark.png'
The helper function should be:
if(myVar){
return <img src={CheckMark} alt='CheckMark'/>
}
else{
return <img src={ErrorImage} alt='Error'/>
}
See this StackOverflow post for more details
The issue here was one of permissions, I believe. As I eventually learned, if I said
const checkMark = require('./../Assets/checkMark.png')
I could load the checkMark. It's a function of webPack. This post explains it well enough.

I am adding the code in weebly but it dosent show up

Issue with JSON LD CODE
To start with I am trying to use this code in weebly, buy using embed code option and then I click on the edit custom HTML and enter this code. However, after entering this nothing shows up as in the recipe is not shown on the page and a blank page is shown.
this code is picked on schema.org, for recipes.
Could anyone please help me out in what exactly went wrong. I really appreciate your assistance. FYI- I am new to this. I am trying to set up my own food website and and wanted to schema to for SEO improvement. Any other suggestions are welcome. Thanks in advance.
Please refer this link for the JSON-LD CODE. IT WILL BE AT THE END OF THE PAGE. https://schema.org/Recipe
When you add a JSON-LD block in the HTML, it doesn’t change anything visibly on the page. The script element is hidden by default in all browsers, and you typically want to keep it like that (users typically have no interest in your JSON-LD code).
To check if adding the JSON-LD worked correctly, open the page in a browser and check the source code of the page. You should see the script element with your JSON-LD.
You have to add the content (that should be visible to your users) regularly with HTML. The JSON-LD exists next to your content (duplicating the data like name, photo URL etc.), it doesn’t replace your content.

How to add a custom field into template.php using Zen sub theme

First time poster here, I'm a designer not skilled at all with php and I have a small issue I don't seem to be able to solve. I'm making a site in drupal 7 using a sub theme on zen.
Btw this is a great CMS, even though people say it's really more a developers CMS. I have no trouble to do what I need using views, rules, display suite etc. So a big thank you for all the developers out there making this such a good CMS. But for this apparently simple problem... no module will help me (I think) and I'm kinda stuck.
So here it is: I'd like to add a subtitle next to the title in all my pages.
So what I did was to add a custom field into the content type basic page (machine name: field_sub_title) which is a simple text field.
I uncommented the following line in my template.php
function mytheme_preprocess_page(&$variables, $hook) {
$variables['sub_title'] = t('field_sub_title');
}
Now my question is how do I load the content of my custom field into that variable?
I know i need to change the second part, but I don't have a clue as into what I need to change this.
Displaying the variable into the the page.tpl.php is something I know about so I only need help with the first part.
{EDIT}
Ok I found how to do this :)
I was looking for a solution in the wrong place. I don't need to change any thing in the template.php file.
Just needed to add this bit of code into my page.tpl.php:
<?php
print $node->field_sub_title['und'][0]['value'];
?>
So I'm posting this here for other Drupal newbies struggling with this....
Your solution may work for now, but there may be a more Drupal-y way to handle a problem like this. If you haven't noticed any problems yet, you may find one or more of the following issues down the road:
Someone who doesn't know php or Drupal theming may need to change the way this works.
If you're like me, you may forget where exactly in code this was implemented.
You may see superfluous markup and/or errors on nodes (content) that do not have this sub-title field (ie. event content not having a sub-title field while basic pages and news articles do).
When you add a field to a content type, it will automatically appear anytime content in that content type is displayed. You should be able to add the sub-title field for your page, event or whatever else you need and have it automatically appear in the markup.
You can 'manage display' of a content type to drag and drop the order for fields to appear. You could take it a step further by using a module like Display Suite to add formatting or layout per-content type.
If you feel like this isn't good enough and the markup for the subtitle must be at the same level as the page title (which is rare), at least add an if statement to make your code check to see if the variable is present before trying to print it. I'd also add a new variable and comments for code readability.
<?php
$subtitle = $node->field_sub_title['und'][0]['value'];
if($subtitle){
print $subtitle;
}
?>
Consider using field_get_items or field_view_value, or at least use the LANGUAGE_NONE constant instead of 'und'
See https://api.drupal.org/api/drupal/modules%21field%21field.module/function/field_get_items/7 and https://api.drupal.org/api/drupal/modules!field!field.module/function/field_view_value/7
This has the added benefit of reducing the number of potential security holes you create.

Resources