Support » Plugin: Site Reviews » Change stars

  • Resolved NorfolkUK

    (@norfolkpete)


    Hi there,

    Not being too knowledgeable in hooks etc, I can’t for the life of me work out why the star image wont change on a new site we are working on.

    I ‘think’ I follow you instructions however, clearly I’m doing something wrong.

    I have added the below to our functions.php child theme to test:

    add_filter( ‘site-reviews/config/inline-styles’, function( array $config ) {
    $config[‘:star-full’] = get_stylesheet_directory_uri().’https://www.ourdomain.co.uk/wp-content/uploads/2019/06/star-full.svg’;
    return $config;
    });

    All the stars vanish on the website.

    Any guidance would be gratefully received 🙂

    Thank you.

Viewing 15 replies - 1 through 15 (of 23 total)
  • Plugin Author Gemini Labs

    (@geminilabs)

    Try this:

    add_filter( 'site-reviews/config/inline-styles', function( $config ) {
         $config[':star-full'] = '/wp-content/uploads/2019/06/star-full.svg';
         return $config;
    });
    NorfolkUK

    (@norfolkpete)

    Many thanks for the prompt reply.

    Tried that and get an error:

    syntax error, unexpected ‘&’

    Plugin Author Gemini Labs

    (@geminilabs)

    I don’t get that error. Please make sure you copy and paste exactly as given, and make sure you don’t have any other problematic code in your functions.php file.

    Better still, instead of directly editing the functions.php file, I suggest you use a snippets plugin such as: https://wordpress.org/plugins/code-snippets/

    NorfolkUK

    (@norfolkpete)

    Sorry, I tried again and no error appeared.

    That said, reviews with 5 full stars now show, no stars.
    The empty star shows up on things with no reviews yet?

    Plugin Author Gemini Labs

    (@geminilabs)

    Make sure first that the image URL you are trying to use exists.

    i.e. https://yourdomain.com/wp-content/uploads/2019/06/star-full.svg

    If the image loads correctly in the browser, then remove the domain from the url and use that in the snippet.

    i.e. “/wp-content/uploads/2019/06/star-full.svg”

    You can also keep the domain on the URL and use the full URL in the snippet if you like.

    NorfolkUK

    (@norfolkpete)

    Thanks for the help 🙂

    Ok, I uploaded an svg using a plugin to enable this in WordPress. Testing the media URL, it doesn’t show in a browser whihc is odd.

    I saved the image as a .png and it does, your code works fine.

    Sizing isn’t right. Can’t work out how you have svg’s and I can;t make mine work?

    Plugin Author Gemini Labs

    (@geminilabs)

    NorfolkUK

    (@norfolkpete)

    Yep that’s the plugin we first found and tried.

    Plugin Author Gemini Labs

    (@geminilabs)

    Once you upload a svg file, it should show as an image in your media page:

    After that, copy the the File URL which should work in your browser:

    NorfolkUK

    (@norfolkpete)

    yeah it’s not showing like your image.

    Exporting the new star in Photoshop as an SVG.
    When I click on the new .svg file on my desktop, it opens in a browser so unsure why it’s not loading properly in WP.

    Plugin Author Gemini Labs

    (@geminilabs)

    Alternatively, you can copy the SVG files directly into your child theme directory, and then use the following code:

    add_filter( 'site-reviews/config/inline-styles', function( $config ) {
         $config[':star-full'] = get_stylesheet_directory_uri().'/star-full.svg';
         return $config;
    });
    NorfolkUK

    (@norfolkpete)

    Hmmmm, while I’ve used child themes for a few years now I don;t understand this:

    you can copy the SVG files directly into your child theme directory

    Plugin Author Gemini Labs

    (@geminilabs)

    Sounds like this is being caused by the way you are exporting your SVG file.

    1. Make sure you are exporting a vector image (i.e. an illustrator file), not a raster image. This may help: https://forums.adobe.com/thread/2541178

    2. Make sure you are exporting for web.

    3. Run the SVG file through https://kraken.io/web-interface which will optimise a correctly formed SVG file.

    4. You can copy the svg file to the child-theme directory like this:

    SVG file is uploaded here:
    /wp-content/themes/child-theme/star-full.svg

    And then you can load it using the WordPress get_stylesheet_directory_uri function to get the URL to your child theme directory, and load the image in the Site Reviews hook like this:

    // This is the URL to the image in your child theme
    get_stylesheet_directory_uri().'/star-full.svg';

    As shown in the reply above.

    NorfolkUK

    (@norfolkpete)

    Appreciate your help and patience.

    I am saving using Illustrator rather than PS and the .svg now shows in mdeai and works fine however it’s working find…mostly.

    Here the new star looks great: https://www.theweddingwhitelist.co.uk/reviews/florentina-catering-norfolk/

    However on the gird, your gold stars looks crisp and full, the new look like they are being narrowed on the sides: https://www.theweddingwhitelist.co.uk/wedding-event-caterers/

    Plugin Author Gemini Labs

    (@geminilabs)

    If all you need to do is change the colour of the stars, simply copy the original stars from the plugin, open them in a text editor, change the colour hex codes as needed, then upload the edited stars to your child theme as shown above.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Change stars’ is closed to new replies.