How to add an image above a paragraph stack

(Ronnie West) #1

On my website, on the PTE tutorials page, I have added an image above some of the tutorials. I just cannot remember how I did this (it’s an age thing)
Can someone explain how I should accomplish this please?

(Jason Bostick) #2

It looks like you just have an image stack above a paragraph stack in the same column…

(Ronnie West) #3

Hi Jabostick,
You are correct but, then how did I get the image into the stack?
Was I correct in adding the image to the Resources and then copying the URL and setting this in Page Inspector.
That seems to have worked but I had some difficulty understanding how to size and format the image beforehand.
Looks like I will have to learn the whole process from start to finish and then write a tutorial, for others who may be having a similar problem.
Any guidance would be very much appreciated.
Ron West.

(Isaiah Carew) #4

Adding an image over text similar to your page is pretty simple:

  1. Drag in a One Column Stack
  2. Drag an image from the Finder into it.
  3. Drag a text stack in below the image.

There’s not really much more to it.

Here’s 3 gifs that show how to produce a rough version of the layout of the entire page:

First gif: this one shows creating a header and adding one column of text – like the top of your page.

Second gif: i add a two column stack and make a copy of the content from above into it. then i add some padding and a border to the text to make it similar to your page.

Third gif: i add an image and give it a border then copy the content to the other column to fill it in. i also adjust the gutter width.

Your page obviously has lots of other little bits and bobs, but it just takes about 1 minute 30 seconds to get the layout roughed out. :slight_smile:

Hopefully this helps you get back into the swing of things.

(Ronnie West) #5

Wow! You certainly gave me a first class answer.
Thank you very much for your detailed response to my question. The gif’s were an added bonus and will be a great help.
Thanks again!

(Ronnie West) #6

I have watched your gif’s and now understand much more but, can you explain how to resize the image and where it should be saved prior to adding it to the Image Stack. That bit is still confusing me!

(Isaiah Carew) #7

“how to resize” - while Stacks/RapidWeaver do have some facility to do this, it’s very limited. i usually recommend starting with an image that’s appropriately sized. what that means depends a lot on how you acquired the image. if it’s a bit of clip-art then it’s probably fine as-is. if it’s a photo from a 10 MegaPixel camera then you’ll probably want to use Photos/Lightroom/Photoshop/Whatever-Your-Favorite to export something that fits your page.
If you’d like to resize the image within stacks you can double-click it and choose a different size, then click done. this will export a resized version – but the original image is stored in your RapidWeaver file for safe keeping.

“where should it be saved” - it doesn’t matter. it just has to be an image file somewhere on some hard disk. just drag it from the finder.

I’d recommend throwing caution to the wind and just giving it a shot. If it doesn’t work, tell us what went wrong or where you got stuck and we’ll give you a hand. :slight_smile:


(system) #8

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.