Posts by gentlemedia

I'm not sure why it returns Array, because as far as I know I don't retrieve the profile images from an array. See the following function.

        function getTeam() {

            global $post;
            $team = new WP_Query();
            $team->query('post_type=coaches');

            if ($team->found_posts > 0) {
                echo '<ul>';
                    while ($team->have_posts()) {
                        $team->the_post();
                        $listTeam = '<li>';
                        $listTeam .= '<a href="#" class="js-modal">';
                        $listTeam .= '<figure class="profile-img">';
                        $listTeam .= '<img src="' . get_field('profile-image') . '" alt="">';
                        $listTeam .= '<figcaption><span>Bekijk profiel</span></figcaption>';
                        $listTeam .= '</figure>';
                        $listTeam .= '</a>';
                        $listTeam .= '<p>' . get_field('biography') . '</p>';
                        $listTeam .= '</li>';
                        echo $listTeam;
                    }
                echo '</ul>';
                wp_reset_postdata();
            } else {
                echo '<p>No team members found</p>';
            }

        }

I've googled and found only two similar questions and in one of them a poster said by default images are returned as an array

So I added two variables and tried to retrieve the image like this:

$image = get_field('profile-image');
$profileImage = $image['url'];

$listTeam .= '<img src="' . $profileImage . '" alt="">';

But then I also get an empty value like this img src="" alt="" /> in my HTML.

For the rest I checked if the paths are right and they are and I don't get any errors. Thus... I'm a bit stuck here :)

And perhaps it's a better idea to ask this at the Arduino forum to get a quicker answer, because I really had to google what Arduino was :)
https://forum.arduino.cc/

The article alignment does not change yet.

You mean the dates right? They are aligned at the top of the the td now on my screen.

Ok 'solved' again, but this time for real :)

Cereal you've pointed me in the right direction, because I had to do it like this:

if (get_field('url')) {

    $listTestimonial .= '<a href="' . get_field('url') . '">' . get_field('name') . ' - ' . get_field('company-agency') . '</a>';

} else {

    $listTestimonial .= '<span>' . get_field('name') . ' - ' . get_field('company-agency') . '</span>';

}

It was as simple as that... after all :)

Ok 'unsolved' again :)

Thanks Cereal, but I had no luck with that. I tried it like this, but even the post that has an url field filled in gets wrapped in a span.

$url = get_field('url');

if (FALSE === $url) {
    $listTestimonial .= '<span>' . get_field('name') . ' - ' . get_field('company-agency') . '</span>';
} else {
    $listTestimonial .= '<a href="' . get_field('url') . '">' . get_field('name') . ' - ' . get_field('company-agency') . '</a>';
}

I've marked it as "solved', but it's not !
PHP/MySQL... it's just not for me.
The more I read about it, the more confused I get, so I will keep on outsourcing this stuff :)

I've found the table and 2 rows for that url (custom) field, but that's about it :) How do I check if an url field is empty on a custom post type testimonial page with this MySQL info.

meta_id post_id meta_key    meta_value
183     51      url
184     51      _url        field_5894f906149a5

I've digged a bit further and I think I should do something like this:

$url = mysql_result($result,$i,"url");

if (empty($url)) {
    $listTestimonial .= '<span>' . get_field('name') . ' - ' . get_field('company-agency') . '</span>';
} else {
    $listTestimonial .= '<a href="' . get_field('url') . '">' . get_field('name') . ' - ' . get_field('company-agency') . '</a>';
}

But I still don't know how to get the right table entry/id from that url field in MySQL

Ok... back to my PHP/Wordpress adventure.

In my testimonials post type I have added 5 custom fields and 2 fields are not mandatory which means they can be empty.
One of them is the url field which I want to output within my while loop with a different HTML when it's empty (wrap it in a span tag instead of an an a tag), but I'm not sure exactly how to do this. I did a google search and found possible answers, but I want to know if I'm on the righ track with this or not.

I was thinking of something like this:

        function getTestimonials($numberOfTestimonials) {

            global $post;
            $testimonials = new WP_Query();
            $testimonials->query('post_type=testimonials&posts_per_page=' . $numberOfTestimonials );
            $url = 0;

            if ($testimonials->found_posts > 0) {
                echo '<div class="slider">';
                    echo '<ul>';
                        while ($testimonials->have_posts()) {
                            $testimonials->the_post();
                            $listTestimonial = '<li>';
                            $listTestimonial .= '<h2>' . get_field('workshop') . '</h2>';
                            $listTestimonial .= '<blockquote>';
                            $listTestimonial .= '<p>' . get_field('testimonial') . '</p>';
                            $listTestimonial .= '<footer>';
                            $listTestimonial .= '<cite>';
                            if (empty($url)) {
                                $listTestimonial .= '<span>' . get_field('name') . ' - ' . get_field('company-agency') . '</span>';
                            } else {
                                $listTestimonial .= '<a href="' . get_field('url') . '">' . get_field('name') . ' - ' . get_field('company-agency') . '</a>';
                            }
                            $listTestimonial .= '</cite>';
                            $listTestimonial .= '</footer>';
                            $listTestimonial .= '</blockquote>';
                            $listTestimonial .= '</li>';
                            echo $listTestimonial;
                        }
                    echo '</ul>';
                echo '</div>';
                wp_reset_postdata();
            } else {
                echo '<p>No testimonial found</p>';
            }

        }

Where do I check if the url field is empty? Probably in my database, but how (MySQL... I never go there …

You're right! I was messing up between the two. I've used a plugin for creating custom fields in my custom post types, but choosed the wrong one to retrieve them at the front. They're indeed variables so I should've used get_field()
https://www.advancedcustomfields.com/resources/code-examples/

Thanks a bunch, diafol!

oh... shit. My upvote smiley didn't go well, diafol :)

No, I'm getting two records, but still the text not inside the appropriate HTML tags like you showed me now and how I got it in the first place..

Thanks, diafol! The reason I took the route of custom widgets is becaiuse i chose to build ontop of a naked wordpress theme and to use a wp page builder plugin for my grid.
PHP or any programming language is not really my thing.... I'm too much a designer for that :) Secondly I want my client to easily change settings via those widgets.

BUT.... while I was playing with this for the last days I came to the conclusion that creating your own WP template pages is actually not really a big deal, so I will definately start next time with creating my own.
.
For now the only things is how to display those widgets at the front. I've changed my while loop in that widget class by starting with an empty string, but unfortunately that didn't do the trick, so if you have any other suggestions... please :)

Okay, I couldn't help it to play around with it myself :)
It's pretty much only adding/removing a class .fixed on a scroll event to #forum-list and the rest gets handled with CSS.

http://codepen.io/gentlemedia/pen/pRKpdJ

By the way, I've checked if I had any errors in my functions.php with http://phpcodechecker.com/, but that tool said I'm all good.... no issues found.

That's as designed.

I don't find it a good solution, Dani. It really messes up with links and buttons that are at the top. Even the menu from this editor is sometimes at the top and therefore underneath your hidden navigation menu, because I scrolled up too much. I have to scroll down a bit so that I can click on the editors menu again. Also try to click on the fixed positioned social media share buttons of this page the menu appears which makes it difficult to click on those buttons.

The navigation menu is meant to be seen when you're all the way scrolled up to the top of the page, or when you move your mouse cursor towards the top to interact with it.

I understand your reasoning why you did it and I fully agree with that, but the functionality has to change imo into something like show that menu when user scrolls up a bit and not while hovering with the cursor on the top area.

if you want help with that for some reason, just let me know :)
I've implemented a 'show header on scroll up' functionality before based on Jquery, so I have that lying around here.

Davy, why aren't you listening to Diafol?

HTML elements have default styling also named browser defaults (placed in user agent stylesheets) and they're according to the spec.
https://www.w3.org/TR/CSS2/sample.html

That said... the browser defaults of tbodyare shown below.

thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

And this is what you see. Your dates are vertically aligned in the middle of the td The td is placed inside a tbody(even if you didn't do that, the browser does that for you) and as you see above, the td inherits the vertical-align: middle from tbody.
Do you want them at the top of the td, then you override the default styling of tbody in your own sylesheet (not the tinyMC stylesheet... this has nothing to do with it) to vertical-align: top;

So like this:

tbody { vertical-align: top }

Ah... my mistake...that it displayed only one testimonials and not the two was just because I forgot to select the amount to display. It was still on '1'. It was a long day yesterday :)

Now it's only figuring out how to construct the HTML of the testimonial with PHP.

Aight folks!

So I'm trying to do some custom coding within Wordpress and my plan is to create custom post types which I want to display within custom widgets. I thought that would be fun for a learning experience.... ahum... and I wanted a widget/plugin that outputs some proper semantic mark-up. Anyway I got pretty far, but now I ran into the biggest hurdle so far .

One of the widgets I'm trying to make is a slider (from unslider) which I use for testimonials and I have the following HTML which I'm trying to create dynamically with PHP.

<div class="slider">

    <ul>

        <li>

            <div class="description">

                <h2>Name of the workshop</h2>

            </div>

            <blockquote>

                <p>Mus a lectus phasellus leo ullamcorper vestibulum id egestas nulla pharetra a purus parturient platea posuere natoque magna etiam aptent libero fames.</p>

                <footer>

                    <cite><a href="http://www.example.com/renee">Renee - Example Company</a></cite>

                </footer>

            </blockquote>

        </li>
        <li>

            <div class="description">

                <h2>Name of the workshop</h2>

            </div>

            <blockquote>

                <p>Nunc a orci quam a duis tincidunt quis vestibulum venenatis eu vestibulum scelerisque quis porttitor a vel fringilla at duis.</p>

                <footer>

                    <cite><a href="http://www.example.com/amy">Amy - Example Company</a></cite>

                </footer>

            </blockquote>

        </li>

    </ul>

</div>

I have these 2 sample testimonials in the database (via custom post type; testimonials) and with the following script It outputs only the first testimonial (unfortuantely) and the HTML mark-up is way off :( Okay I admit I scraped this script together from some tutorials and tried to bend it to my needs, but it kindof works :)

The widget class in my functions.php:

    /*-----------------------------------------------------------------------------------*/
    /* Custom …

My favorite series at the moment in no particular order:

• Better Call Saul
• Stranger Things
• The Night Of
• Ray Donovan
• Daredevil
• Silicon Valley

And of course Game of Thrones and my all time favorite Breaking Bad.

I also kinda liked Dexter, but the final episode was very disapointing. It was like they didn't know how to end it well, which resulted in a very disapointing one. :)

Yeah I understood the behavior is made by design and is not a bug. Nonetheless it can be annoying when a user wants to perform an action at the top of the page... well it was a bit for me :)

Regarding the new navigation menu when I want to click a link/button that's at the top of the page I can't, because the navigation appears. You use opacity: 0 and on hover you set the opacity to 1 so that it appears.

Perhaps it's a suggestion to show that navigation menu when user scrolls up like Medium does?
http://wicky.nillia.ms/headroom.js/

Good stuff!

I've used @keyframes for fading objects in/out. I'm not sure what it is doing here, but it works!

It seems that old Android needs a useless animation on the body tag for it to work :)

It's just a name picked by that Tim of the pen :) It could be any name. It's the animation-name which you would refer to in the @keyframes

You use the checkbox hack and what I know is that pseudo-class + general (+) / adjacent (~) sibling combinators doesn't work on Android below 4.1.2. but there is a solution for that.

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

I've used this hack in the past as well, but credits goes to Tim Pietrusky

why not let a robot do this?
http://codebeautify.org/css-beautify-minify for example and move on to the next thing.

But you still have to copy/paste back & forth :)
Setting this uo with a task runner like Grunt or Gulp is better, so that this is done automatically for you (on the background) if you deploy your CSS to the live server.

The non critical CSS way has nothing to do with what space you leave in elements.

Yeah, obiviously I wasn't reading the question good enough, I read 'removing whitspace' and I assumed Dani was minifying and optimizing her CSS :)

Nonetheless I agree with you that it's quite obvious that there needs to be more space between at least you clickable/tappable elements on touch screens.

Regartding the showing as much as possible or all that important content above the fold... I think it's not a big thing anymore (unless you talk with marketeers, that want to push their ads above your content). People are now used to scroll thanks to Twitter, Facebook, etc. and story telling layouts or pages that are laid out following the AIDA model are common tactics for long pages as well.

It's always good to tightening up your assets. You can also automate this (minifying, concatenation and such) with a task runner like Grunt or Gulp before you deploy to a live server.

These days people recommend to load your critical CSS (the CSS that's needed for your content above the 'fold') inline (between style tags in the head) for each page/template. But like you said where that 'fold' is nowadays with all the different screen resolutions out there, is a bit blurry :)

Depending on the browsers you target there is also prefetching, preloading and prebrowsing, but then you could use loadCSS as fallback.

You have this <?phpinclude 'includes/header.php'/?> which should be this <?php include 'includes/header.php'; ?>

I don't see the webfont code in the code ?

Indeed! Because it's not in this pen (anymore). I guess you took it out already.

Second can't the armature1 code be placed in a loop ?

I don't know either :) Perhaps someone else.

What is the problem?

Yes, I'm also curious what the problem is. I use Thunderbird too, but I didn't notice any 'problems'.

Are you aware if CodePen has incremental save so I can rever to a previous saved pen of the same session ?

I've googled a bit for you, but it seems you're out of luck. You should've forked your first pen.

Is that the only way? And the fastest way is to code it with bootstrap?

I remember from previous threads that when you even use Bootstrap to create responsive layouts it took you ages, so I'd recommend that you use a premade responsive (Bootstrap) theme/template and change the text & images with your own and don't touch any HTML & CSS of that template. I believe this is the fastest way for you.

I'm wondering why I'm no longer seeing anything swing ?

Because in the second pen you left everything out in the js that made it swing. All the shape drawing and animating stuff. What you kept in there was the part that was actually not needed and could be left out :)

Cek this out: http://gsa-constructionspecialist.com/experiences

Wow! Those colours! ¯_(ツ)_/¯

Wow :) The js that I posted here in the thread was some js that I REMOVED from the js in that first codepen of yours. You wanted to reduce the js, so that's what i did. I didn't make any adjustments, I just removed those lines to see if the bloody thing kept on swinging :). And it did!

The code adjustments you posted, don't work; as Js ?

Not sure what you mean with this, but I didn't make any adjustments. I just deleted those webfont functions from the js in that codepen and it kept on swinging, so I assumed those are not needed.

I checked on my Mac in Chrome and the slider just works. Perhaps they have some JS from a Chrome extension they've installed that's interfering with your JS.

This code is great and works when i visit the link on my phone too, but i copy and paste it on my server and doesn't work?

Did you include the jQuery library on your page?

Also be cautious when using Navigator.getUserMedia(). It could be deprecated in the furure and it's recommended to use MediaDevices.getUserMedia() instead.
https://developer.mozilla.org/en/docs/Web/API/Navigator/getUserMedia

Are they making authorising system ?

No, I mean the W3C is working on a standard/recommendation for this. The HTML5 Device and Sensors API.

So for example user want to register on my site, he fill up the form and pressing the register button, the phone camera opens automaticly

You can't control the camera of your users phones yet unless you create something with PhoneGap or the likes, so that your website becomes a hybrid app.

You'll need a wrapper with something like PhoneGap or Cordova. You can't do this yet at the moment with HTML5. They're still workiong on a HTML5 device API. https://www.w3.org/2009/dap/
https://www.w3.org/TR/image-capture/

Sorry, but I don't know anything about Adobe Animator.

You probably don't need this webfont stuff. I've deleted thiose lines and it keeps on swinging :)

lib.webFontTxtInst = {}; 
var loadedTypekitCount = 0;
var loadedGoogleCount = 0;
var gFontsUpdateCacheList = [];
var tFontsUpdateCacheList = [];
lib.ssMetadata = [];

lib.updateListCache = function (cacheList) {        
    for(var i = 0; i < cacheList.length; i++) {     
        if(cacheList[i].cacheCanvas)        
            cacheList[i].updateCache();     
    }       
};      

lib.addElementsToCache = function (textInst, cacheList) {       
    var cur = textInst;     
    while(cur != exportRoot) {      
        if(cacheList.indexOf(cur) != -1)        
            break;      
        cur = cur.parent;       
    }       
    if(cur != exportRoot) {     
        var cur2 = textInst;        
        var index = cacheList.indexOf(cur);     
        while(cur2 != cur) {        
            cacheList.splice(index, 0, cur2);       
            cur2 = cur2.parent;     
            index++;        
        }       
    }       
    else {      
        cur = textInst;     
        while(cur != exportRoot) {      
            cacheList.push(cur);        
            cur = cur.parent;       
        }       
    }       
};      

lib.gfontAvailable = function(family, totalGoogleCount) {       
    lib.properties.webfonts[family] = true;     
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];       
    for(var f = 0; f < txtInst.length; ++f)     
        lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList);      

    loadedGoogleCount++;        
    if(loadedGoogleCount == totalGoogleCount) {     
        lib.updateListCache(gFontsUpdateCacheList);     
    }       
};      

lib.tfontAvailable = function(family, totalTypekitCount) {      
    lib.properties.webfonts[family] = true;     
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || [];       
    for(var f = 0; f < txtInst.length; ++f)     
        lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList);      

    loadedTypekitCount++;       
    if(loadedTypekitCount == totalTypekitCount) {       
        lib.updateListCache(tFontsUpdateCacheList);     
    }       
};
// symbols:

Nobody ever made or makes a <list> <ul> <li> menu not even in HTML4, but I guess you meant <nav> <ul> <li>. There is coming a <menu> <menuitem> but probably in HTML6... hehe

Sorry I don't have time to look at it now, but you could use the data attribute as well for your jQuery something like this:

var $default = $('.default').html();

$('li[data-lang]').on('mouseenter', function () {
  $('.default').html($(this).data(lang));
}).on('mouseleave', function () {
  $('.default').html($default)
});

Untested, but perhaps you can figure it out for yourself with this or someone else could chime in from here.

There is a pure css solution if you use custom data-attributes.

HTML:

<ul>
  <li lang="es" data-lang="Nuestros jugadores representan una variedad de fondos, países e idiomas.">Español</li>
  <li lang="zh" data-lang="我們的球員代表了各種背景，國家和語言。">中文</li>
</ul>

CSS:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li[data-lang] {
  margin-bottom: .5rem;;
  cursor: pointer;
}

li[data-lang]:hover::after {
  content: " " attr(data-lang);
  cursor: default;
}

Little demo: http://codepen.io/gentlemedia/pen/rjWBKB

EDIT:
I just see your second post now and see also that you wanted something else :) In that case you'll need indeed javascript, but that can be indeed much cleaner and efficient then you have now. Will have a look when I have some more time then now.

It's also possible with GASP, but you'll need a Club GreenSock membership for that.
https://greensock.com/drawSVG

And if it is only linedrawing what you want to do then you can also use something like Vivus.
https://maxwellito.github.io/vivus/

If you want to create some animations on the SVG then I agree with Ryantroop. Why not just do it directly on the SVG instead of get it into canvas so you could use paper.js for no real reason? It's just adding another layer of complexity.

GSAP or KUTE.js are both great for adding complex animations to SVG's.

Not sure either, but is there any specific reason you want to load an svg in canvas? I mean canvas is also for vector graphics which you can specifically modify through scripting and as far as I see you can only load an svg in canvas as an image and not as data/code.
Although you can convert your svg into a canvas javascript function with a tool like this http://www.professorcloud.com/svg-to-canvas/ and then you can manipulate/modify it with javascript.

When working with Canvas within the <canvas></canvas> tags if, using the link I posted earlier I would place the group id <g id="Artwork_11"> within a canvas

Why would you want to add svg's to canvas? Adding svg's to canvas is not just hard coding your svg within canvas tags. That's not how you would go about that. You can load an svg image into canvas with javascript and there are several ways to do that.

https://github.com/canvg/canvg

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

http://getcontext.net/read/svg-images-on-a-html5-canvas