New to the community? Start here

Find out what the name of the picture is

I want to add an effect to each image on the bottom of the pages. I’ve been able to for a few pages – after finding out what the name of the images are using Inspect – but I can’t for the others because, as we know, WP makes the images you upload into several different sizes. I need to know how to find out what the URL is to the image in general so the effect shows to all of the different sizes. 

Here’s an image of the page. Notice all of the sizes WP changed the image to. I can’t, for the life of me, find out what the URL is to the main image so the effect will be in all of the images. 
JL

Fri, 30 Jan 2026 2:47:43
  • Nithin Ramdas
    • Support Wizard

    Hi Jamison ,

    In general, effects need to be targeted to the IMG tag, i.e:
    <img>

    You don’t need to target it based on the different thumbnails added for different sizes. Also, images are loaded via the srcset attribute and not the data-srcset attribute as shown in the screenshot.

    The data-srcset attribute is intended for lazy loading or data storage; images are loaded from the srcset attribute in general.

    It isn’t possible to target images loaded via HTML attributes such as srcset. The browser makes the selection automatically based on device conditions, such as screen width and pixel density. So, it’s not clear what exact steps you are looking to perform. Are you using any plugins to add effects or custom code? Whats the Page URL where you are checking this?

    If you want to determine which exact thumbnail loads, it depends on the screen size and the srcset attribute, which the browser uses to select the image.

    From the given screenshot, you should find the “srcset” attribute, where you can find different image URLs along with 500w, 1200w, etc., trying to load those URLs along with 500w, 1200w to its URL, i.e.,/path/abc.jpg.webp 500w via your browser, and you should find what are the different sizes of images loaded.

    The above would be similar for data-srcset too, you could manually load the URLs from the data-srcset attributes by copying and pasting the path along with the 500w, 1200w to figure out the image URLs.

    Regards,
    Nithin

  • Jamison
    • WPMU top fan!

    I want to add this effect, the film strip effect, to all of the images on the bottom of the pages (that have links). Here’s an example of that effect. Note: I don’t remember if I targeted a specific-size .webp when I did this to the bottom image, and I’m not able to check at the moment.
    Link

  • Nithin Ramdas
    • Support Wizard

    Hi Jamison ,

    The mentioned effects need to be targeted to the img tag and its class; it should automatically apply to all different-sized images that are loaded via srcset inside the img tag.

    So you don’t need to target the effect by image URL. Could you tell us exactly what issue you’re encountering when adding the effects? I noticed you’ve already added them, as shown in the screenshot.

    Regards,
    Nithin

  • Jamison
    • WPMU top fan!

    Ok. How do I find an image tag without using View Page Source, if it’s possible. There are other pages that need to have that effect, but I can’t find the image tag.
    Update: I found the image source to that one image that’s on the bottom of the screen, but putting the effect on the image isn’t working.
    Thanks,
    JL

  • Flavio
    • websi

    I might be misunderstanding part of the issue, but from what you’re describing, the most reliable way to apply the effect isn’t by targeting the image file name or URL. Since WordPress generates multiple image sizes automatically, trying to match a single “main” URL will always be tricky.

    A cleaner approach is to add a custom CSS class to the images where you want the effect. Once the class is in place, you can target it directly in your stylesheet and the effect will apply to every size of that image, no matter which version WP loads on the page.

    This avoids the whole problem of tracking down the original file URL and ensures the effect stays consistent across all responsive image sizes.

  • Jair Jaramillo
    • Staff

    Hello Jamison

    I see you enabled Support Access. I checked your site, and I can see how are you making this type of effect. You use a custom CSS code using the specific image URL as the selector:

    [attachments are only viewable by logged-in members]

    As my coworker Nithin suggested, you can use only the “img” tag to apply the effect to every single image. My suggestion here is to use CSS classes instead:
    https://www.w3schools.com/cssreF/sel_class.php

    The BeTheme allows you to select an element and add a custom class. For example, you can add a custom class to the element that contains the image:
    [attachments are only viewable by logged-in members]

    Then use that class in the CSS code to apply the effect to every image that is inside that image, like this:
    [attachments are only viewable by logged-in members]

    This way, for example, you can add that code to the Global CSS section:
    [attachments are only viewable by logged-in members]

    And then, you can simply add the custom class to any container that you want to that the images inside it will have that effect. For example, this container in your homepage:
    [attachments are only viewable by logged-in members]

    Please check these images and practice this. Once you understand how to use CSS selectors, it won’t matter the filename of the images you add in your site, but the CSS classes of the containers you add to your site.

    Kind regards,
    Jair.