I need double logo in site identity of WordPress customizer. One on mobile view and other on desktop view. Both are different images. Please provide code for adding two logos.
I have code for adding one custom logo. and I need it on site identity itself
function lotus_flies_custom_logo_setup()
{
$defaults = array(
'height' => 139,
'width' => 176,
// 'flex-height' => true,
// 'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'lotus_flies_custom_logo_setup');
The best way to have different logo according to screen size is to use #media queries in CSS.
So you could just find out a css selector for your current icon, and add some css to resize it according to screen size, in your inherited custom template.
Instead of resizing, you could also just completely change the source of the image in CSS.
( As an inspiration: Swap out 3 differently-sized logos with media queries? . Documentation: Using_media_queries )
Related
I am trying to improve the quality of Wooommerce thumbnails on product page, but with no results. The thumbs are always displayed blurry not matter what I do.
I have tried different plugins like for retina etc, regenerated thumbs, uploaded via ftp new photoshopped 300 dpi imgs and replaced them with the ones which were in the gallery, uploaded bigger imgs, disabled jetpack, played with the different img settings in woocommerce and wordpress (set quality to 100%/scaling etc), put this string into functions.php file add_filter('jpeg_quality', function($arg){return 100;}); and so on, still nothing.
So I think there is some settings that are maybe related to FlexSlider, the slider woocommerce uses. It might be related to Woolentor as well? Using Astra theme + Elementor. I'm clueless.
Here's a link to a product page on my website (eg. check be quiet! logo, blurry in the thumbnails gallery, orginal image is 900x900px): https://gamingaddicted.it/prodotto/handpicked-red-chillies/
Thanks in advance!
You could do it with this code bellow or directly with the customizer on your website. Here is the url with some tips, maybe you should take a look at them. - TIPS HERE
Add this code to your theme's functions.php file and change the width and height as you wish.
/*change thumbnail quality in woocommerce*/
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 600, //change this to edit thumbnail witdth - default 150px
'height' => 600, //change this to edit thumbnail height - default 150px
'crop' => 0,
);
} );
The accepted answer didn't work for me, however the below did, if anyone runs into the same issue like me.
/*Change WC Gallery thumbnail size*/
add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return array(
'width' => 200, // Set WC gallery thumbnail width
'height' => 200, // Set WC gallery thumbnail width
'crop' => 0,
);
} );
I have a folder with pictures that do not belong to Drupal 7, I want to use the mechanism of Drupal 7 to apply certain styles to the picture knowing only its address, something like this:
$uri = '/sites/defalut/files/images/my_image.jpg';
$style = 'machine_name_style';
$styleFileName = drupal_realpath(image_style_path($style, $uri));
if (!file_exists($styleFileName)){
$image_style = image_style_path($style, $uri);
image_style_create_derivative(image_style_load($style), $uri, $image_style);
}
but this code dont working - how apply image style by absolute image path ?
What about:
theme('image_style',array('style_name' => 'thumbnail', 'path' => '/sites/default/files/images/my_image.jpg'));
I have googled around without finding a good solution for this. What i want to do is to create a masonry-like grid in a post where all images in the post should be in the masonry grid. How could i achieve this?
Note: With this idea you can get all attached image to the post either in gallery or inside the content
First let's add Masonry to your theme,
wp_enqueue_script( 'masonry' );
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js' );
then add this javascript code to your theme somewhere in footer or in your custom.js file
jQuery(window).load(function() {
var container = jQuery('#mas-maincontainer');
var msnry = new Masonry(container, {
itemSelector: '.mas-item',
columnWidth: '.mas-item',
});
});
Now let's get all images attached to the post as you want
$attachments = get_children(array('post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image'));
foreach($attachments as $att_id => $attachment) {
$full_img_url = wp_get_attachment_url($attachment->ID);
//Here is your HTML to grid your images...
// Remember your images should be between <div id="mas-maincontainer"></div>
}
now you should add your custom CSS as below
.mas-item {
width: 50%; // if you want two column
}
.mas-item {
width: 33%; // if you want three column
}
This is the whole idea and hope it works for you
You can use wordpress's native gallery. This solution will give you good control on where you want to put the images in the content and it is easy to manage the gallery and it's images.
Disable the default style with this filter:
add_filter( 'use_default_gallery_style', '__return_false' );
And then use the desandro's masonry plugin to create the gird. This plugin is well documented and is the most common for creating masonry grids, so you should be fine with this plugin.
Remember to style the gallery so it will work with the masonry plugin. Here are the 2 selectors you will be using, .gallery (is the container for every gallery), and .gallery-item (is the conatiner for each image in the gallery).
For some reason I just can't get the styling to change on the class="widgettile". I don't get it ... please visit my site on look at sidebar http://www.curious-howto.com, we scroll down towards the bottom and see the 2 widget on the right side. The title is wrapped in
<class="widgettitle">This is title</class="widgettitle">
but when I add to my style sheet .widgettile {font-family:Lobster;} ... it doesnt style the class ... I usually don't have any problems styling things ... I just don't understand why this doesnt work ...
Please any advise would be much appreciated
You do not have the class assaigned to anything. This is your html <class="widgettitle">Most Viewed Posts In The Last 30 Days </class="widgettitle">
You need to add the class to a tag like so <h3 class="widgetittle">Title</h3> '' is invalid and does not exist.
I see you are usng wordpress so more than likely it is a problem with the function.
function widgets_init() {
register_sidebar( array(
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
Make sure the function is used properly. The code above will add an h3 around the widget title with a class of widget-title.
I recently added a image to the edit button in YII.I do the following,
'class'=>'CButtonColumn',
'header' => 'Edit',
'template' => '{Edit}',
'buttons' => array(
'Edit' =>array(
'label' => 'Edit',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/Actions-document-edit.ico',
));
and css for the button goes like this,
td.button-column a img {
max-height:25px;
max-width:25px;
}
And the actual size of the image Actions-document-edit.ico is 25*25.
I have a situation here that, i have an 25*25 image in Google Chrome and 2*2 image in mozilla firefox. Help me to achieve the proper formatting of the image in both the browsers.
And suggest also the pagenation problem.
Instead of .ico try to use .JPEG or .png or .gif image
Pagenation problem was solved
.pager ul.yiiPager li.page:after{display: inline-block !important}
But still am getting image problem... Help please...