How Can I Resize Images?


(Steve Peterson) #1

I’m on the latest version of Foundation and RapidWeaver. Is there a way to natively resize images or do I need a special stack/add on for that? If so, what would be recommended?


(Jon C. Munson II) #2

Please clarify “resize.”


(Steve Peterson) #3

Simply want to make the an image larger on the web page. Like a simply either drag and stretch or a click on the image and via a dialog box make the image larger.


(Jon C. Munson II) #4

By that do you mean larger than the default “100%?”


(Steve Peterson) #5

That would be correct.


(Jon C. Munson II) #6

There’s not a way to do that in RW that I know of.

However, there are three workarounds I can immediately think of.

  1. Resize the image in outside editor to bigger than you planned. This gives you some flexibility to adjust the size in RW.

  2. Provided it is the only image on the page, plop your image on the page where you want it. Go to Preview mode. Right-click on the image, choose Inspect Element and nab the image class name (hopefully there is one). In the custom CSS, add the class and set the size accordingly.

  3. Nab @joeworkman’s CSS Box and wrap that around the image. Set the div id, and then create the custom CSS that way (#yourID img).


(Robert Ziebol 🖖🏼) #7

Do you mean something like this
http://www.zeebedesigns.com/foundation-image-zoom
Click on the image. It is made with Joe’s Zoom Image Stack

Edit - I got rid of the caption that looked weird with this code

tr {display: none !important;}

Edit 2 - A screenshot of the stack’s settings


(Steve Peterson) #8

Thanks for the two tips gang. I’ll horserace one against the other and let you know the result. Thanks again for your quick responses!