RW - attribute link and resource link function - example from RWExtras

RWExtras : Simpler webdev, one stack at a time…

Using the prettyP Photo Gallery couldn't be easier as it's just drag and drop. To learn how to use it, just review the first video on the Easy Galleries page.

However, you can only drag and drop images therefore, for other content, such as videos, external websites, inline content, etc. we'll need a different stack: prettyP Any Gallery. To use it effectively, this stack requires a basic understanding of the Add Link feature in RapidWeaver.

To use the prettyP Any Gallery stack, please check the second video on the Easy Galleries page to see how it's done. As you can see, you select the default text "Add link to content here" and click on the Add Link icon at the top of the screen. You'll get a window like this one:

 

Here, you need to fill out 2 areas:

1. The location of your content (input box in front of the highlighted URL drop down list) and
2. The Value of the 'title' which becomes the description that you'll see at the bottom of the lightbox.

However, if you click on the URL drop down list highlighted in the previous screenshot, you get this 3 options: URL (default), Page and Resource.

The URL option is used to link to images located on a server. URLs look like this: http://rwextras.com/media_files/img7.jpg. Hold this thought as we'll see more examples of URLs very shortly...

 

 

The Page option does not apply to prettyPhoto.

However, the 'Resource' option is very important because it allows you to easily link directly to any content added to the Resources. 

 

To use it, just select the appropriate Resource from the list that will appear on the right of the black triangle, then add a 'Value' to the 'title' attribute, which will become the description at the bottom of the lightbox, and you're done. No manual links to set up.

However, to add other types of content, such as videos, external websites, inline content, etc., we can't avoid having to add some basic code to the URL input box.
The table below provides typical links to different types of content.

As you can see, in most cases, the code is just a URL followed by settings for width and height to allow prettyPhoto to properly size the lightbox…

 

Content URL

Inline Content #inline Then, add a hidden div with your content anywhere on the page following this pattern (notice that the URL above, following the # sign, and the div's 'id' must match…): <div id="inline" style="display: none;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

External Website http://realmacsoftware.com?iframe=true&width=900 &height=500

YouTube Video http://www.youtube.com/watch?v=LUOvAQkLfRE &width=420&height=315

Vimeo Video http://vimeo.com/1431195?width=600&height=338

Quicktime Video http://rwextras.com/media_files/afternoon.mov ?width=300&height=360

QTVR Video http://rwextras.com/media_files/street360.mov ?width=400&height=300

FLV, MP4, M4V Video http://rwextras.com/media_files/fringex.mp4 ?width=640&height=352

Flash Content http://rwextras.com/media_files/tangramone.swf ?iframe=true&width=400&height=300

Google Docs http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf &embedded=true&iframe=true&width=1000&height=500

Google Maps #map Then, add a hidden div like this anywhere on the page with the HTML code provided by Google Maps inside of it (notice that the URL above, following the # sign, and the div's 'id' must match…): <div id="map" style="display:none;"> Paste here "HTML to embed in website" (from Google Maps website) </div>

 

For those of you technically inclined, who prefer NOT to use the 2 complementary stacks, the table below provides full details to set up links either fully manually or using RapidWeaver's Add Link feature.

 

Content Live example Code

Single Image Link text here <a href="http://rwextras.com/media_files/pic1.jpg" title="Single image" rel="prettyPhoto">Link text here</a>

Image Gallery Link text here Requires 2 parts: Part 1- Link to first image in the gallery: <a href="http://rwextras.com/media_files/pic1.jpg" title="Image 1" rel="prettyPhoto[gal]">Link text here</a> Part 2- Hidden div with links to remaining images in the gallery: <div style="display:none;"> <a href="http://rwextras.com/media_files/pic2.jpg" title="Image 2" rel="prettyPhoto[gal]"></a> <a href="http://rwextras.com/media_files/pic3.jpg" title="Image 3" rel="prettyPhoto[gal]"></a> <a href="http://rwextras.com/media_files/pic4.jpg" title="Image 4" rel="prettyPhoto[gal]"></a> </div>

Inline Content Link text here Requires 2 parts: Part 1- Link to the hidden div included in Part 2 below: <a href="#inline" title="Inline Content" rel="prettyPhoto">Link text here</a> Part 2- Hidden div with content (notice that the 'href' above, following the # sign, and the div's 'id' must match…): <div id="inline" style="display: none;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>

External Website Link text here <a href="http://realmacsoftware.com?iframe=true &width=900&height=500" title="External Website" rel="prettyPhoto">Link text here</a>

YouTube Video Link text here <a href="http://www.youtube.com/watch?v=LUOvAQkLfRE &width=420&height=315" title="YouTube video" rel="prettyPhoto">Link text here</a>

Vimeo Video Link text here <a href="http://vimeo.com/1431195 ?width=600&height=338" title="Vimeo Video" rel="prettyPhoto">Link text here</a>

Quicktime Video Link text here <a href="http://rwextras.com/media_files/ afternoon.mov?width=300&height=360" title="Quicktime Video" rel="prettyPhoto">Link text here</a>

QTVR Video Link text here Very large file, might take a while to load... <a href="http://rwextras.com/media_files/ street360.mov?width=400&height=300" title="QTVR Video" rel="prettyPhoto">Link text here</a>

FLV, MP4, M4V Video Link text here <a href="http://rwextras.com/media_files/fringex.mp4 ?width=640&height=352" title="MP4 Video" rel="prettyPhoto">Link text here</a>

Flash Content Link text here <a href="http://rwextras.com/media_files/ tangramone.swf?iframe=true&width=400&height=300" title="Flash Content" rel="prettyPhoto">Link text here</a>

Google Docs Link text here <a href="http://docs.google.com/gview ?url=http://infolab.stanford.edu/pub/papers /google.pdf&embedded=true&iframe=true&width=1000&height=500" title="Google Docs" rel="prettyPhoto">Link text here</a>

Google Maps Link text here Requires 2 parts: Part 1- Trigger: <a href="#map" title="Google Map" rel="prettyPhoto">Link text here</a> Part 2- HTML Code from Google Maps (notice that the 'href' above, following the # sign, and the div's 'id' must match…): <div id="map" style="display:none;"> Paste HTML to embed in website (from Google Maps website) </div>

 

In RapidWeaver, links can be added using 2 methods:

1. Manual links (as described above using <a> tags
2. Add Link command

 

The image below shows how manual links relate to links created using the Add Link method:

1. The 'href' attribute becomes the URL
2. The 'title' attribute is entered in the Custom Attributes area
3. The 'rel' attribute is added and entered in the Custom Attributes area
4. The link text is the text (or thumbnail…) to which Add Link is applied

 

If you decide to use the Add Link method with prettyPhoto (without the help of the complementary stack), please refer to this information to adapt the examples described in the table above.