Page with numerous bird species -linked to galleries

Wako · March 28, 2016

I have a bird photography website of 300 species. The photos is sorted into galleries by species families. I would also love to have one page that has a list of all the species (350 or more) with each species having a link to the first photo of that species in the appropriate gallery. I have tried to copy paste in a bird species listing but the formatting is bad. is there a way to copy paste a standard North American bird species list into a content block of a page and then create the links for each species?

Allen · March 28, 2016

I created a search by photo page.
http://www.photosbyat.com/Birds/Bird-Gallery/n-z3FxQ
If you add the bird name to each photo they show on the /keyword page.
http://www.photosbyat.com/keyword
Here's an example of one of my year folders. Keywords and map at bottom. Slow to load.
http://www.photosbyat.com/Birds/2015-Birding

Wako · March 29, 2016

When trying to copy in a list into a text box, it loses the alignment of the list and puts all the names within the same lines. How do you copy paste and maintain one name per line? I have tried copying from Word, Excel, etc with same result. Thanks.

Allen · March 29, 2016

Wako wrote: »

When trying to copy in a list into a text box, it loses the alignment of the list and puts all the names within the same lines. How do you copy paste and maintain one name per line? I have tried copying from Word, Excel, etc with same result. Thanks.

I used an HTML widget, not a text box.

Here's an example of code I used in html widget.

<div id="birdGallery">

<div class="birdPhoto"><a href="/keyword/bird%20species%20photographed%20in%20missouri">
<img src="/photos/726354744_4YwT9-Th.jpg" border="2" height="150" width="150" alt="image" />
<br /><span class="birdText">Birds Photographed<br />in Missouri</span></a></div>

<div class="birdPhoto"><a href="/Birds/Species-in-St-Louis-Circle">
<img src="/photos/587623091_hdizh-Th.jpg" border="2" height="150" width="150" alt="image" />
<br /><span class="birdText">Birds Photographed in<br />St. Louis 50 mile circle</span></a></div> 
...
...
...
<div class="birdPhoto"><a href="/keyword/yellow_throated%20warbler">
<img src="/photos/i-Sjr8p5p/1/Th/IMG_7408-01-Th.jpg" height="150" width="150" alt="image" />
<br /><span class="birdText">Yellow-throated Warbler</span></a></div>

</div>
<div class="spacer"></div>
<div style="clear: both;"></div>

CSS on "Just This Page" affecting html widget box.

   /* thumb box */
.sm-page-widget-5591264 {
  border: 4px double #666;
  background: rgba(22, 22, 22, .40);
  margin:0 auto !important;
}

#birdGallery a :hover,
#birdGallery a:hover {
  color: yellow !important;
}

#birdGallery img:hover {
  border-color: yellow;
}

Allen · March 29, 2016

Each "bird/link" is an individual div.
I added a bunch of div's that fill the widget and flow with screen width.

Page with numerous bird species -linked to galleries

Comments