Inserting Images

Just learning Pinegrow (coming from MS Expression web). Can’t figure out how to insert my own images. Normally, when selecting [insert] a program will open up a file browser. Pinegrow just inserts a random image via it’s web URL whenever you insert the image element, and I can’t find any way to change out the image. How do I get a pointer to my local file structure and get rid of the default Pingrow file pointer? I have been all through the software and the settings. Thanks

Image Tag selected, either click on placeholder image or folder icon bringing up the dialogue:

Did you really expect, we’re working since years without images?



Why didn’t I notice that teeny-tiny folder icon?! Thank you Thomas. I will blame this on the fact that I am vision-challenged (yes…really!)

I don’t even get a dialog box—just the stock photo of tomatoes from the web inserted whether I like it or not… If I drag the image icon from the bootstrap library or right click… I can go in and edit the code every time, but would like to know how I get to the dialog box so I can use an image other than Stock art… In Dreamweaver, it’s very easy. How do I get the dialog box?

Hi @peterwohlsen,
So if you select the image, either in the Tree panel, or in the Page View

You can then open the Properties panel.

This will contain the input for the source URL.
You can also drag images from your project folder to the area where the existing image is on the Page or in the Tree and Pinegrow will swap them for you.

Hope this helps,

Hi @Bosco,
I know this reply is a little delayed, but did you know that there is a magnifying glass for the workspace? I know it makes things a little trickier to navigate, but it might be helpful. You can use it in conjunction with the page zoom level to keep the page you are working on reasonably sized.

My eyes aren’t getting any younger, so I like this feature!

Rob, thanks for taking the time to help… Very much appreciated. Is there a way to just insert a photo where none currently exists? It seem like I have to insert the stock photo from the web, then replace it. I can see that that makes sense with all of the provided blocks and assets which do have photos in place. I’ll keep reading and watching the videos.


Not quite sure what you mean by this. It depends on how you want the image displayed. The Library panel has an ‘’ tag you can drag to the page.

Is that what you mean? It will put in a placeholder that can then be replaced.
You can also drag JPG and PNG (maybe GIF) directly to the Page/Tree and they will be inserted with HTML tags.

In Dreamweaver, you put your cursor in the proper place in the code then just select insert>HTML>Image and it gives you a dialog box to navigate to the image in your site folder, you select the image and it’s there—That’s Dreamweaver though, I liked the look of Pinegrow as it offers some visual styling capabilities where Dreamweaver is becoming the place for hand coding…

I was just looking for a simple way to add an image to a page directly instead of adding in the stock photo of tomatoes that gets inserted by default, then replacing it.

It seems like images should come from the assets folder? Then I can access my images from the library?

My apologies on these rather basic questions, I have been reading and watching the tutorials, but am just trying to master basic functions still. I sure thank you for your swift response, and your understanding…

No worries.
What type of sites are you building? I only ask because you are saying that you “can access my images from the library”. If you are building a straight/hybrid HTML site, you will have to upload you images to the hosting server. You can control where you want them located and I encourage you to emulate your final directory structure in your local project folder. Anyway, unless it is some type of CMS like WordPress you likely won’t have a “library” of images, just whatever folder you upload.
Again, if that folder is in your project opened in Pinegrow you can just drag and drop the images where you want on the page. Pinegrow doesn’t copy images from other directories on your local computer to the project, you have to bring them in using your file explorer.
Hope this helps,


The Project I am working on now is a straight HTML site I originally created in Dreamweaver using a plug in called FlexiLayouts which really allowed me to style visually. That plugin was great, but no longer supported and hence me coming to PineGrow. Pinegrow has more powerful capabilities for sure. So I set up my site folder, a folder for Templates or master pages, a folder for images, maybe one for pdfs, etc, all html files loose in the root directory.

Also I did not say I could access my images folder from the library, I was just trying to find out how to simply insert an original image that I had created for use specifically for this project, or any other. My object was trying to find out the Pinegrow way of inserting an image… Also I’m on a Mac here, not sure how much different that makes things.

I was able to get in and style the site as plain HTML and I’m really liking it…