The English Lakes

User:Borderman/Example flex boxes: Difference between revisions

User page Discussion

User:Borderman/Example flex boxes (view source)

Revision as of 15:26, 23 March 2024

1,845 bytes removed ,  3 months ago
testing flexible image gallery
VisualWikitext
(update class name to flex-container)
(testing flexible image gallery)
Line 1:
<div class="left-siderow" align="center"> ▼
<!-- The flexible grid (content) -->
<div class="flex-containercolumn">
<div class="res-img" style="width:100%">[[File:Friar's Crag from Strandshag Bay (6087).jpg|link=Friar's Crag]]{{c|{{x-smaller|[[Friar's Crag]]}}}}</div>
▲ <div class="left-side">
<div class="res-img" style="marginwidth:0 0 10px 0;" align="center100%">[[File:RiverBowder BrathayStone atmetal Elter Watersteps (46156290).jpegjpg|link=Bowder Stone]][[File:{{{image}}}c|center|{{{imagex-size}}}pxsmaller|{{{image-alt}}}[[Bowder Stone]]<br>{{c|{{{image-caption}}}}}</div>
<div class="res-img" style="width:100%">[[File:Easedale Tarn (3414).jpg|link=Easedale Tarn]]{{c|{{x-smaller|[[Easedale Tarn]]}}}}</div>
<div style="font-family:noteworthy; color:#50ab8a; float:left; font-size:5.6em; margin:0 .1em 0 0; line-height: 0.85;">{{{first-letter}}}</div>{{{text}}}
<div class="res-img" style="width:100%">[[File:Lonscale Fell and Blencathra from Walla Crag (6182).jpg|link=Walla Crag]]{{c|{{x-smaller|[[Walla Crag]]}}}}</div>
An eye-catching moment whilst walking along the Cumbria Way at [[Elter Water]] is that casual glance over your should to be met with a group of perfectly aligned trees near the banks of the [[River Brathay]]. It was almost as if this was purposefully set up just for moments like this, but of course in reality those trees have been there a long time, just as the river has flowed this course for an age. Yet, that glimpse catches one's attention, even imagination, and a simple capture can create something so visually pleasing to the eye. Don't turn back and you could miss it. Being in the right place at the right time certainly helps with the creative juices, but in all honesty it is all about looking at your surroundings and seeing what is really there. What you do next is entirely up to you.
</div>
 
<div class="right-side"><div class="res-img">
<div class="column">
{{leaflet map
<div class="res-img" style="width:100%">[[File:Lonscale Fell and Blencathra from Walla Crag (6182).jpg|link=Walla Crag]]{{c|{{x-smaller|[[Walla Crag]]}}}}</div>
|latitude = {{{latitude}}}
<div class="res-img" style="width:100%">[[File:Easedale Tarn (3414).jpg|link=Easedale Tarn]]{{c|{{x-smaller|[[Easedale Tarn]]}}}}</div>
|longitude = {{{longitude}}}
<div class="res-img" style="width:100%">[[File:Bowder Stone metal steps (6290).jpg|link=Bowder Stone]]{{c|{{x-smaller|[[Bowder Stone]]}}}}</div>
|service = leaflet
<div class="res-img" style="width:100%">[[File:Derwentwater and four isles (6157).jpg|link=Lord's Island]]{{c|{{x-smaller|[[Lord's Island]]}}}}</div>
|static = no <!--yes or no-->
</div>▼
|zoom = 15
 
|fullscreen = yes <!--yes or no-->
<div class="column">
|scrollwheel = no <!--yes or no-->
<div class="res-img" style="width:100%">[[File:Friar's Crag from Strandshag Bay (6087).jpg|link=Friar's Crag]]{{c|{{x-smaller|[[Friar's Crag]]}}}}</div>
|width =
<div class="res-img" style="width:100%">[[File:Bowder Stone metal steps (6290).jpg|link=Bowder Stone]]{{c|{{x-smaller|[[Bowder Stone]]}}}}</div>
|height =
<div class="res-img" style="width:100%">[[File:Easedale Tarn (3414).jpg|link=Easedale Tarn]]{{c|{{x-smaller|[[Easedale Tarn]]}}}}</div>
|clicktarget = }}
<div class="res-img" style="width:100%">[[File:Lonscale Fell and Blencathra from Walla Crag (6182).jpg|link=Walla Crag]]{{c|{{x-smaller|[[Walla Crag]]}}}}</div>
<div style="margin:10px; font-size:90%;">{{c|The coordinates below are specific to the camera's location – '''not''' the location of the subject.}}</div></div>
</div>
{|class="" style="width:100%; font-size:; <!--background-color:#f7f7f7; border:1px #ccc solid;--> margin:0; padding:px; border-collapse:; line-height:2em;"
 
|-
<div class="column">
{{#if:{{{Author}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Author'''
<div class="res-img" style="width:100%">[[File:Lonscale Fell and Blencathra from Walla Crag (6182).jpg|link=Walla Crag]]{{c|{{x-smaller|[[Walla Crag]]}}}}</div>
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{Author}}}}}
<div class="res-img" style="width:100%">[[File:Easedale Tarn (3414).jpg|link=Easedale Tarn]]{{c|{{x-smaller|[[Easedale Tarn]]}}}}</div>
|-
<div class="res-img" style="width:100%">[[File:Bowder Stone metal steps (6290).jpg|link=Bowder Stone]]{{c|{{x-smaller|[[Bowder Stone]]}}}}</div>
{{#if:{{{date-taken}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Date taken'''
<div class="res-img" style="width:100%">[[File:Derwentwater and four isles (6157).jpg|link=Lord's Island]]{{c|{{x-smaller|[[Lord's Island]]}}}}</div>
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{date-taken}}}}}
</div>
|-
{{#if:{{{camera}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Camera'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{camera}}}}}
|-
{{#if:{{{place-name}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Place name'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{place-name}}}}}
|-
{{#if:{{{latitude}}}{{{longitude}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''{{w1|Decimal degrees}}'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{latitude}}} / {{{longitude}}}}}
|-
{{#if:{{{os-grid}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''OS grid reference'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{os-grid}}}}}
|-
{{#if:{{{w3w}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''[https://what3words.com what3words]'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} [https://what3words.com/{{{w3w}}} {{{w3w}}}]}}
|-
{{#if:{{{elevation}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Elevation'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{elevation}}}}}
|-
{{#if:{{{view-direction}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''View direction'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{view-direction}}}}}
|-
{{#if:{{{file-size}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''File size'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{file-size}}}}}
|-
{{#if:{{{dimensions}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Dimensions'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{dimensions}}}}}
|-
{{#if:{{{licence}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Licence'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{licence}}}}}
|}
▲ </div>
</div>
Retrieved from "https://theenglishlakes.uk/wiki/Special:MobileDiff/3612"