1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Add anchor tag with href to each image

Discussion in 'JavaScript' started by Webinator, Aug 3, 2015.

  1. #1
    Hi everyone,

    I have this code :
    
    <?php $member_ID = $ut_global_member_count; foreach ( $team as $key => $member ) : $clear = ''; ?>
    <div class="member-box ut-member-style-3 <?php echo $ut_member_box_size; ?> <?php echo $grid[$ut_member_in_row]['class']; ?>">           
                        <?php $avatar_style = 'ut-square'; ?>
                        <?php //$avatar_style = $member['ut_avatar_style']; ?>
                        <div class="mp-holder">
                        <?php if(!empty( $member['ut_member_pic'] )) : ?>
                       
     <figure class="member-photo-style-3">
                        <?php if( $avatar_style == 'ut-circle' ) {
                          $member['ut_member_pic'] = ut_resize( $member['ut_member_pic'] , '560' ,                         '560', true , true , true );                       
                                       
                                    } else {
                                       
                                        $member['ut_member_pic'] = ut_resize( $member['ut_member_pic'] , '560' , '420', true , true , true );
                                   
                                    } ?>
                                   
                                    <img class="utlazy" src="<?php echo THEME_WEB_ROOT; ?>/images/placeholder/team-member.png" alt="<?php echo $member['ut_member_name']; ?>" data-original="<?php echo $member['ut_member_pic']; ?>">
    
                                 </figure>
    PHP:


    that dynamically displays three images in the page.
    I want to add a specific link to each image, so I thought javascript was the best option.
    BUT if i'm not wrong the only difference between each image is the alt attribute and the data-original attribute, so here's what I've tried without success:
    
    <script type="text/javascript">
                                    var wrap = document.getElementByClassName("utlazy");
                                    var myattr = wrap.getAttribute("alt");
                                    var aTag = document.createElement('a');
    
                                    if (myattr='TheAltName') {
                                    aTag.setAttribute('href',"TheLinkIwantToAdd");
                                    myattr.appendChild(aTag);  
                                    }
                                    </script>
    Code (JavaScript):
    Does anybody have some suggestion?
    Thanks
     
    Solved! View solution.
    Webinator, Aug 3, 2015 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    There's no reason to add this with JavaScript. Just add a logical test in the loop which generates a variable based on a test and outputs that value to the link. Something like this would work.
    <?php $member_ID = $ut_global_member_count; foreach ( $team as $key => $member ) : $clear = ''; ?>
    <div class="member-box ut-member-style-3 <?php echo $ut_member_box_size; ?> <?php echo $grid[$ut_member_in_row]['class']; ?>">         
        <?php $avatar_style = 'ut-square'; ?>
        <?php //$avatar_style = $member['ut_avatar_style']; ?>
        <div class="mp-holder">
            <?php if(!empty( $member['ut_member_pic'] )) : ?>        
            <figure class="member-photo-style-3">
                <?php
                $link = '#'; // default value if not catched
                if( $avatar_style == 'ut-circle' ) {
                    $member['ut_member_pic'] = ut_resize( $member['ut_member_pic'] , '560' ,                         '560', true , true , true );
                    $link = 'first-value';
                } else {
                    $member['ut_member_pic'] = ut_resize( $member['ut_member_pic'] , '560' , '420', true , true , true );
                    $link = 'second value';
                }
                ?>
                <a href="<?=$link;?>"><img class="utlazy" src="<?php echo THEME_WEB_ROOT; ?>/images/placeholder/team-member.png" alt="<?php echo $member['ut_member_name']; ?>" data-original="<?php echo $member['ut_member_pic']; ?>"></a>
            </figure>
            <?php endif; ?>
        </div>
    </div>
    PHP:
    Hope it helps. Also I added the closing endif and divs so the code would actually run.
     
    HuggyStudios, Aug 4, 2015 IP
  3. Webinator

    Webinator Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks!!
    Almost!!! :)
    I do apologize if I didn't get the solution but;
    what if I want to add a specific link FOR each of the images dynamically generated?

    Example:
    For the image1 I want this link : myDomain.com/image1
    For the image2 I want this link : myDomain.com/image2
    For the image3 I want this link : myDomain.com/image3

    (btw...as you may have already noticed is Wordpress)
    Thanks in advance!!
     
    Webinator, Aug 4, 2015 IP
  4. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #4
    Where do the images from from? Can you show me the data you are working with?
     
    HuggyStudios, Aug 4, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Uhg, that code makes me want to punch someone in the face... Endless opening and closing of PHP for nothing, scripttardery for nothing, what the devil makes an avatar a mathematical figure (speaking of HTML 5-tardery that is so isolated in legitimate meaning as to be as useful as <address> has been the past two decades), stupid malfing data- attributes... much less the endless classes reeking of whatever steaming CSS framework is in use needing to be kicked to the curb.

    Huggy's rewrite isn't much better. I'd have to see live what the devil it's trying to do, but a guesstimate on my part would leave 80%+ of that code on the cutting room floor.
     
    deathshadow, Aug 5, 2015 IP
  6. Webinator

    Webinator Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Just an update for those that are following this thread.
    I wrote in pvt all the confidential infos to HuggyStudios and to Deathshadow, in order let them understand better my problem, if we'll find a solution it will be posted here.
     
    Webinator, Aug 5, 2015 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Ok, you see this value:
    $member['ut_member_pic']

    The one being sent to UT_RESIZE? Plug it in as the anchors HREF. That's the original image.

    Without changing the markup significantly, this is how I'd have coded that section:
    <?php
    	$member_ID = $ut_global_member_count;
    	$avatar_style_override = 'ut-square'; // set to false to use $member value
    	// NOT that style should be set from the bloody member values
    	foreach ( $team as $key => $member ) {
    		echo '
    			<div class="member-box ut-member-style-3 ', $ut_member_box_size, ' ', $grid[$ut_member_in_row]['class'], '">           
    				<div class="mp-holder">';
    				
    		if (!empty( $member['ut_member_pic'] )) {
    			echo '
    					<figure class="member-photo-style-3">
    						<img
    							src="', ut_resize( $member['ut_member_pic'] , 560 , (
    								($avatar_style_override || $member['ut_avatar_style']) == 'ut-circle' ? 560 : 420
    							), true , true , true ), '"
    							alt="', $member['ut_member_name'], '"
    						>
    					</figure>';
    Code (markup):
    Naturally everything that follows would also have to have an axe swung at the garbage hard to follow pointless willy nilly opening and closing of PHP for no good reason.

    WARNING, I'm about to be BRUTALLY FRANK with you -- Really none of that markup is worth a flying purple fish -- looking at what you have on the actual page and what's actually needed to do what's done, for the "our team" heading, the paragraph that follows, and the three image areas with their corresponding content, you are wasting 22k of markup on doing 2k's job on the output.

    MOST of that can be blamed on a mix of turdpress, jquery scripttardery (like that lazy load asshattery), and whatever goofy CSS framework you are using -- though even more of it is on whatever goofy editor or formatting style is in use. Stripping trailing blanks and converting leading spaces to tabs ALONE takes it from 22k to 12k... and really that's 2k of markup's job!

    On the whole I'd suggest pitching that entire layout, site concept and codebase in the trash, it's a laundry list of how not to build a page from the illegible colour contrasts, fixed metric fonts, and endless pointless code bloat. The entire page you linked me to via PM is wasting 102k of markup on delivering 2.42k of plaintext and maybe a dozen content images -- that's as much as TEN TIMES the HTML alone that should be used. You mix in the accessibility failings (design reeks of "WCAG, what's that?!?), 540k of scripttardery in TWENTY SEVEN SEPARATE FILES, much less the outright insane and ignorant 332k of CSS in 18 separate files, and there is NO way I would EVER allow such a site to be deployed if I had a say in it. You're wasting 4.1 megabytes in 64 separate files (say hello to 20 seconds to a minute in handshaking ALONE added to the firstload) to do the job of maybe 1 megabyte (80 to 90% of that being the content images) in maybe 18 to 20 files.

    Sadly, entirely what I expect when I see turdpress, jquery, and the telltales of some rubbish CSS framework and/or grid type thinking. It's one of those "if you don't know what's wrong with this:"

     <div id="member_2" class="ut-modal-box ut-modal-box-effect" data-id="our-team">
            
                <div class="member-detail-box grid-parent grid-100 mobile-grid-100 tablet-grid-100 section-content">
                    
                    <div class="grid-70 prefix-15 tablet-grid-100 mobile-grid-100 add-bottom">
    Code (markup):
    You probably shouldn't be writing code for websites, much less deploying them.

    Sorry if that sounds harsh, but the miserable steaming pile of failure that is -- I pity anyone who'd deploy that as a real website. I'd nuke the site from orbit, it's the only way to be sure! From concept to design to implementation, the level of ignorance shown at every stage is just begging for it to be a unmitigated disaster.
     
    deathshadow, Aug 5, 2015 IP
  8. Webinator

    Webinator Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    :) I had no doubts..really!! I had the pleasure the read your opinions in general and also about web design..well, actually it's more than an opinion,it's just the truth.
    One day ...hopefully quite soon (one year may be)..I will be able to take this rubbish, clean it up, and give to the client the layout he chosen from wpthemes market, with one css file, one js file, one damned class per Div and so on....
    Ok BACK to the topic! ....no wait ...about the color contrast, The Home, isn't it? Yeah..blame on me.. I've to change it!! It's horrible!

    Ok BACK to the topic!
    So I've probably misunderstood something, I've tried to swap the code you suggested but unfortunately nothing was working ( even if I add the missing } and the missing ?> )
    Everything disappeared from the page except from the home page.


    What do you mean? Where I can plug my three different URLs?
     
    Webinator, Aug 5, 2015 IP
  9. #9
    Alright, lemme do that without changing the existing logic code since getting all the } and ?> right can be a PITA - without the rest of the code around it too much is probably lost in translation.

    This SHOULD (if I'm reading it right) be a 1:1 drop-in replacement for the code from your original post.

    <?php
    	$member_ID = $ut_global_member_count;
    	foreach ( $team as $key => $member ) :
    	$clear = '';
    ?>
    	<div class="member-box ut-member-style-3 <?php echo $ut_member_box_size; ?> <?php echo $grid[$ut_member_in_row]['class']; ?>">           
    	<?php $avatar_style = 'ut-square'; ?>
    	<?php //$avatar_style = $member['ut_avatar_style']; ?>
    	<div class="mp-holder">
    	<?php if(!empty( $member['ut_member_pic'] )) : ?>
    
    		<figure class="member-photo-style-3">
    			<a href="<?php echo $member['ut_member_pic']; ?>">
    				<img
    					class="utlazy"
    					src="<?php echo THEME_WEB_ROOT; ?>/images/placeholder/team-member.png"
    					alt="<?php echo $member['ut_member_name']; ?>"
    					data-original="<?php echo ut_resize( $member['ut_member_pic'] , 560 , (
    						$avatar_style == 'ut-circle' ? 560 : 420
    					), true , true , true); ?>"
    				>
    			</a>
    		</figure>
    Code (markup):
    Again, I'm assuming that before it's run through ut_resize that $member['ut_member_pic'] is a full URL to the proper image... That SHOULD do the trick for you... though as mentioned the whole php should be rewritten as that could be a LOT cleaner.
     
    deathshadow, Aug 5, 2015 IP
  10. Webinator

    Webinator Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Yes this is working, thanks a lot Deathshadow!
    The $member['ut_member_pic'] value is the original picture absolute path with (_blank).
    Now I have to find the way to replace the picture absolute path and assign different link to each of the three picture :
    Example:
    picture 1 = must have google.com
    picture 2 = must have yahoo.com
    picture 1 = must have wikipedia.org
    I think another loop should work but I'm not sure.
     
    Webinator, Aug 7, 2015 IP