The following code ensures that WP no longer stores the IP address for comments:

<?php 
function wp_no_comments_ip( $comment_author_ip ) { return ''; } add_filter( 'pre_comment_user_ip', 'wp_no_comments_ip' );
?>

The post WordPress davon abhhalten die IP Adresse bei Kommentaren zu speichern appeared first on Tino-Designs.com.

// Fügt die Funktion dem Standard WP Kommentar sowie dem Woocommerce Review Formular hinzu
function add_privacy_field_on_comment_form() {
   $req  = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );
        echo '<div class="comment-form-datenschutz"><input id="datenschutz" class="my-class" name="datenschutz" type="checkbox"' . $aria_req />' .
	'<label class="my-class" for="datenschutz">' . __( 'Mit der Nutzung dieses Formulars erklären Sie sich mit der Speicherung und Verarbeitung Ihrer Daten durch diese Website einverstanden. Des weiteren geben Sie uns die Einwilligung zur Veröffentlichung Ihres Kommentars und akzeptieren unsere <a target="_blank" href="https://www.tino-designs.com/en/datenschutz/">Datenschutzerklärung.</a>' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label></div>';
    }
    add_action( 'comment_form_logged_in_after', 'add_privacy_field_on_comment_form' );
    add_action( 'comment_form_after_fields', 'add_privacy_field_on_comment_form' );


//Prüft ob die Checkbock für den Datenschutz ausgewählt wurde 
add_filter( 'preprocess_comment', 'webshaped_verify_comment_meta_data' );
function webshaped_verify_comment_meta_data( $commentdata ) {
	// Wenn die Checkbox leer ist und ein Gastnutzer schreiben möchte...
	if ( empty( $_POST['datenschutz'] ) ) {
		// ... zeige folgenden Fehlertext an
		wp_die( __( '<strong>FEHLER</strong>: Die Datenschutzbox wurde nicht akzeptiert.<br><br><a href="javascript:history.back()">« Zurück</a>' ) );
	}
	return $commentdata;
}

The post Datenschutz Checkbox für Wordpress Kommentare und Woocommerce Reviews appeared first on Tino-Designs.com.

Google offers the Google Search Console to point out specific metrics that Google believes, should be improved. One of those metrics that come up a lot is called LCP. The largest contentful paint..

LCP-Metriken messen die Renderzeit des größten Bild- oder Textblocks, der im Darstellungsbereich sichtbar ist. Also im Grunde das größte Element „above the fold“. Das ist ziemlich oft ein Bild, besonders bei Blogposts oder anderen inhaltsreichen Seiten.

The issue here is, that wordpress started to lazy load all images of the site in Wordpress 5.4. It is a standard function, which is a great improvement. However in this case it would be better that the first image of the content would not be loaded using lazy load. Espescially if your site displays it abover the content and therefor above the fold.

The reason for this is that images being lazy loaded, are loading quite a bit slower. Therefor the LCP score often is a lot worse than it could. Google's Pagespeed Insights actually suggests not to load the LCP using lazy loading quite often.

Since I had this issue before for several clients I cam up with a simple code hat can be pasted into the functions.php of your Wordpress theme.

//function to get first image in post content area
function get_first_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img[^>]*src="([^"]+)"/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

   //defines a default image if no image was found
    if(empty($first_img)){ 
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

// disable lazy loading for first image inside post content
function no_lazy_load_on_first_image( $value, $image, $context ) {
if ( 'the_content' === $context ) {

//uses above function to check if image is the first image of the content area
$image_url = get_first_image();

if ( false !== strpos( $image, '' . $image_url . '' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'no_lazy_load_on_first_image', 10, 3);

Dieser Code verwendet tatsächlich zwei Funktionen und den WP-Filter „wp_img_tag_add_loading_attr“. Mit diesem Filter können wir ändern, wie Lazy Loading hinzugefügt wird.

The first function finds the first image within the current post content. The second function simply checks if this is the image the filter is currently passing through. If so, false is returned instead of the regular value.

Feel free to improve, correct and comment on the code snippet below.

The post Wie man Lazy Loading beim ersten Bild von jedem Wordpress Beitrag deaktiviert appeared first on Tino-Designs.com.

• Computer or laptop to create the page
• Editor, IDE or WYSIWYG editor
• Basic knowledge of HTML
• Browser
• Server/Hosting with domain
• FTP software

A modern website also consists of several additional components, such as CMS, HTML with CSS, PHP and usually also a database with SQL queries (e.g. MySQL) to make the website interactive.

But I want to concentrate on the absolute basics here in order to make the topic easier to understand and to be able to understand it better in the end.

Computer or laptop to create the page

A simple laptop that can also be used for office applications is sufficient here. Personally, I'd rather work on a big screen and a computer with a bit too much than too little power. This makes the work itself simply easier because the computer does not reach its overload limit so quickly and generally works faster.

Editor, IDE or WYSIWYG editor

Basically, a website is nothing more than a very simple text file with the extension .htm/.html. To edit them, it is sufficient to use a very simple text editor, e.g. Notepad or Editor from Windows. However, editors that also recognize HTML and display their commands formatted accordingly are more suitable for larger work. Atom for example, is very well suited for this.

Then there are the so-called IDEs. IDE stands for Integrated Development Environment., auf Deutsch, Integrierte EntwicklungsumgebungA well-known open source IDE is e.g. NetBeans. These programs are very extensive, support several programming languages and have some features to simplify coding, especially for larger projects.

Then there are the so-called WYSIWYG editors. WYSIWYG stands for, What You See Is What You Get, auf Deutsch, was du siehst ist was du bekommst. These are editors in which you can create a website purely graphically, similar to documents in MS Word or LibreOffice Writer. You don't have to edit the HTML yourself. Sounds great, but in practice it doesn't always work well and reliably for various reasons.

Incidentally, MS Office or other word processing programs are not suitable. You can also save the created documents as HTML files, but the presentation on the web leaves a lot to be desired.

Basic knowledge of HTML

What is then written into the .html file is called HTML, Hyper Text Markup Language. Hypertext AuszeichnungsspracheIf you then open this file in a browser, the elements and tags of HTML are interpreted by the browser, which then displays the contents accordingly.

A very simple basic framework for an HTML file looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Titel der Webseite</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
    <!-- Dies ist ein Kommentar. Kommentare werden im Browser nicht angezeigt. -->
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

You can simply copy this HTML source code and paste it into a simple text file. Then change the file extension to .html and open the whole thing in your browser. Then you see – Hello World! - in your browser. Voilá, this is your first website :).

Browser

The browser is particularly important, because without it you cannot check how the website or changes to the website really look like. Some browsers interpret HTML differently, but those who work with Mozilla Firefox or Google Chrome will have relatively few problems. Web designers and developers usually have a wide range of browsers installed. Microsoft Edge, Firefox, Chrome and Opera are the best known.

In the past there was still Netscape Navigator and the good old Internet Explorer, which very often interpreted HTML incorrectly or simply differently than the other browsers.

Server/Hosting with domain

Ok, so now we have our first little "Hello World!" website. However, how do we get it onto the Internet so that friends and colleagues can also look at it?

For this you need web hosting, offered by a web host. Hosting providers basically do nothing other than rent storage space on their servers. A server is basically nothing more than a computer that is constantly connected to the Internet and of course is also optimized to display websites.

In addition to the storage space for the website (web space), the web hosting provider also gives you a domain under which the storage space on the Internet can be found. This can be your own domain, but if this does not yet exist, you usually get a somewhat more complicated Internet address, e.g. http://myclientid.webhoster.serverxy.com. This Internet address is then entered in the browser and you can see your web space.

Of course, having your own domain is nicer. You get these from the web host in a package or you have to order them separately. The prices vary from approx. $10 to $40 per year, depending on the domain ending, it can sometimes be more.

You then get access data from the web host to log in and upload files from the website to your own web space. This is done with the so-called file transfer protocol.

FTP software

FTP stands for File Transfer Protokoll, auf Deutsch, Dateiübertragungsprotokoll and is an interface to transfer files from your own computer to a server connected to the Internet.

The web host gives you access data for this. You enter this in the FTP program and then you get a file overview similar to that on your own hard drive in Explorer. Only the overview is now not your own hard drive but that of the web space.

By default, most FTP programs show your computer on the left and the server on the right. Files can now be easily stored on the server, overwritten or downloaded by double-clicking or dragging and dropping with the mouse.

The currently best-known FTP program is FileZilla. It's open source, free, and receives regular updates.

As soon as you have uploaded the files from the local computer to the server via FTP, they can also be accessed under your own domain or the Internet address provided by the hoster. Your first website is online :).

Important: The first HTML file that is called up in a folder or the domain of the website is almost always, unless otherwise configured on the server, the file with the name index.html. This means that if you create a website, the file name of the homepage of the website must be index.html.

Wenn euch die kleine Einführung gefallen hat, dann lasst doch einen Kommentar da. Ich würde mich freuen

The post Was wird benötigt um eine Webseite zu erstellen? appeared first on Tino-Designs.com.

Everyone knows Photoshop, at least the term. Adobe, the company behind the image editing software, set the standard in the industry decades ago. What was originally developed for image and photo editing is now much more and serves as an absolutely indispensable tool for photographers, graphic designers, printers, digital artists, web designers and more. The scope, the possibilities of and with Photoshop are now felt to be limitless when it comes to images and graphics. That has its price. What used to be possible to purchase in the 4-digit range with a one-off payment is now only available as a subscription. The costs are due every month, even for the small entrepreneur or hobby artist who may only use the program 1 or 2 times a month.

obsolete

There are alternatives. Well, let's say they exist, just not nearly with the possibilities and functions that Photoshop offers. There are only a limited number of real alternatives, and there are even fewer free ones. None really, that's what I still thought a few years ago.

Yet, I would like to introduce you to software that comes very close and is also worth considering for professionals. I've been observing the software for a few years now and the development hasn't disappointed me, on the contrary. I'm thrilled and almost exclusively use this free open source program for my graphics and image work. In addition to my ancient version of Photoshop (CS 1, version number 8.0, from 2003), which I now know so well and still does what it is supposed to do, that I can work with it the fastest in many things.

However, the almost 20-year-old software application has simply become obsolete in some areas and for cost reasons, as well as my belief in open source software, I never upgraded. I have to say that it was completely sufficient for me as a web designer and graphic artist, at least until two or three years ago, when I started looking for an alternative. The original was simply too expensive, and I'm not a fan of subscriptions at all because of the running costs. Especially not when Photoshop is not my main tool as a web designer.

alternatives

So a good alternative was needed. I didn't find anything at first. at least nothing that runs really stable, is built somewhat similar to Photoshop, so that I don't need a training phase of several months and costs nothing or is at least affordable.

GIMP was known, is relatively stable, but from my point of view it simply works differently than Photoshop and takes a lot of getting used to. Then there were a few affordable alternatives, but again I was always bothered by a missing feature or the fact that it's only available on MAC or only runs on Windows. Linux? Wasn't even mentioned, even if Linux now not only dominates the web server market.

every beginning is difficult

One program struck me though and I tested it. Unsuccessfully. What is now almost my only program for printing, image and graphics editing was so unstable a few years ago that I didn't dare to create something professional in it. It just kept crashing, getting stuck, or being so damn slow that normal usage just wasn't possible. I often sat there and just wished I could use the features without any problems. They exceeded what my old Photoshop could do years ago.

Well that was a few years ago. And the program with the then version number 3.+ has grown up and become stable with version 4.+ at the latest. Very stable. The development team does a great job creating open source software, with features that are partly even copied by Adobe and built into Photoshop. Version 5.+ has now been released.

Krita gets the nod

May I introduce. Krita, the professional and free open source painting program.

Admittedly, it's not a copy of Photoshop and some of the tools work differently and the shortcuts are assigned differently as well. Does that make it a bad alternative? Far from it!

different origin

Krita comes from the field of digital painting and digital art. In the meantime, however, it has a range of functions in the areas of illustration, image processing and print media that are completely sufficient for using this program professionally.

Meanwhile, Photoshop originally comes from the field of image editing. But every graphic designer and digital artist knows that Photoshop is the undisputed number one for these areas as well. Digital drawings and manual renderings are commonplace in Photoshop, even though the program was originally designed for image editing.

top developers

The situation is similar with Krita and image processing. I was very pleased when the program from version 4.+ finally started without any problems and all features could be used without any problems. Not without reason. The Krita development team released 14 releases from 2020 to the end of 2021 alone. There are endless bug fixes in every release. The stability of the software on all three major operating systems (Windows, Macintosh and Linux) was, and still is, the top priority.

There are also new features, some of which are very innovative. The range of functions exceeds my old Photoshop by far. Admittedly, a program from 2003 is simply outdated and the new Photoshop is probably still far better in many respects. But in every aspect? No way. Anyone who likes to draw with the stylus pen will be impressed by the possibilities and brushes in Krita. Are there image editing tools and filters? Countless. Even PSD files can be opened and edited. Although the compatibility here is not always 100%, Krita goes the way for open systems and file types instead of trying to position its own format (.kra) as a standard in digital art. After all, it is an open source application that will be further developed with donations. As much transparency as possible, which will result in more advantages in the long run, that is the philosophy here.

conclusion

If you are looking for a free Photoshop alternative, you are willing to schedule a bit time to learn and do not need a Photoshop clone. You are very very well served with Krita.

Even if you are an artist, photographer or designer and you miss one or the other feature in Photoshop, or want to try out an additional tool with more options, KRITA is the right app for you.

The software is available for free at krita.org for Mac, Windows and Linux.

The post Echte kostenlose Alternative zu Photoshop appeared first on Tino-Designs.com.

It is based on W3.css and can be freely used. The image can be easily replaced, therefore it will match almost any other design or website.

Live Preview | Download (zip)

The post Full Cover, responsives HTML Template appeared first on Tino-Designs.com.

Have fun using it, I would be happy to receive a comment.
For commercial use, please contact me.

Thank you, I'm curious if you like them and which one is your favorite. It's the dark one for me right now.

The post Linux (Ubuntu) Wallpaper appeared first on Tino-Designs.com.