Grey artifacts on edges of photos

  • Resolved splurch84

    (@splurch84)


    6 months ago

    Hello everyone,

    I have been building a very simple photography website which is basically 5 portfolios of my work. I used Metaslider slideshows to show between 10-20 shots per portfolio. My theme is Twenty Twenty-five 1.4, I have installed and am using the following plug-ins: GenerateBlocks, Akismet Anti-spam: Spam Protection 5.6, SeedProd 6.19.9, and Metaslider free. The gallery photos are 2000×1333 px and to keep it simple any shot outside of this aspect ratio has been padded with a white ground or bands to keep them to a 2:3 proportion and that size, the ground of the site is also white. The problem is where the white edge of a white bordered shot meets the white ground, I get a grey artifact, sometimes it is on the sides, one side or the bottom or top of a shot. This is not the case with all the shots and by nudging the styles I have managed to reduce the appearance of these, however there are still some that persist. I have looked on-line for code to add to Additional css, this code did not work and the explanation was that it was not specific enough in targeting the right elements. I added a custom class through the WordPress free website builder, once I located the class in the pages code, I realised that there are probably enough classes and ids to target the right elements without my custom class. The site is in maintenance mode and can only be seen by using the view page button in the site editor. I wondered if I was to upload the code concerning the slideshow could someone identify the elements that need targeting and how to go about writing the css to get rid of the grey lines. I see now that there are elements that were not addressed by the code I tried, for example looking I see there is a container for the slide show, this does not appear in my list view.

    Thank you

    Chris

Viewing 15 replies - 1 through 15 (of 23 total)
1 2
  • Thread Starter splurch84

    (@splurch84)

    6 months ago



    <div class=”gb-element-f12da5da”></div>== $0

    <main class=”gb element-412ba38d” id=”wp--skip-link--target”>

    <div id=”metaslider-id-371” style=”width: 100%; magin: 0px auto; max-width: 1417.36px;” class=”ml-slider-3-107-0 metaslider metslider-flex metaslider-371 ml-slider class-slide- shows ms-theme-default-base nav-hidden” role=”region” aria label=”INDUSTRIAL PHOTOGRAPHY” data height=”1333” data width=”2000”>

    <div id=”metaslider_container_371”>

    <div id=”metaslider_371” class=”flexslider”> == $0

    <div class=”flex-viewport” style=”overflow: hidden; position; relative;”>

    <ul aria-live=”polite” class=”slides” style=”width: 3800%; transition-duration: 0s; transform: translate3d(-1417.34px 0px, 0px);”>

    <li style=”display: block; width: 1417.34px; margin-right: 0px; float:left;” class=”slide-404 ms-image clone” aria roledescription=”slide” data date=”2026-03-12 15:06:04” data-filename=”i_first_city.jpg” data-slide- type=”image” aria hidden=”true”></li>

    one <li></li>per slide

    </ul>

    </div>

    <ul class=”flex-direction-nav”></ul>

    <li class=”flex-nav-prev”></li>

    <li class=”flex-nav-next”></li>

    </ul>

    </div>

    </div>

    </div>

    <div>

    <a href=”https://*ut%3Hk1@!.com/wp-admin/admin.php?page=metaslider&id=371” target=”blank” class=”ms-edit-frontend”> == $0

    “Edit Slideshow”

    <span class=”dashicons dashicons external”></span> == $0

    </a>

    </div>
    Plugin Author Steve Burge

    (@stevejburge)

    6 months ago

    @splurch84 thanks for using MetaSlider. Can you share a link to the slideshow where you’re seeing this issue, please?

    Plugin Author Steve Burge

    (@stevejburge)

    6 months ago

    @splurch84 I see some code was added to an earlier post, but what we need is a link to the slideshow, please.

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    Yes it is not online at the moment, let me see what I can do.

    Thanks

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    You can find it here; https://hayhurst-photography.com/?page_id=274 The home page works but has no slider so no problem, the commercial and industrial pages have sliders that work but the problem appears to be worse in this environment as opposed to inside the site builder, also different in different browsers, still there but less so in edge than in chrome.

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    While the problem is always present, circumstances effect the degree, and which slides appear to have lines. That is in the environment of the block editor, using the View Page button shows the problem on some slides to a lesser degree than when the page id is copied and pasted to an incognito window which shows an increase in the weight of the lines and how many show lines. When I use google and edge the results are again different. When I change my theme I lose my site, I have already built my site and my sliders, alt text, descriptions, sizing, I don’t want to start again.

    Plugin Author htmgarcia

    (@htmgarcia)

    6 months ago

    Hi @splurch84

    is this the border you mean for the slideshow at https://hayhurst-photography.com/?page_id=274? See the red arrows pointing to it: https://ibb.co/BH1dxXWF

    If I’m missing something, please let us know by sharing an screenshot of the issue. You can use a service like imgBB to upload images for free.

    Regards

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    No that is not it, the first industrial shot of the concrete pump 5 mm to the right of the right advance arrow there is a line running top to bottom of the frame, in the white ground. As stated above you may not see it but if you advance through the shots you will probably see them, there is one on the bottom of the large film winder.

    Plugin Author htmgarcia

    (@htmgarcia)

    6 months ago

    I see these 2 more possible cases. Please let me know if any is related to the issue:

    A) https://ibb.co/ZzVDLvNy

    B) https://ibb.co/fY3Cx7HF

    Which browser are you using? I think a screencast or some visual aid would help clarify the issue.

    Regards

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    https://ibb.co/3mWyWpRD

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    Yes to both but the screen with 2 images was when I was playing around with the container size and settings

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    This last one is Google

    Plugin Author htmgarcia

    (@htmgarcia)

    6 months ago

    Thanks! I see it in Chrome. In Firefox all looks good.

    You are using “Image crop” as disabled, correct? Maybe the issue is related to that. By default is “Smart crop” to make sure all images uses the same size. Optionally use “Disabled (Smart pad)”. Please see if works better.

    Regards

    Thread Starter splurch84

    (@splurch84)

    6 months ago

    Hi,

    I just went through them and it looks like “Disabled Smart pad” helped a bit on chrome but worse on Edge

    Plugin Author htmgarcia

    (@htmgarcia)

    6 months ago

    What changed in Edge? Looks fine in Edge and Chrome as well in my end.

    Regards

Viewing 15 replies - 1 through 15 (of 23 total)
1 2

The topic ‘Grey artifacts on edges of photos’ is closed to new replies.