Finding an image in the editor

Styling (CSS)
1

Hi everyone,

Learning by doing a bit of detective work… I’m looking at a site I’ve downloaded and am trying to figure out how to identify and locate a resource.

It’s a button (an image) that leads to an upload page. However, I can’t seem to locate the graphic(s)!

I am searching within the project but not finding anything…

The HTML looks like this:

<li class="upload">
                        <a href="http://website.com/help/index.html" title="Upload Files"><span class="files">Upload Files</span></a>

Thanks!

2

Not sure this is what you meant to post?

3

Oops… how do I post HTML? :slightly_smiling_face:

4

Try using the </> icon in the post editor bar

5

Uh… closer. Not sure how to get it to wrap, though.

6

If you just trying to add link just paste it or select some text and click the link icon in the post edit bar and insert link.

7

I’m trying to paste the HTML, not the link.

8

Your first one is appearing now for some reason!

9

Can you take a screenshot of what the page actually looks like?

10

Hey Rob - no, sorry - confidential. But it’s just a header with a graphic (button) with a hover state. I can’t figure out how to identify the graphics used for the button.

11

Use dev inspector in your browser and click on the element in question (the button) this will open up a panel with the html and associated css in a side view. Look at the rules associated with the button. You will probably see something like below, this should help you out.

background-image: url(“photographer.jpg”); /* The image used */

or just

background: url(“photographer.jpg”); /* The image used */

12

Thanks! I’ll try that now.

[edit] Ok - not seeing anything different than what I’m seeing in Pinegrow… basically, it looks like a li class called “upload” that somehow has the button images embedded… but as noted, I can’t find them. They’re not listed in the code, at least where I’m looking.

13

and you’re looking at the CSS not the HTML code?

14

Yes - both. Part of my issue is that searching isn’t turning up anything I’m not already seeing, ie I’m not finding ANY reference to the images being used! Hmmm…

15

Check the resources tab in dev inspector you might see an image or asset folder then look in that and you might find the image

16

Well, yes - I could look for it manually… but the site has hundreds of images, so I’m trying to avoid doing that, which is why I’m trying to search - or identify where it’s called out in the code.

Puzzling is that all that shows up in the Properties is a Title and its HREF.

17

look for the class .upload in the css file

1 Like
18

Thanks - Ok, figured it out! I was looking for a single button image - it’s using a larger image with a grid of button states as a background image, so that when :hover: is active, for example, it’s changing the background image position.

Interesting! I haven’t seen buttons done this way before, but I haven’t built a site myself in a long time, either.

Pinegrow is great for this!

19

Its not unusual practice to combine images into on file (sprite) which reduces the number of times the browser has to contact the server to request files, load one slighter larger file once and store in cache versus loading several smaller files with repeated contact with the server. Then just css to move the position of the sprite to display correct area of single image on hover, etc.

1 Like
20

Understood - I’m going to practice this… could be a bit of a pain in the butt as I’m used to setting up buttons using Illustrator / Photoshop named layers, but I’ll figure something out.

thanks