I use Glide JS for a Slideshow that I built with ACF and Gutenberg Blocks.
But there is an issue with the next button. The ">" does not get rendered correctly – and it destroyes the whole DOM. Is there an alternative for the "data-glide-dir" next command? When i remove the data-glide-dir=">" everything works just fine.
Below is the code I use – the screenshot shows how it finally gets rendered in the browser.
screenshot
<?php $gallery = get_field('images'); ?>
<?php if( $gallery ) : ?>
<div class="gcont">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<?php foreach( $gallery as $image ) : ?>
<li class="glide__slide"><img class="full-width-image" src="<?php echo esc_url($image['sizes']['large']); ?>" alt="<?php echo esc_attr($image['alt']); ?>"></li>
<?php endforeach; ?>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
</div>
</div>
</div>
<?php endif; ?>
What did the trick for me was encoding < with < and > with >
See also: HTML: Should I encode greater than or not? ( > > )
Related
I need to show 4 flexible items and load more, I don't know how to make it manually, so I tried that plugin But I can't understand how to make the shortcode correctly
That's what I generated
[ajax_load_more container_type="div" acf="true" acf_field_type="flexible" acf_field_name="review-repeater" post_type="any" meta_key="review-repeater" meta_value="" meta_compare="IN"]
The original flexible content loop without loadmore
<div class="row justify-content-center">
<?php if( have_rows('review-repeater') ):
// Loop through rows.
while ( have_rows('review-repeater') ) : the_row();?>
<div class="rev">
<?php // Case: Paragraph layout.
if( get_row_layout() == 'review-repeater' ):?>
<div class="d-flex justify-content-between">
<div class="rev-left">
<div class="raiting-review"><?php echo get_sub_field('review-raiting'); ?></div>
<div class="review-content">
<p><?php echo get_sub_field('review-content'); ?></p>
<div class="d-flex">
<?php echo get_sub_field('review-author'); ?> , <?php echo get_sub_field('review-date'); ?>
</div>
</div>
</div>
<div class="rev-right">
<img src="<?php echo get_sub_field('review-platform') ?>">
<p><?php echo get_sub_field('review-count'); ?></p>
</div>
</div>
</div>
<?php endif;
// End loop.
endwhile;
endif; ?>
I copied that code to the 'repeater template' instead of default post archive loop, but the shortcode doesn't show my content, maybe someone already used the same decision?
Already tried posts_per_page="4" parameter, it didn't help too.
I have a problem showing error messages in the content section of the checkout page.
I want to load the messages directly from the checkout/cart.phtml page instead of page/1column.phtml so that I can put it directly near the checkout options
this is the code in my checkout/cart.phtml
<div class="cart-collaterals">
<div class="col2-set">
<div class="col-1">
<?php echo $this->getMessagesBlock()->toHtml() ?>
<?php echo $this->getChildHtml('crosssell') ?>
</div>
<div class="col-2">
<?php /* Extensions placeholder */ ?>
<?php echo $this->getChildHtml('checkout.cart.extra') ?>
<?php echo $this->getChildHtml('coupon') ?>
<?php if (!$this->getIsVirtual()): echo $this->getChildHtml('shipping'); endif; ?>
</div>
</div>
Using this I can display how I want the success text (such as "Your product has been added to the cart") but when I have an error that tells me that I have to change quantities in the cart it doesn't load the template from checkout/cart.phtml but from page/1column.phtml
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
</div>
What I need to do is to load the <?php echo $this->getMessagesBlock()->toHtml() ?> directly from checkout/cart.phtml
My alt tags for images don't seem to work. I can add an alt tag in the admin for a particular image but I can't seem to display that.
My alt tag just remains empty.
Now I've been looking around for a solution and I've found the following:
get_post_meta($attachment_id, '_wp_attachment_image_alt', true)
but that doesn't seem to work at all, the alt tag just stays empty.
At the moment my code is the following:
<img src="<?php the_sub_field('image'); ?>" title="<?php the_title(); ?>" alt=""/>
Any solutions for this?
I presume there is a standard wordpress function to do this, since we have the option to insert an alt tag in the admin area
Try it this way: (not yet tested)
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
Which leads you to:
<img src="<?php the_sub_field('image'); ?>" title="<?php echo $image_title; ?>" alt="<?php echo $alt; ?>"/>
May be you are using Chrome Browser, it's chrome's issue.
or if not than try this one, it will definitely helps you.
<img src="<?php the_sub_field('image'); ?>" title="<?php the_title(); ?>" alt="image"/>
Thanks.
Judging from the code you post on your fiddle in the comments, I would say you need to change the way you have setup your ACF fields.
get_post_meta($attachment_id, '_wp_attachment_image_alt', true) won't work because $attachment_id is empty.
It looks like you have set your ACF Fields up to return the image URL instead of the image object or the image ID. I would suggest changing the field to return the ID. Then you can modify your code like the following:
<div class="row bottom-margin-half">
<?php $i=0 ?>
<?php $teamMembers=count(get_sub_field( "persoon")); ?>
<?php while (the_repeater_field( 'persoon')) { ?>
<?php if ($i==0 || $i % 4===0 ) { ?>
<div class="row">
<?php } ?>
<div class="col col-lg-3 col-sm-4 teamdescription">
<?php echo wp_get_attachment_image( get_sub_field( 'image' ), 'full', false, array( 'class' => 'r5' ) ); ?>
<p><b><?php the_sub_field('naam'); ?> <?php the_sub_field('linkedin'); ?></b>
</p>
<p>
<?php the_sub_field( 'functie'); ?>
</p>
</div>
<?php $i++; ?>
<?php if ($i==0 || $i % 4===0 || $teamMembers===$i) { ?>
</div>
<?php } ?>
<?php } ?>
</div>
The wp_get_attachment_image function creates the image element and handles the alt tag for you.
I'm redesigning a client's top-level category pages and I would like to future-proof the design by making it dynamic. To further clarify, I want it so whenever the client adds, edits or removes a category below the current level, it would reflect that on the frontend without the need of editing code.
Now, I have come across some blog posts on the topic and even a Stack forum post:
http://www.templatemonster.com/help/magento-listing-sub-categories-on-a-category-page.html
how to display thumbnail from category using getThumbnailUrl() in Magento
However, these are both handling it differently. The Stack post also lead me to:
http://www.douglasradburn.co.uk/getting-category-thumbnail-images-with-magento/
Which I found out I needed to add the functionality for pulling the Thumbnail Image (way to go Magento). BUT, this is what I need! The end goal here is to use the Thumbnail Image on the backend of the Category, NOT the Image. We're using the Image elsewhere, as intended. I also would like to be able to pull in the category description from the backend to the frontend for the purpose of adding some extra information such as links, a true description, etc.
If there anyone who can help me? I went through the above examples and links and still, the Thumbnail images were not pulling to the frontend and overall, I'm just getting some weird behaviour. Any tips would be appreciated as I research this further myself.
Thank you!
Please Try below code. I have implemented the same with this
<?php $category_path = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."catalog/category/"; ?>
<?php if (!Mage::registry('current_category')) return ?>
<?php $_categories = $this->getCurrentChildCategories() ?>
<?php $_count = is_array($_categories)?count($_categories):$_categories->count(); ?>
<?php if($_count): ?>
<div class="static-page-listing static-page-listing1">
<ul class="products-grid">
<?php $num = 0; ?>
<?php foreach ($_categories as $_category): ?>
<?php if($_category->getIsActive()):
$num++;
$selImage = "SELECT value FROM catalog_category_entity_varchar WHERE attribute_id = '126' AND entity_id = '".$_category->getId()."'";
$catImage = Mage::getSingleton('core/resource')->getConnection('core_read')->fetchOne($selImage);
if(!$catImage) $catImage = "no_image.jpg"; ?>
<li class="category-item <?php if($num%2==0) echo 'item-right'?>">
<a href="<?php echo $this->getCategoryUrl($_category) ?>">
<div style="float:left; width:100%;">
<img src="<?php echo $category_path.$catImage?>">
</div>
<div>
<h3><?php echo $this->htmlEscape($_category->getName()) ?></h3>
<h6 style = "color:red;">VIEW ALL</h6>
</div>
</a>
</li>
<?php endif; ?>
<?php endforeach ?>
</ul>
</div>
<?php endif; ?>
NEW UPDATE:
The below code works:
<?php echo $cur_category->getDescription(); ?>
However, you need to be sure to check your Scopes! Not realizing my individual Store Scopes were not checked off to follow the "All Scopes" default, I fixed that and the above code worked for me when added to the "DESCRIPTION" area!
Thanks Stack!
PREVIOUS UPDATE:
I now have code working that I found online, it involved me adding a function to pull the category thumbnail image. It works! Here is the mark-up for the template:
<div class="category-products">
<ul class="products-grid">
<?php
$_categories=$this->getCurrentChildCategories();
if($_categories->count()):
$categorycount = 0;
foreach ($_categories as $_category):
if($_category->getIsActive()):
$cur_category=Mage::getModel('catalog/category')->load($_category->getId());
$layer = Mage::getSingleton('catalog/layer');
$layer->setCurrentCategory($cur_category);
$catName = $this->getCurrentCategory()->getName();
if ($categorycount == 0){
$class = "first";
}
elseif ($categorycount == 3){
$class = "last";
}
else{
$class = "";
}
?>
<li class="item <?=$class?>">
<a href="<?php echo $cur_category->getURL() ?>" title="<?php echo $this->htmlEscape($cur_category->getName()) ?>">
<img src="<?php echo $cur_category->getThumbnailUrl() ?>" width="100" alt="<?php echo $this->htmlEscape($cur_category->getName()) ?>" />
</a>
<h2>
<a href="<?php echo $cur_category->getURL() ?>" title="<?php echo $this->htmlEscape($cur_category->getName()) ?>">
<?php echo $this->htmlEscape($cur_category->getName()) ?>
</a>
</h2>
<p>
DESCRIPTION
</p>
</li>
<?php
endif;
if($categorycount == 3){
$categorycount = 0;
echo "</ul>\n\n<ul class=\"products-grid\">";
}
else{
$categorycount++;
}
endforeach;
endif;
?>
</ul>
Now, where you see "DESCRIPTION," I would like to pull the category description data from the backend and have it output there. Basically, allowing dynamic creation/revision of top-level category pages.
How can I pull the description though? I'm not an expert in Magento, maybe I'm missing something basic but I can't get it working.
Thank you!
I'm new to Magento and working on customizing the Modern template, as its close to my ultimate design. However I noticed that for some reason the 3rd column in the 3 column template was commented out:
/frontend/default/modern/template/page/3columns.phtml
[lines 43-55]
<div class="main-container col2-left-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<?php /*<div class="col-wrapper">*/ ?>
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
<div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
</div>
<?php /*<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>*/ ?>
<?php /*</div>*/ ?>
</div>
I copied this to my own theme, and modified it as such:
/frontend/my_package/my_theme/template/page/3columns.phtml
<div class="main-container col3-layout"> <-------
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-wrapper"> <-------
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
<div cla/ss="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
</div>
<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div> <-------
</div> <-------
</div>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
In the backend, I created a static block with just plain text, and tried adding it to "All Pages", "Right Column"; but it does not show up. If I add it to "All Pages", "Left Column" it does show up.
I'm guessing that the Right Column reference somehow isn't in Magento correctly, but I don't know where to even begin looking to fix that.
You should have a reference to right column in your page.xml (or your custom local.xml) for it to work.
Check this Classyllama article to see how to implement it in correct way:
http://www.classyllama.com/development/magento-development/the-better-way-to-modify-magento-layout