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.

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!

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!

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 »

How to Take Great Photos to Promote your Property (in plain English)

Posted: September 26th, 2018 | Author: | Filed under: Creative Process, Tips and Tricks | Tags: , , , , | No Comments »

As the saying goes, a picture is worth a thousand words – and in our case it’s the photographs that do the talking for you. If you work on creating print production like me, you know the significal role of photos. Except the overall quality of the design itself, photos used in an issue can impact the reader experience – in a good or bad way. At its best, photography can act with the rest of magazine’s layout elements, which are arranged to create a cohesive whole. And at its worst, low-quality shots can damage all the hard work the magazine designer has put into her ;) creation.

For me there are 3 main components of any well-done photo – composition, technical side and idea, they are a base of successful photography. Using this knowledge while taking your shots, you’ll be able to achieve better results.

– Good Light
The best times to take photos are early in the morning or late in the afternoon – natural light is the best and easiest one to take shots, the more if you are not a professional. You can measure this time by your own shadow – it should be longer then you are.
Read the rest of this entry »

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

Let's discuss your project now