Forum Replies Created
-
AuthorPosts
-
March 12, 2024 at 11:23 pm in reply to: Audio Playlist showing Artist Name and current track with Quotation Marks #1437104
i can not believe that the other three shows no marks – and one does.
Anyway try that snippet in your child-theme functions.php from: https://pastebin.com/k0f385TJcan you please test that snippet!
if you like to have 4 columns – just change it.if you like to show the blog – then the context is not archive – it is index then ;)
PS: alb element = advanced layout builder element : if you use that – the element itself got some options to define the thumbnail size which is used.
but, as I suspected, you are not using this optionMarch 12, 2024 at 5:41 pm in reply to: Audio Playlist showing Artist Name and current track with Quotation Marks #1437072March 12, 2024 at 10:21 am in reply to: the same error occurs: “Uncaught TypeError: Cannot read properties of undefined #1437027on Enfold : where did you load your jQuery in the header or have you set to load jQuery in the footer?
hasClass belongs to jQuery – but if you load jQuery later than there will be this error. Maybe your plugin has the option too – to load the scripts later.so you are not using the alb element “blog posts” to show the content – but you have declared a page on : Enfold Child – Theme Options : “Where Do You Want To Display The Blog”. – and on Enfold Child – Blog Layout – you set the blog Layout to “Grid Layout”
try in your child-theme functions.php:
add_filter("avf_post_slider_args", function($atts, $context) { if( $context == "index" ) { $atts['type'] = 'grid'; $atts['columns'] = 3; $atts['preview_mode'] = 'custom'; $atts['image_size'] = 'entry_with_sidebar'; } return $atts; }, 10, 2);
other contexts in this could be : archive or tag – you can change the columns here too
March 12, 2024 at 8:53 am in reply to: Audio Playlist showing Artist Name and current track with Quotation Marks #1437019And you are realy shure that you haven’t set it with Quotationmarks?
Open that element and maybe make a screenshot as i do.
the default quotationmarks in the playlist belongs to mediaplayer of wordpress – and could be deleted by that known snippet:
https://pastebin.com/k0f385TJBut on top – these comes from Title and Description field of the media library.
Wow – thank you on that!
By the way – it only looks like the countdown if the css in question is loaded. If you have selected “Load only used elements (recommended)” in enfold options – and you have never used it in your installation – then the corresponding css is not loaded. Simply create a draft page somewhere on which the countdown is used.
Web-safe fonts are fonts that can adapt to any browser on any device. By using these types of fonts, web designers and developers ensure that the intended font will always display properly on a web page, even if these fonts aren’t installed on the user’s computer.
Since this was clear to me, I honestly didn’t read any further about your explanation there. There are quite a few more that could be listed here. But Copperplate does not belong here.
here is the official W3C List:
https://www.w3schools.com/cssref/css_websafe_fonts.phpAnd main point is – no img tag is used – images are background-images.
please show me your page. If you can not make it public – you had to wait for a mod.
can you put this in your child-theme functions.php:
function insert_a_whatsapp_button() { ?> <script> (function($){ $( '#top' ).append('<div class="whatsapp-button"><a href="https://wa.me/3483883844?text=Salve,%20vorrei%20chiedere%20informazioni" target="_blank"><img width="80" height="80" src="https://srgl.it/aom/wp-content/uploads/2024/03/whatsapp_img-80x80.png" class="image wp-image-864 wa_img attachment-thumbnail size-thumbnail" alt="" style="max-width: 100%; height: auto;" decoding="async" srcset="https://srgl.it/aom/wp-content/uploads/2024/03/whatsapp_img-80x80.png 80w, https://srgl.it/aom/wp-content/uploads/2024/03/whatsapp_img-36x36.png 36w, https://srgl.it/aom/wp-content/uploads/2024/03/whatsapp_img.png 149w" sizes="(max-width: 80px) 100vw, 80px"></a></div>'); $('.whatsapp-button').css({ "position": "fixed", "bottom": "120px", "right": "20px", "z-index": "500", }) })(jQuery); </script> <?php } add_action('wp_footer', 'insert_a_whatsapp_button');
now you can see on that example page – that i can influence the inline svg logo to have different fill colors if the header is transparent.
in this case i do not use the transparency logo on enfold options. – i just switch the fill color for that case:
.html_header_transparency #header:not(.header-scrolled) .fillColor { fill: #FFF; }
by the way – on your page – i wouldn’t try to set the svg dimension via height – because this is calculated by the shrinking script.
just set a width ( absolute value).logo svg { /*** margin-top: 10px; ***/ /*** padding: 10px; ***/ width: 350px; /*** height: auto; ***/ }
so get rid of margin-top, padding and height
If this is really the case, I think it would be better to include only platform-independent fonts in the list of Websafe fonts.
Next : BetterZip f.e. has a drop bar – you can there select the option to zip for PC ( that means no hidden Mac Files )
by the way Elsner & Flake got a copperplate with font-weight: 300, 500, 700
So try to upload that Font via : Custom Font Manager ?
how did you transform f.e. the ttf or otf files to web-fonts?
My Copperplate here is the Pro Version and otf files.you can do that f.e. on : https://transfonter.org/
i think ttf and woff2 would be sufficiant.by the way: https://similarfont.io/2-google-fonts-similar-to-copperplate
first : i do not see your custom class in the dom: image_no_stretch
second: maybe this is not the Element for you to use. It is the avia-fullscreen-slider
it is just the feature that the full-screen slider has the full height.next: the fullscreen slider has no images as slides – the image is set as background-image to the li !
( so no img tag to select )maybe better to use instead the fullwidth easy slider !
but this is not a pure svg file – it has an embedded image file ( as data:image/png;base64 ) – the advantage of svg is the vectorbased curves.
The embedded Image in your file is superflous. Here is a cleaned version of your logo:
https://webers-testseite.de/gonowjets.svgyou see on the xml code of that svg a group class : fillColor
so you can now colorize that logo via quick css:.fillColor { fill: #FFF; }
see in action on : https://webers-testseite.de/gonowjets-2/
with:#top .logo svg { width: 300px; }
ps: the svg does not shrink with the header because it fits with the given width even in the shrinked header.
if you do not set the svg width – it will shrink but then it is very big of course.you can do that inline like your color setting:
<h3> <a href="https://site.com/portfolio-item/east-point-lighthouse-n-j-photography-hot-spot/"> <span style="color: #ffff00; text-transform: uppercase"><strong>EAST POINT LIGHTHOUSE</strong></span> </a> </h3>
or globaly:
#top .avia_textblock h3 strong { text-transform: uppercase !important; }
if you do like to have it only on some h3 – you had to use a custom-class
have you activated the TinyPNG with a valid API Key?
On my test – it has reduced a webp from 870kb to 279kb ( Dimension: 4032 × 3024 )March 6, 2024 at 11:58 pm in reply to: Disabling WP block editor and enabling Enfold Advance Layout Builder #1436556first – goto Enfold Options – Theme Options – Select Your Editor : “Use WP Classic Editor”
you can add to child-theme functions.php:
function trigger_alb_on_load(){ ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ setTimeout(function() { $("#avia-builder-button").trigger('click'); }, 300); })(jQuery); }); </script> <?php } add_action('admin_head-post-new.php', 'trigger_alb_on_load');
and if you like to change the editor even on widgets:
add_filter( 'use_widgets_block_editor', '__return_false' );
Yes – but do replace both files – logo for transparency headers and the other one.
do you have that logo as svg file? Vectorbased Files are sharper even on small dimensions
If not – what Font is the base for it? (the G and E and T and S will not be there on default – but it is much easier to make an svg of that – if we know the source font.try this first instead:
function link_to_gallery_first_item_in_lightbox() { ?> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { (function($) { $('.link_to_lightbox a').addClass('no-scroll'); $(document).on('click', '.link_to_lightbox a', function(event) { event.preventDefault(); var linkTarget = $(this).attr('href'); $(linkTarget).find("a.first_thumb").click(); }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'link_to_gallery_first_item_in_lightbox');
If you have installed a plugin like “Page scroll to id” – then we had to adjust it too.
the button is there too!
It turns out to be very complex if you first want to open the gallery preview in the modal window, and then the items with the next click.
Example Page :
give to the button element a custom class f.e.: link_to_lightbox and link to an ID.
( or if you got many links inside to perform : give that class to a parent-elment (f.e. color-section) )place your galleries on your page (preferably behind your other content on the site.)
Style them as lightbox galleries!
those galleries must have now a unique ID (that corresponds with your link ID’s) and a custom class: mfp-hideput this to your child-theme functions.php:
function link_to_gallery_first_item_in_lightbox() { ?> <script type="text/javascript"> (function($) { $(document).on('click', '.link_to_lightbox a', function(event) { event.preventDefault(); var linkTarget = $(this).attr('href'); $(linkTarget).find("a.first_thumb").click(); }); })(jQuery); </script> <?php } add_action('wp_footer', 'link_to_gallery_first_item_in_lightbox');
and you like to show the gallery first in the lightbox – and then on next click the first gallery-item or does the button click start to show in lightbox the first item – then on click left/right the next images?
see for example: https://webers-testseite.de/hidden-gallery/
but i do not find any webp on your installtion
on alb settings – try to use the option to have no recalculted image – but to use “No Scaling (Original Width X original height)
even on chrome – if you use the recalculated images it uses the jpgs instead. Do you use for webp any additonal image plugin etc. ?maybe it has to do with your non existing certificates. Your page is only in http mode to view. But maybe a security setting or plugin hampers to load unsecure sources. Or your Content Security Header settings.
by the way: https://securityheaders.com/?q=http%3A%2F%2Finvebiwp.weblink.it%2Fcontatti%2F&followRedirects=on
Where did you insert those CSPs ? And did you do it the correct way?
on the demo https://kriesi.at/themes/enfold-2017/ I can also see the Twitter icon in Chrome. Without seeing your page – no chance to give advice.
If there is a link on private content area – you had to wait for a mod. SorryWenn es deine Internetseite betrifft, die sich hinter deinem Nick verbirgt, dann sind es hautpsächlich deine Bilder, die deiner Beachtung würdig sein sollten.
Mal davon abgesehen, das es gar keinen Sinn macht Bilder hochzuladen, die mehr als 2560px ( das ist eine Media-Library Grenze die WordPress selbst hat) groß sind. Dadurch tauchen Bilder auf, die dann WordPress auf diese Grenze herunter rechnet und mit dem addendum -scaled abspeichert.
schau dir den Bericht auf Gtmetrix mal an: Link
Es it garantiert nicht das Pseudo-Element was du oben anführst. ( Es sei denn es hat dort Hintergrundbilder oder ähnliches per css mit drin.)Es werden auch viele kleinere Bilder (in den Dimensionen nicht vom Dateivolumen) hochscaliert, was auch Zeit benötigt.
Zur Info bezüglich der Art wie Enfold mit hochgeladenen Bildern neue Formate errechnet. : https://kriesi.at/support/topic/enfold-image-bigger-than-original/#post-1355204
Dort findest du dann auch ein Snippet mit dem man den Kompressionslevel von Enfold beim Upload der Bilder reduzieren kann. Und wie man mit der Nutzung von temporär installierten Plugins die anderen Bildformate erneut recalculieren läßt.Meine Empfehlung : bevor du die Bilder hochlädst, berechne Sie neu in einem Grafikprogramm auf eine Größe, die auch später Verwendung finden könnte.
Wenn man sich die “most common browser viewing sizes” ansieht, sollte man mit 1920px meist auskommen.hier mal ein Bildvergleich eines deiner Bilder – schau ob sich das wirklich lohnt, hochaufgelöste Bilder im Web zu nutzen ;)
https://webers-testseite.de/bildvergleich/ -
AuthorPosts