Page Images linking to a "portfolio" « My Site My Way Support

Page Images linking to a "portfolio"

resolved (23 posts) (3 voices)

MichelleBrenn
Member

http://www.w-design-build.com/residential-portfolio/ I'm using the picture frame shortcodes, and when I link these images to individual pages or post the images get all separated up...when there are no "links" the images sit nicely inside their 3 columns. Can you see what I can do to easily like one image to a set of other images in either a post or page.

Posted 3 months ago #
Elliott
Support

Hello MichelleBrenn,

Paste the code your using here.

Posted 3 months ago #
MichelleBrenn
Member

[image_frame style="framed_shadow" align="right" alt="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/FenwickWEB.png[/image_frame]
[image_frame style="framed_shadow" align="left" title="9th Road Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/3-9th-Road-Backyard.jpg[/image_frame][image_frame style="framed_shadow" align="center" title="15th Road Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/15th_road_1.jpg[/image_frame]

[image_frame style="framed_shadow" align="left" title="Oak Street Residence" height="200" width="249"]http://www.w-design-build.com/wp-content/uploads/2011/05/oak_street_2_side_of_front.jpg[/image_frame][image_frame style="framed_shadow" align="right" title="Guilford Residence" height="200" width="249"]http://www.w-design-build.com/wp-content/uploads/2011/05/guilford_12_exteriorr.jpg[/image_frame]

[image_frame style="framed_shadow" align="center" title="Appian Way Residence" height="200" width="249"]http://www.w-design-build.com/wp-content/uploads/2012/01/IMGP6874.jpg[/image_frame]

Posted 3 months ago #
Elliott
Support
And your wanting to have them fit 3 in a row correct?

Use our column shortcodes, http://mysitemyway.com/docs/index.php?title=Column_Shortcodes.
```
[one_third] insert image [/one_third]
[one_third] insert image [/one_third]
[one_third_last] insert image [/one_third_last]
```
Posted 3 months ago #
MichelleBrenn
Member

ok...thanks!

Posted 3 months ago #
MichelleBrenn
Member

I've worked with the column shortcodes...but am still experiencing some "alignment" issues...
see: http://www.w-design-build.com/residential-portfolio/

Posted 3 months ago #
MichelleBrenn
Member

In addition to alignment....I want to link each one of these images to a set of additional images (set up as a page) but they only open up in the "lightbox" and don't link to any other defined content.

Posted 3 months ago #
Elliott
Support
Take the alignment off of your image_frames.

To create a custom link you would this,
```
<a href = '#'>
[image_frame link_to = "false" prettyphoto = "false"]link to your image[/image_frame]
</a>
```
Posted 3 months ago #
MichelleBrenn
Member

That did solve the linking issue..but it resized my image; http://www.w-design-build.com/residential-portfolio/

Posted 3 months ago #
Elliott
Support

You can set the width and height inside the shortcode, http://mysitemyway.com/docs/index.php?title=Image_Frames.

Posted 3 months ago #
MichelleBrenn
Member

The width and height were not changed....but that image just changed once I turned it into a link

Posted 3 months ago #
Elliott
Support

Paste the full code your using here.

Posted 3 months ago #
MichelleBrenn
Member

[one_third]

[image_frame link_to = "false" prettyphoto = "false"]="S. Fenwick Street Residence" height="100" width="150"]http://www.w-design-build.com/wp-content/uploads/2011/05/FenwickWEB.png[/image_frame]
[/one_third]
[one_third]
[image_frame style="framed_shadow" align="left" title="9th Road Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/3-9th-Road-Backyard.jpg[/image_frame]
[/one_third]
[one_third_last][image_frame style="framed_shadow" align="center" title="15th Road Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/15th_road_1.jpg[/image_frame][/one_third_last]
[divider]
[one_third]
[image_frame style="framed_shadow" align="left" title="Oak Street Residence" height="200" width="249"]http://www.w-design-build.com/wp-content/uploads/2011/05/oak_street_2_side_of_front.jpg[/image_frame]
[/one_third]
[one_third]
[image_frame style="framed_shadow" align="right" title="Guilford Residence" height="200" width="249"]http://www.w-design-build.com/wp-content/uploads/2011/05/guilford_12_exteriorr.jpg[/image_frame][/one_third]
[one_third_last]
[image_frame style="framed_shadow" align="center" title="Appian Way Residence" height="200" width="249"]http://www.w-design-build.com/wp-content/uploads/2012/01/IMGP6874.jpg[/image_frame][/one_third_last]

Posted 3 months ago #
Elliott
Support

You have this for your first image,

[image_frame link_to = "false" prettyphoto = "false"]="S. Fenwick Street Residence" height="100" width="150"]

You can see the ending bracket in the middle which is stopping the shortcode.

Posted 3 months ago #
MichelleBrenn
Member

thanks so much!!! That worked!! Now, if you can tell me how to easily add text below each image...I've tried another 3 column shortcode but the text is too far away from the images and isn't centered in each column. I would like something centered below the images. Thanks!

M.

Posted 3 months ago #

obigrant
Member

MichelleBrenn, you can try inserting text wrapped with the span shortcode after the image frame shortcode within the same column. Example below...

[one_third]
[image_frame link_to = "false" prettyphoto = "false" alt="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/FenwickWEB.png[/image_frame][span style="padding-left:90px"]This is a test[/span]
[/one_third]

Play around with the padding-left to get your text centered.

Posted 3 months ago #

MichelleBrenn
Member

That looks GREAT but it's wobbled up my alignment again: http://www.w-design-build.com/residential-portfolio/

Posted 3 months ago #
MichelleBrenn
Member

Here's the coder for the 3 images above the divider:

<h3>[one_third]
[image_frame link_to = "false" prettyphoto = "false"="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/FenwickWEB.png[/image_frame][span style="padding-left:0px"]S. Fenwick Street Residence[/span]<br style="text-align: left;" /> [/one_third][one_third]
[image_frame link_to = "false" prettyphoto = "false"="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/3-9th-Road-Backyard.jpg[/image_frame][span style="padding-left:35px"]9th Road Residence[/span]
[/one_third][one_third_last]
[image_frame link_to = "false" prettyphoto = "false"="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/15th_road_1.jpg[/image_frame][span style="padding-left:25px"]15th Road Residence[/span]
[/one_third_last]</h3>
[divider]

Posted 3 months ago #
Elliott
Support
You need to get rid of the H3. If you want an H3 below your image then do this,
```
[one_third]
[image_frame][/image_frame]
<h3>Here is an H3</h3>
[/one_third]
```
Posted 3 months ago #
MichelleBrenn
Member

Ok...i fixed it...and only one thing remains....a large gap under the middle and right colums:
http://www.w-design-build.com/residential-portfolio/

Posted 3 months ago #

MichelleBrenn
Member

Here is the revised code I'm using:

[one_third]
<a href="http://www.w-design-build.com/south-fenwick-street-portfolio">[image_frame link_to = "false" prettyphoto = "false"="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/FenwickWEB.png[/image_frame][span style="padding-left:0px"]</a>
<h3>S. Fenwick Street Residence</h3>
[/span]
[/one_third][one_third]
<a href="http://www.w-design-build.com/9th-road-portfolio/">[image_frame link_to = "false" prettyphoto = "false"="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/3-9th-Road-Backyard.jpg[/image_frame]</a><a href="http://www.w-design-build.com/south-fenwick-street-portfolio">[span style="padding-left:25px"]</a>
<h3>9th Road Residence<h3>
[/one_third][one_third_last]
<a href="http://www.w-design-build.com/15th-road-portfolio/">[image_frame link_to = "false" prettyphoto = "false"="S. Fenwick Street Residence" height="200" width="250"]http://www.w-design-build.com/wp-content/uploads/2011/05/15th_road_1.jpg[/image_frame]</a><a href="http://www.w-design-build.com/south-fenwick-street-portfolio">[span style="padding-left:25px"]
</a>
<h3>15th Road Residence</h3>

Posted 3 months ago #

Elliott
Support

Your nesting your elements wrong, get rid of all your span code, they are not needed in this case.

Posted 3 months ago #
MichelleBrenn
Member

great! thanks!!

Posted 3 months ago #