About design and nearby

How to set a post featured image as background image in WordPress

Posted: August 20th, 2019 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

After testing your website with Google PageSpeed Insights tool you may need to reduce number of loaded resources for mobile devices to fasten the loading speed. One of possible solution could be do not display images for mobile viewport. And for that images should be used as background images.

So the post thumbnail image

  1. <?php if ( has_post_thumbnail() ) : ?>
  2.   <img src="<?php the_post_thumbnail_url('post-thumbnails-home-page'); ?>" />
  3. <?php endif; ?>

becomes a div:

  1. <?php if ( has_post_thumbnail() ) : ?>
  2. <div class="card">
  3.   <div style="background-image:url(<?php the_post_thumbnail_url('post-thumbnails-home-page'); ?>); background-size:cover;"></div>
  4. </div>
  5. <?php endif; ?>

And you can display:none div.card for mobile devices now.

Share Button

How to get ALT text of featured image in WordPress

Posted: August 20th, 2019 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Sometimes you need to get a post’s featured image alt and echo it as text. Seems to be easy, right?

For example, I had such code for showing posts featured images as thumbnails for those posts:

  1. <img src=src="<?php the_post_thumbnail_url('post-thumbnails-home-page'); ?>" alt="" />

where

  1. if ( function_exists( 'add_theme_support' ) )
  2.  {
  3.  add_theme_support( 'post-thumbnails' );
  4.  add_image_size( 'post-thumbnails-home-page', 730, 354, TRUE );  //just my specified size for the default page  
  5.  }

To echo alt text into alt tag I created variable $alt:

  1. <?php $thumbnail_id = get_post_thumbnail_id( $post->ID );
  2.  $alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); ?>
  3. <img src="<?php the_post_thumbnail_url('post-thumbnails-home-page'); ?>" alt="<?php echo $alt; ?>" />

Works as a charm!

Share Button

How to use ALT tags with Advanced Custom Fields plugin

Posted: August 19th, 2019 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

If you work with Advanced Custom Fields (ACF) plugin for WordPress, probably, you faced the same problem as I did: alt tags for images. The idea is clear – you want to upload and select an image as you do it usually with native WordPress media popup and get the alt tag value for this image filled in also.

The code could be kinda

  1. <img src="<?php echo $grey_section['image']['url']; ?>" alt="" />

And.. how to attach image alt?

Here is the solution:

  1. <img src="<?php echo $grey_section['image']['url']; ?>" alt="<?php echo $grey_section['image']['alt']; ?>" />

And the trick is to set ‘Image array’ to Image Object:

Image showing how to set alt tag

*You can always use var_dump($image); to print out the $image variable to know what is inside $image.

Happy coding!

Share Button

Using a custom web fonts in *.svg

Posted: November 2nd, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

Like any vector graphic, SVG file can contain text. To declare your font just use a simple font-family attribute:

  1. <text fill="#51BBE3" font-family="'Your font-family'" font-size="60">‘Meow’ means ‘Woof’ in cat</text>

Everything is fine if you set a system font, but how to deal with custom fonts? Even if you have loaded your required font-family into the project and use

  1. <text fill="#51BBE3" font-family="'Your custom font-family'" font-size="60">‘Meow’ means ‘Woof’ in cat</text>

– this does not always work. For example, if your SVG file is embed in a html file – check it yourself:
Read the rest of this entry »

Share Button

How to bundle an Angular app for production to non-root path

Posted: March 14th, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , , | No Comments »

Bundling steps are pretty easy.. till you do it yourself for the first time :)

1. Start with the development build:

ng build ––prod

2. By default files will be placed in the ‘dist’folder of your angular project:
Read the rest of this entry »

Share Button

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now