0

let's say if I don't have <img src="x" /> I want to display <img src="y"> is this possible to do it?

Edit:

sorry if the question is confusing... The problem is this:when user inserts url and if that url is a link to youtube, then youtube thumbnail needs to be displayed. if that url isn't a link to youtube video, post.image(default image) needs to be displayed. But post.image is not getting displayed!

//display post.image

the above two displays images fine. But if {{post.thumbnail}} is none I want to display {{post.image}}... how do I do this?

this is why I need it,,please see the below code

<td>
  {% if post.main_image %} //if post has main_image
    <img src="{{post.get_image_url}}"  class="img-rounded" alt="☺" height="75" width="75"/>//display that image
  {% elif post.url %}//if post has url
    {% video post.url as my_video %} //setting post.url as my_video(problem starts here I think)
      {% if my_video %} //if my_video is there
        <img src="{{ my_video.thumbnail }}" class="img-rounded" alt="☺" height="75" width="75"/> //display the video thumbnail
      {% else %} //if my_video isn't there and post.url isn't a link to youtube
        <img src="{{post.image}}"  class="img-rounded" alt="☺ " height="75" width="75"/> //display post.image
      {% endif %}
    {% endvideo %}
  {% else %} 
    <img src="{{post.thumbnail}}"  class="img-rounded" alt="☺" height="75" width="75"/>
  {% endif %}
</td>
so main thing to look at it is for post.url if I don't have  <img src="{{ my_video.thumbnail }}" class="img-rounded" alt="☺" height="75" width="75"/> I want

<img src="{{post.image}}"  class="img-rounded" alt="☺ " height="75" width="75"/> //display post.image
mike braa
  • 647
  • 1
  • 12
  • 33
  • You mean if the image can't be loaded, i.e. it doesn't exists at that location/url etc, then load another image instead. – adeneo Apr 12 '16 at 02:00
  • @adeneo no not using alt..just if it exists or not is what I'm trying to do – mike braa Apr 12 '16 at 02:03
  • No. HTML is logicless. You have to use JavaScript for this. – Ram Apr 12 '16 at 02:04
  • @Vohuman hmm how in javascript – mike braa Apr 12 '16 at 02:05
  • Uhm, you check if the image exists by trying to load it, if it fails, you load another image instead, as noted in my first comment. You say you're trying to do something else, but it's no very clear what that is ? – adeneo Apr 12 '16 at 02:06
  • Related: http://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript – Ram Apr 12 '16 at 02:07
  • @Vohuman no I don't have a broken image – mike braa Apr 12 '16 at 02:10
  • @Vohuman I don't have a broken image, I editted the question – mike braa Apr 12 '16 at 02:10
  • So what does "if I don't have ``" mean? – Ram Apr 12 '16 at 02:11
  • 1
    This is confusing as hell, do you mean if no ***tag*** with that specific `src` attribute exist in the DOM, then insert some other ***tag*** ? – adeneo Apr 12 '16 at 02:12
  • @Vohuman so in my web users can insert url and if that url is youtube link youtube thumbnail gets generated, if it's not youtube link I use some other image. so if img src = youtube thumbnail is not there i want to display img src = some other image instead – mike braa Apr 12 '16 at 02:13
  • You gonna use script ofc (server or client side) but first you need to be clear about what does this mean: post.main_image. Where are you getting this from? – ErTR Apr 12 '16 at 02:14
  • @adeneo sorry it's confusing..not very good with words...I'll add more informations in the question – mike braa Apr 12 '16 at 02:14
  • @mikebraa what is your site? Is it server sided? How and where web users are inserting content? – ErTR Apr 12 '16 at 02:15
  • Use JavaScript or jQuery for that – CanKer Apr 12 '16 at 02:16
  • @ErtürkÖztürk those are on server side...I was wondering if I can simply do if x is not there display y – mike braa Apr 12 '16 at 02:18
  • @CanKerDiAlike how... – mike braa Apr 12 '16 at 02:18
  • `if ( $('img[src="x"]').length === 0 ) $('body').append('')` – adeneo Apr 12 '16 at 02:19
  • @adeneo oh thank you yeah I think that can work – mike braa Apr 12 '16 at 02:20
  • ok I will tell you how to do it and if you think its good my procedure I will post code like answer. First you must save in a variable youtube url and when you receive a new url then you must check if that address contains the string of your variable that contains youtube url, if yes then you can show the image with css properties or jQuery css properties if not contain the youtube url string then you show another image with another id you want. – CanKer Apr 12 '16 at 02:22
  • @CanKerDiAlike ok thank you I was following adeneo's approach – mike braa Apr 12 '16 at 02:23
  • @adeneo hmm I'm not completely sure how I can do it..i tried deleting if/else and putting span around...img src="{{ my_video.thumbnail }}" and used the above js code... .do you mind posting that in the answer? – mike braa Apr 12 '16 at 02:26
  • @CanKerDiAlike I was originally trying to do that..but I didn't alter my views.py(server side code)...can you post how I can do it in the answer – mike braa Apr 12 '16 at 02:28
  • You should do in the client side. Give me 30 minutes while I arrive to my home and will help you. – CanKer Apr 12 '16 at 02:29
  • @CanKerDiAlike hmm not sure how I can do that in the client side...sure I got time thanks for helping me – mike braa Apr 12 '16 at 02:30
  • @CanKerDiAlike I really have no idea how I can do that with javascript...yeah I;ll definitely wait for your help...please let me know when you are avaliable.. – mike braa Apr 12 '16 at 02:36
  • @CanKerDiAlike I'll be here – mike braa Apr 12 '16 at 03:10

1 Answers1

0

You can write javascript in your html file and make a function. Just surround your javascript with script tags like so...

<script>
function show_image(src, width, height, alt, src2, width2, height2, alt2) {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height;
        img.alt = alt;

    document.createElement("otherImg");
        otherImg.src = src2;
        otherImg.width = width2;
        otherImg.heigh = height2;
        otherImg.alt = alt2;

    if(img.src.length === 0){
        document.body.appendChild(img);
    }else{
        document.body.appendChild(img);
        }

Then call the function on something.

<button onclick=
"show_image('foo.png', 
             100, 
             100, 
             'foo',
             'bar.png,
             '100',
             '100',
             'bar',
);">See Image</button> 
QwertyKing
  • 64
  • 2
  • 8