Flickr-Colorbox integration in Drupal 7 (Backdrop) & auto float images in text body alternately right and left.

For a demo with admin access (UID=1), go here.

Wed, 07/12/2011 - 15:28 - Locals. cLocals

DEMO PAGE of both the AutoFloat (Backdrop) and Flickr module (Backdrop) from the distro at https://drupal.org/project/demo_flickr.
They work seamless together out-of-the-box. A huge time-saver. Ultra fast page load, also on a free host like this one.

Used:

Activated Flickr sub-modules:

  • Flickr Block
  • Flickr Filter
  • Flickr Sets
  • Flickr Style
  • Flickr Cache Warmer

NOTHING MORE, NOTHING LESS.
No other customizations, modifications, alterations, additions, whatsoever.

ALSO THE CAPTION FLOATS AND DIVIDES OVER MORE ROWS IF NECESSARY.. Tue, 06/12/2011 - 16:30 - El Deir. cEl Deir on a sunny day. An example of a long title.
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?' Wed, 07/12/2011 - 17:09 - Man, horse and moon. cMan, horse and moon

AN IMAGE CAN BE PUT ALSO HALFWAY A PARAGRAPH. THAT IS WHY SPANS ARE USED INSTEAD OF DIVS (more info). “Take some more tea," the March Hare said to Alice, very earnestly. "I've had nothing yet," Alice replied in an offended tone, "so I can't take more." "You mean you can't take less," said the Hatter: "it's very easy to take more than nothing." "Nobody asked your opinion," said Alice.”

IMAGES IN A SET OF THUMBNAILS ARE EXCLUDED FROM AUTOFLOAT. NOTE HOW THE AVAILABLE INFO IN THE CAPTION ADAPTS TO THE AVAILABLE WIDTH.

TRY TO CLICK A LOCATION NAME OR THE VIDEO (the last thumbnail plays inside Colorbox).

Tue, 06/12/2011 - 16:42 - Unexpected surprise. cFlickr ON THE SMALLEST SIZE (square 75px) THE TITLE IS SUBSTITUTED WITH THE TERM "FLICKR" TO SAVE SPACE. “But I don’t want to go among mad people," Alice remarked. "Oh, you can’t help that," said the Cat: "we’re all mad here. I’m mad. You’re mad." "How do you know I’m mad?" said Alice. "You must be," said the Cat, "or you wouldn't have come here.”

Tue, 06/12/2011 - 14:33 - The most sincere smile cThe most sincere smile
IMAGE SIZE 800 PX ONLY AVAILABLE FOR FLICKR PHOTOS UPLOADED AFTER MARCH 1, 2012. “Would you tell me, please, which way I ought to go from here?" "That depends a good deal on where you want to get to." "I don't much care where –" "Then it doesn't matter which way you go.”

TRY TO RESIZE THE BROWSER WINDOW TO VERIFY HOW THE SLIDESHOW AND THE IMAGES IN THE SET AND BLOCK ADAPT TO THE AVAILABLE WIDTH.

A SLIDESHOW (SEE BELOW) OF A SET OR USER/GROUP PHOTOSTREAM CAN BE USED IN A BLOCK, THE NODE BODY OR FIELD. ALSO A NON-FLASH VERSION IS AVAILABLE. THEY BOTH SUPPORT FULL-SCREEN MODE AND ARE RESPONSIVE.

AT THE BOTTOM AN EXAMPLE OF A VIDEO.
THE WIDTH CAN BE CONTROLLED (in this case 80%). TRY BOTH ALSO IN FULL-SCREEN MODE.

 

Flickr photos from the album Petra, Jordan by Martin Postma


Flickr photos from the album Demo of a video by Martin Postma