How to go about slicing an image up?!?!

RapidWeaver Classic General
1

I have quite a large image that I am going to use for portfolio navigation.

Rather than have this image whole, I want to slice it up. I have been doing this in Blocks previously, however, in this iteration am using @willwood’s Hotspot stack to create an easy/quicker loading page to link to individual pages of the portfolio.

I’ve tried a couple of ways but to no avail.

They have been to:

Use an image stack, set to the correct size for each ‘slice’. 3 images stacks where used, then the following CSS applied to them in the inspector settings:

[code]#stacks_out_139_page3 {
position: absolute;
top: 0px !important;
left: 0px !important;
}

#stacks_out_141_page3 {
position: absolute;
top: 0px !important;
left: 298px !important;
}

#stacks_out_143_page3 {
position: absolute;
top: 0px !important;
left: 342px !important;
}[/code]

When the page has been previewed (and uploaded to server see it here) the images are missing, when I ‘inspect element’ the divs are in the position I want but the images are not being shown - see the screen shot.

Screen Shot 2015-07-30 at 22.16.21.png1440×900 186 KB

The second way I have tried is to put the image stacks (images all set to the desired sizes) into a 3 column stack which can be seen here. The problem of course being that there is a gutter between the images so no good at all.

I am fairly confident with HTML and could arrange this image using purely HTML, however, what I am not so good at are the added extras, which is why I use RW and stacks. Having an image that is sitting nicely on the page but can’t use the Hotspots stack isn’t so useful to me!!

Any help would be greatly appreciated!!!

And I thank you in advance!!

Rebecca

2

I"ve had some quick and fantastic pointers from @willwood (thank you!!)

Getting around the issue by using his Adaptive Grid and reducing padding to 0.
So sorted thank you!

3

Glad you got this sorted out. Adaptive Grid is a great stack!

I don’t know what your image is, or what format, but if it can be exported as an SVG image then you’ll have something that is likely 10% of the current size you have: and thus no need to do the grid trickery. Depending on the image, and image creation software, you are using saving as an SVG may be a non-starter though. Just throwing this in as an additional approach.

4

Thank you @Mathew, I’ll look into the SVG as currently, I have no idea what it is!

5

I don’t know what type of image you have. If it is a photograph, then it will need to be saved as a JPG or PNG for the web. (Essentially if it’s pixel based then JPG is the way to go.) However if your image is vector based then you’ll be able to save as an SVG. Generally speaking “illustrations” fall into this category: e.g. things created in Illustrator, or OmniGraffle, or Affinity Designer will most likely be able to be saved as an SVG.

So really the question is about pixels vs. vectors and which is the underlying structure of the image you are using. HotSpots Pro works nicely with either format (JPG or SVG).

6

Thank you again, just been reading up on it.

The image is currently a selection of pngs. I am needing to extend this page and I’m not too sure my husband (client) will want to recreate them as vecotrs!! Not that it’ll stop me whacking the existing images into Illustrator to see what happens of course!

We’re also trying to make it a little bit future proof; in so much as when the portfolio is extended again I don’t need to spend hours re-coding the Hotspots. The theory being that if images are sliced to the same size the % used for Hotspots in placement etc should remain the same! (I might be wrong though!)

7

I’m loving the work on that page Becca, excellent slicing work whatever the method ;-).

8

Thank you @Gabrielle!

9

@becca_shillito I’m sorry I never responded earlier. Did not get a notification that you replied. Now that I’ve seen the page, I agree you don’t want to be switching over to SVG. In this case I doubt it’s possible anyways. Making your approach “future proof” with HotSpots is a great idea. And it looks nice!

10

Not to worry, you gave me some interesting things to consider for future projects!

Thank you @Mathew!