Free PHPFree PHP scripts classes and info

Images and WordPress

My new WordPress project has multiple photographs per post and as I wanted them to work in an efficient manner for multiple screen resolutions. The secret to this is the srcset and sizes attributes on the img tag.

It turns out that WordPress will create multiple sized thumbnails when you upload an image. It will also add the srcset and sizes attributes into your img tags for you if your image tag has a class of wp‑image‑{id} where {id} is the id of the image in the database.

Image sizes

The set of sizes of images that WordPress creates by default is rather small (you get widths of 150px, 300px, 768px, & 1024px). As I'm uploading 6000px wide photos, having some intermediate sizes greater than 1024 is useful to reduce the amount of data for desktop screens.

You can add new ones using the add_image_size() method which is best done after the theme is set up:

add_action('after_setup_theme', static function () {
    add_image_size('xl', 1500);
    add_image_size('2xl', 2000);
    add_image_size('3xl', 2500);
    add_image_size('4xl', 3000);
    add_image_size('5xl', 4000);
    add_image_size('6xl', 5000);
});

The third parameter to add_image_size() is the height constraint, which I don't set as I don't want it to be taken into account for portrait orientation pictures.

Note that even though you've added additional sizes, WordPress will ignore any bigger than 1600 pixels unless you tell it otherwise by adding a filter to max_srcset_image_width:

add_filter('max_srcset_image_width', static function($max_width){
    return $max_width < 6000 ? 6000 : $max_srcset_image_width;
});

If you change the set of image sizes after you've uploaded some images then you can create the new images using the wp‑cli media regenerate command or install the Regenerate Thumbnails plugin and run it from the Tools menu in your admin.

Adding wp‑image‑{id} class to posts

If you use the WordPress admin site to create your posts, then it automatically set the wp‑image‑{id} class for you on our img tags. I use MarsEdit, a desktop client that uses the XML-RPC API, for creating my articles and it doesn't set this class yet, so I needed to write a plug in for this.

To do this, we put a filter on the xmlrpc_wp_insert_post_data hook to inspect the content of the post and update if needed.

add_filter('xmlrpc_wp_insert_post_data', function ($data) {
  if ($data['post_type'] ?? '' === 'post') {
    $content = wp_unslash($data['post_content'] ?? '');

    // Find all <img> tags to add the "wp-image-{id}" class
    if (preg_match_all('/<img.*>/im', $content, $images)) {
      foreach ($images[0] as $img) {
        // Find the url in the src attribute
        if (preg_match('/src="([^"]+)/i', $img, $srcList)) {
          // Retrieve the id for this image.
          $postId = attachment_url_to_postid($srcList[1]);
          if (!$postId) {
            // This image isn't in the database, so don't touch it
            continue;
          }

          // Add the wp-image-{id} class if it doesn't exist for this image
          $list = [];
          if (stripos($img, 'class') === false
            || preg_match('/class="([^"]+)/i', $img, $list)) {
            $classes = $list[1] ?? '';
            $hasClassAttribute = (bool)count($list);

            if (!preg_match('/wp-image-([0-9]{1,10})/i', $classes)) {
              // wp-image-{id} class does not exist on this img
              $classes .= ' wp-image-' . $postId;

              if ($hasClassAttribute) {
                // Update the img tag with the new class attribute
                $newImg = preg_replace('/class="[^"]*/', 'class="'.$classes, $img);
              } else {
                // Insert class attribute into the img tag
                $newImg = str_replace('<img ', '<img class="'.$classes.'" ', $img);
              }
              // Replace the original <img> with our updated one
              $content = str_replace($match, $newImg, $content);
            }

          }

        }
      }
    }

    $data['post_content'] = wp_slash($content);
  }

  return $data;
});

Note that the post's content

Truncated by Planet PHP, read more at the original (another 3636 bytes)

Interview with James Titcumb

Global Garcinia cambogia, ext. (CAS 90045-23-1) Market, Trends, CAGR Status, Market Growth, Analysis and Forecast (2019 – 2024) | 360 Market Updates

Garcinia cambogia, ext. (CAS 90045-23-1) Market is expected to grow $XX million in 2018 with XX CAGR from 2014 to 2018, and it is expected to reach $XX million by the end of 2024 with a CAGR of XX% from 2019 to 2024.

Global Garcinia cambogia, ext. (CAS 90045-23-1) Market Report 2019 – Market Size, Share, Price, Trend and Forecast is a professional and in-depth study on the current state of the global Garcinia cambogia, ext. (CAS 90045-23-1) industry.

Get Sample PDF of Report @ https://www.360marketupdates.com/enquiry/request-sample/14088081

The key insights of the report: 

• The report provides key statistics on the market status of the Garcinia cambogia, ext. (CAS 90045-23-1) market manufacturers and is a valuable source of guidance and direction for companies and individuals interested in the industry. 
• The report provides a basic overview of the industry including its definition, applications and manufacturing technology. 
• The report presents the company profile, product specifications, capacity, production value, and 2013-2018 Garcinia cambogia, ext. (CAS 90045-23-1) market shares for key vendors. 
• The total market is further divided by company, by country, and by application/type for the competitive landscape analysis. 
• The report estimates 2019-2024 Garcinia cambogia, ext. (CAS 90045-23-1) market development trends of Garcinia cambogia, ext. (CAS 90045-23-1) industry. 
• Analysis of upstream raw materials, downstream demand, and current market dynamics is also carried out
• The report makes some important proposals for a new project of Garcinia cambogia, ext. (CAS 90045-23-1) Industry before evaluating its feasibility.

There are 4 key segments covered in this report: competitor segment, product type segment, end use/application segment and geography segment.

For competitor segment, the report includes global key players of Garcinia cambogia, ext. (CAS 90045-23-1) market as well as some small players. 

* Company I
* Company II
* Company III

Share your query before purchasing this report @ https://www.360marketupdates.com/enquiry/pre-order-enquiry/14088081

The information for each competitor includes:

* Company Profile
* Main Business Information 
* SWOT Analysis 
* Sales, Revenue, Price and Gross Margin 
* Garcinia cambogia, ext. (CAS 90045-23-1) Market Share

For product type segment, this report listed main product type of Garcinia cambogia, ext. (CAS 90045-23-1) market

* Product Type I
* Product Type II
* Product Type III

For end use/application segment, this report focuses on the status and outlook for key applications. End users sre also listed.

* Application I
* Application II
* Application III

For geography segment, regional supply, application-wise and type-wise demand, major players, price is presented from 2013 to 2023 of Garcinia cambogia, ext. (CAS 90045-23-1) Market.

This report covers following regions:

* North America
* South America
* Asia Pacific
* Europe
* MEA (Middle East and Africa)

The key countries in each region are taken into consideration as well, such as United States, China, Japan, India, Korea, ASEAN, Germany, France, UK, Italy, Spain, CIS, and Brazil etc.

Purchase this report (Price 4000 USD for a single-user license) @ https://www.360marketupdates.com/purchase/14088081

Reasons to Purchase this Report:

* Analyzing the outlook of the Garcinia cambogia, ext. (CAS 90045-23-1) market with the recent trends and SWOT analysis
* Market dynamics scenario, along with growth opportunities of the market in the years to come
* Garcinia cambogia, ext. (CAS 90045-23-1) Market segmentation analysis including qualitative and quantitative research incorporating the impact of economic and non-economic aspects
* Regional and country level analysis integrating the demand and supply forces that are influencing the growth of the market.
* Market value (USD Million) and volume (Units Million) data for each segment and sub-segment
* Competitive landscape involving the Garcinia cambogia, ext. (CAS 90045-23-1) market share of major players, along with the new projects and strategies adopted by players in the past five years
* Comprehensive company profiles covering the product offerings, key financial information, recent developments, SWOT analysis, and strategies employed by the major Garcinia cambogia, ext. (CAS 90045-23-1) market players
* 1-year analyst support, along with the data support in excel format.

We also can offer customized report to fulfill special requirements of our clients. Regional and Countries report can be provided as well.

Contact Info: –

360 Market Updates

Mr. Ajay More

USA: +1 424 253 0807

UK: +44 203 239 8187

[email protected]

Simply Keto Fit: Legit Ketogenic Diet Weight Loss Supplement?

Leave a Reply

Cancel reply

Article source: https://thehealtheaducation.com/2019/08/06/simply-keto-fit-legit-ketogenic-diet-weight-loss-supplement/

How Close-Up Portraits Bring Humanity to Web Design

Let’s be honest. Sometimes, we are missing the human touch on the web. No one is arguing with the fact that the modern user interfaces are a feast for the eye. Everything is so polished and well-thought-out. Starting with small transition effects that enrich scrolling through the sections and ending with literally massive solutions that transform hero areas into unforgettable pieces, we enjoy the whole variety of solutions. However, these are all artificial.

The world of digits always borders with solitude. After all, we enjoy websites alone. This is not a game for two. As a rule, web projects hold a lavish banquet for one. That’s why, sometimes, we are so glad to see a pair of human eyes that look back at us. Sometimes even the clichéd use of close-up portraits emerge as a trend. And today is that day.

Along with human illustrations that are increasingly popular now, close-up pictures are gathering momentum as well. Let’s consider some excellent examples.

Zitsticka

When it comes to creating portraits, as a rule, we are accustomed to thinking that people look down the lens. This is a rule of thumb. However, why not to break this law for our own good – much like the team behind Zitsticka did? They have skillfully played with the eye contact, making the subject look off the camera. As a result, we can witness a candid, happy face that oozes positive vibes on all fronts.

What’s more, it is just fascinating how much the direction of the subject’s eyes can impact the regular reading flow. Even though the first thing that gets noticed here is a beautiful girl, our primary focus of attention lies on the left side – where the content is located. The girl’s eyes naturally leads us.  This is a nice trick for those who want to manipulate the user’s reading behavior and set unobtrusive focal points.

The Avener

This is another example where the subject was captured looking off camera. The team behind The Avener has altered the perspective to make the artist in the picture feel stately and even a bit pompous. This idea goes perfectly with the website’s overall design and main purpose. Of course, this has not been without some photo manipulations, yet still the pose of the subject says it all.

Note, just a small twist with an angle lets the team create a powerful overall impression.

Mike and Jen’s Cocoa Mix

While the previous examples feature posed and coordinated pictures, this one gets its beauty from a lovely candid photo shoot. The girl with a cup of cocoa was photographed at ease, and we, regular online visitors, can feel this relaxed atmosphere as well. This portrait evokes some positive feelings in us. It appeals to our inner child, and this calling is quite difficult not to follow.

Note, photographing children is a real challenge. However, in the case of Mike and Jen’s Cocoa Mix, the team has done an outstanding job. The homepage feels incredibly natural and friendly.

GDW

Did she wink at you and touch your arm for two Mississippies? That look is difficult to resist without doubt. It lures you in, and there’s nothing that you can do.

The homepage slider features several more portraits, yet this one that is set to meet and greet the audience is certainly a winner.

Marc Kuiper

For his portfolio, Marc Kuiper goes for a traditional portrait. And, it definitely paid off. Admit it, when the subject on the picture looks right at your eyes, you feel like there is some sort of connection between you. And when this subject is posed in a clean dark environment where you can distinguish only the face, it is imprinted on your memory right away.

The homepage feels incredibly personal and charismatic. The artist has put a piece of his soul inside, thereby starting a soulful conversation with the audience.

Ali Rifai

Much like Marc Kuiper, Ali Rifai has opted in favor of a direct portrait, yet with a small twist. He has added a playful constituent to break the ice and start a dialogue with the audience on a happy note. This hilarious picture, where he is fooling around, not only lightens things up but also meets the tagline in the center.

LaventLaw

There are some spheres where portraits never go out of fashion. And the official website of a law firm is one of them. So it comes as no surprise that the team behind LaventLaw’s design has opted in favor of a corporate portrait.

They have managed to create a special combo of seriousness and friendliness by featuring a man in a traditional suit, yet with a smiling face. Such an approach naturally supports the theme and benefits the project.

Trinity Audio

Like any representative of visual material, close-up pictures allow you to conduct experiments and come up with original solutions like the creative team behind Trinity Audio did.

This musical platform uses half of the portrait to derive its human constituent and instill it into the hero area composition. They also have used its emotional component to give the project vibrancy and energy. And that’s not all. The portrait has got some Photoshop treatment that makes it an integral part of brand identity.

Stimmt AG

If you want to step away from photographs but still stick to close-up views of people, you can always go for an illustrated approach. It is a vast area that gives you freedom of expression.

Stimmt AG is a perfect case in point. Here you will find a hand-drawn artwork that features three cartoonish characters. Each character brings its own emotions that, together, make the project feel friendly and appealing to the audience. This original take gives a serious project a positive mood.

Upon Closer Inspection

Close-up portraits are a great way of adding a human touch to web pages. They help to build a connection between the project and the audience. They can also lead users by naturally creating focal points in the reading flow as well as set a mood that can quickly transfer to readers, thereby adding empathy and appeal to the project.

However, the solution can be a very bold step for a website’s overall look and a true challenge for a designers’ team. Every such photo hides a personality inside and a gamut of emotions that you need to handle properly. Nevertheless, when done right, it certainly makes the interface look one-of-a-kind.

The post How Close-Up Portraits Bring Humanity to Web Design appeared first on Speckyboy Design Magazine.