Test Pages
Introduction
I have been taking photos for over 50 years and photos, photography and equipment are all important to me. On this page I explore how photos can be displayed within Weebly sites.
The photo of the cake to the left is from my Flickr account. Initially I planned to use Weebly Custom HTML and paste embed HTML statement from Flickr but this proved to be unstable.
So instead I used Flickr to show image of certain size and then right clicked image and copied image URL which I then used in Weebly Picture element. Alternative on the right I copied just the Source URL from Flickr embed statement which I pasted into Custom HTML element. I surrounded this with Div commands and used style of text-align:center so that caption, which is enclosed in p commands, will be aligned to centre. |
Clown cake. Flickr photo linked by URL in bespoke html div commands. |
Paragraph with Picture
Waiting for fish and chips at Yarmouth
This is the 3rd type of element I have used on this page to add a photo.
It is another one from my Flickr Household Set, I used the All Sizes Action, chose small 320 option and right clicked on the image and copied image URL which I pasted into Weebly Picture.
What controls do I have over the Paragraph with Picture element?
Nothing special with the text part. I cannot even indent this line except by adding blanks which I do not want to do as this will not indent whole paragraph, just first line.
Photo
It is another one from my Flickr Household Set, I used the All Sizes Action, chose small 320 option and right clicked on the image and copied image URL which I pasted into Weebly Picture.
What controls do I have over the Paragraph with Picture element?
Nothing special with the text part. I cannot even indent this line except by adding blanks which I do not want to do as this will not indent whole paragraph, just first line.
Photo
- I can resize using Edit.
- Enable open larger image when clicked (test this for real when published)
This did not work, maybe because I had set link so when clicked followed this. - Use as anchor point to link. This time it links to Flickr slideshow of photos.
DIY Menu BarBelow I have experimented with building your own menu bar.
To start create a 5 column Multiple Columns element and add a Custom HTML element to the first column. The code I used is shown to the right (which incidentally is a Custom HTML element with < and > replaced with < and >). I was not sure how to address my Weebly page Multimedia Photos so I also created a Paragraph element, typed in web page name and used standard Weebly facilities to link to this page. Publish the site and in Safari I used Inspect Element to copy the command that was created by Weebly and pasted this in the div. The command was <a href="multimedia-photos---gallery.html /multimedia-photos.html">MultiMedia Photos<a> Olympus XA |
HTML used to create link button
<div style="margin-left:10px; background-color:#6d9; width:6.5em;color:#03f; padding:3px 10px; border-style:solid; border-color:#666; border-width:medium; text-align: center; > <a href="multimedia-photos---gallery.html">MultiMedia Photos <a> |