css Question posted in
Some basic documentation can be found here.

Dynamic Flickr Background Image for css tag

I am trying to update my flickr gallery script to instead replace a background image url with the output of the flickr script.

I created a pen here showing my progress.

        <div id="banner">
        <div class="container">
            <header>
                <div class="row">
                </div>
                <h2>Page Title</h2>
            </header>
        </div>
    </div>



var flickrID = '189509301@N03'; 
var photoCount = '1'; 
var tags = "'featured','hcdbanner'"; // PHOTO TAGS
var tagmode="all"
if (tags != ''){tags = '&tags=' + tags}
var limit = photoCount-1;
var flickrUrl = 'https://api.flickr.com/services/feeds/photos_public.gne?id=' + flickrID + '&per_page=' + photoCount + '' + tags + '&format=json'
$.ajax({
  url: flickrUrl,
  dataType: "jsonp",
  jsonp: 'jsoncallback',
  success: function (data) {
    //console.log(data);
    var flickrhtml = '';
    //Loop Through Each Feed Item
    $.each(data.items, function(i, item) {
      flickrhtml += "'background:(url"item.media.m.replace('_m', '_b')"';
      return i<limit;
    });

    $('#banner').html(flickrhtml);
  }
});

The idea behind it would be for each image on our flickr account we give a certain set of tags, it would then append it as a background image for the #banner tag.

Would anyone be able top provide the proper way to attach the output to the #banner tag?

Tags:

2

Answers


  1. 0

    There are multiple problems in the ajax success function. If you check the console, you’ll see there is a syntax error in the code that creates the background urls. In addition, the code is adding the urls to the banner as html rather than as css.

    To fix these problems, modify the string formatting to:

    'url(' + item.media.m.replace('_m','_b') + ')' 

// output: url(https://live.staticflickr.com/65535/54200949335_190f6313a7_b.jpg)

    Array.map followed by Array.join is a better way to combine these urls than jQuery.each.

    The list of background image urls can then be applied using jQuery css

    $('#banner').css('background-image', flickrhtml);

    And here is the final result with minimal changes to your original code:

    // Top Banner Flickr Script 
var flickrID = '189509301@N03'; 
var photoCount = '1'; 
var tags = "'featured','hcdbanner'"; // PHOTO TAGS
var tagmode="all"
if (tags != ''){tags = '&tags=' + tags}
var limit = photoCount-1;
var flickrUrl = 'https://api.flickr.com/services/feeds/photos_public.gne?id=' + flickrID + '&per_page=' + photoCount + '' + tags + '&format=json';
$.ajax({
  url: flickrUrl,
  dataType: "jsonp",
  jsonp: 'jsoncallback',
  success: function (data) {
  
    let flickrhtml = data.items.map(item => 
      'url(' + item.media.m.replace('_m','_b') + ')').join(',');

    $('#banner').css('background-image', flickrhtml);
    
  }
});     
    #banner {
 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(67,65,159,.025) 25%);   
  position: relative;
  background-position: center center;
  padding: 10em 0em;
  background-size: cover;
  text-align: center;
  margin-top: 20px;
}

#banner header h2 {
  font-size: 2.8em;
  color: #FFFFFF;
  text-shadow: 2px 2px #595959;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div id="banner">
  <div class="container">
    <header>
      <div class="row"></div>
      <h2>Houston Housing &amp; Community Development</h2>
    </header>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Simple solution using plain HTML and JS. I’m only using the first image listed in the response.

    body {
  margin: 0;
}

#banner {
  height: 80vh;
  background-size: cover;
  background-position: 50% 70%;
}
    <div id="banner"></div>

<script>
const jsonFlickrFeed = response => {
  if (response.items.length == 0) return
  const imageUrl = response.items[0].media.m.replace('_m', '_b')
  document.getElementById('banner').style.backgroundImage = `url(${imageUrl})`
}
</script>

<script src="https://api.flickr.com/services/feeds/photos_public.gne?id=189509301@N03&tags=featured,hcdbanner&format=json"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search