Showing posts with label theme. Show all posts
Showing posts with label theme. Show all posts

Thursday 8 July 2021

How to convert image in webp format programmatically?

We are giving an example for convert normal image to webp image format programmatically. Here all code/examples are already used in our projects.

Example:

use Drupal\image\Entity\ImageStyle;
use Drupal\media\Entity\Media;
use Drupal\responsive_background_image\ResponsiveBackgroundImage;

if ($tab_img = $tab_entity->get('field_image')->getValue()) {

          $tab_img = array_shift($tab_img);

          $mid = $tab_img['target_id'];

          $media = Media::load($mid);

          $fid = $media->field_image->target_id; 

          // if you want simple image url..

          $style = 'max_160w';  //pass image format

          $url = content_asset_image_url($fid, $style);

          $variables['tab_titles'][$tab['target_id']]['icon'] = $url;

          // if you want image convert into webp image format..

          $file = File::load($fid);

          $uri = $file->getFileUri();

          $variables['tab_titles'][$tab['target_id']]['icon']  = [

            '#theme' => 'responsive_image',

            '#responsive_image_style_id' => 'responsive_asset_300x300',  //pass responsive image format

            '#alt' => 'Resource Content Asset',

            '#uri' => $uri,

            // Add `#attributes` key with alt text.

            '#attributes' => [

              'data-lazy'=> TRUE,

            ],

          ];

        }

 // Content Asset function to get Image URL

function content_asset_image_url($file_id, $style_choice) {

  $file = File::load($file_id);

  $image_uri = $file->getFileUri();

  $style = ImageStyle::load($style_choice);

  $url = $style->buildUrl($image_uri);

  return $url;

}


Note: If have any suggestions or issue regarding 'How to convert image in webp format programmatically?' then you can ask by comments. 

Thursday 27 February 2020

How to use breakpoints in drupal 8?

There we have simple way to use breakpoints means separate media query in drupal 8 and that will also help in speed up or optimize the website.
We have some following points, that will easily clear your doubts about breakpoints and separate media query.
1. We will create a file with the name of 'yourthemeORmoduleName.breakpoints.yml', Example for theme like your theme name is 'bartik' the file name will be 'bartik.breakpoints.yml'.
2. This breakpoints file will be use for write the code of media query for responsiveness. This file will be located in 'themes/bartik/' root.
Example:
bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.small:
  label: small
  mediaQuery: "(min-width: 0px)"
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.medium:
  label: medium
  mediaQuery: "(min-width: 768px)"
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.large:
  label: large
  mediaQuery: "(min-width: 1024px)"
  weight: 3
  multipliers:
    - 1x
    - 1.5x
    - 2x
Here the breakpoint properties are:
    Very first we will take a unique breakpoint name like: bartik.small:      (moduleName/themeName.unique breakpointName),
    Example: bartik.small: ,bartik.medium: ,bartik.large: ,bartik.wide: ,bartik.narrow: ,bartik.mobile:
   
    label - The human readable name of the breakpoint
    mediaQuery - a valid @media query(for responsiveness)
    weight - where the breakpoint is ordered in relation to other breakpoints
    multiplier - the ratio between the physical pixel size of the active device and the device-independent pixel size
               - 1x
               - 1.5x // supports Android
               - 2x  // supports Mac retina display
              
3. After that we will create new library and attach this breakpoints in 'bartik.libraries.yml' file.
Syntax:
libraryName:
  version: 1.0
  css:
    theme:
      css/desktop-small.css: { media: all and (min-width: 851px) }
      css/mobile.css: { media: only screen and (max-width: 767px) }
      css/mobile-common.css: { media: all and (min-width: 560px) and (max-width: 850px) }
     
    Same like we can create many viewports / breakpoints / media queries and attach with libraries and templates of our website.

4. Now this specific library we will render on template where we want to apply.
Example: {{ attach_library('mythemeName/libraryName') }}   

So in this way we can optimize the site and increase the performance with the help of breakpoints because with the help of this only in case of Mobile or Tab or Ipad or Desktop specific mentioned css will be rendered else not.
And the most important thing is clear the Cache and run Cron.

Note: If have any suggestions or issue regarding 'How to use breakpoints in drupal 8?' then you can ask by comments.  

Monday 16 December 2019

How to avoid Core CSS and JS from theme in drupal 8?

Sometimes we just want to render our custom css/js, and avoid globally rendered core css or js from every page. So we have to follow given below steps:

Step 1: First go to your theme ".info.yml" file.
Step 2: Then add "stylesheets-remove:" parameter and add css file path of all core files like,
Example: Theme file name is "account.info.yml".
then we just have to add 'stylesheets-remove:' for avoid under write files there..

stylesheets-remove:
  - core/themes/stable/css/system/components/autocomplete-loading.module.css
  - core/themes/stable/css/system/components/ajax-progress.module.css
  - core/themes/stable/css/system/components/align.module.css

 
Step 3: Clear full cache of project.

So this is the easy way to avoid core file from project pages.


Note: How to remove globally CSS from theme of project in drupal 8?

How to resolve max execution time error in drupal ?

When you found error regarding 'max_execution_time' exceed, then you can follow steps for resolve this error: Steps:   You can put t...