I am beginner in PHP, so maybe for some of you this question is ridiculous.
I would like to get image title and caption from jquery slider. (Themeforest Delight theme - http://www.pixedelic.com/themes/delight/), to show them in the same way as in (http://themes.themegoods.com/dk_wp/).
I have tried almost everything.
Thanks in advance for your help.
Here is the code from header:
<?php
function default_bg(){
if(get_pix_option('pix_general_background')=='slideshow'){ ?>
<div class="pix_slide" data-position="fixed" data-top="0" data-bottom="not">
<?php
$slide_general = get_pix_option('pix_array_slide_general_');
foreach ($slide_general as $slide) {
echo '<div data-src="'. $slide .'" data-thumb="'. get_pix_thumb($slide, 'exTh') .'" data-content="'. get_pix_content($slide) .'"></div>';
}
?>
I have found some script, which get the content, but can't implement it.
Here it is:
content: jQuery('#pix_credits_pictures').html(),
events: {
show: function(event, api) {
api.set('content.text', jQuery('#pix_credits_pictures').html());
}
},
You will need to modify the way the jQuery slider to include custom attributes for the images to include the title and the caption. Something like:
<?php
$slide_captions = array("caption1","caption2"...);
$slide_title = array("title1","title2"...);
?>
<?php
function default_bg(){
if(get_pix_option('pix_general_background')=='slideshow'){ ?>
<div class="pix_slide" data-position="fixed" data-top="0" data-bottom="not">
<?php
$slide_general = get_pix_option('pix_array_slide_general_');
$c = 0;
foreach ($slide_general as $slide) {
echo '<div data-src="'. $slide .'" data-thumb="'. get_pix_thumb($slide, 'exTh') .'" data-content="'. get_pix_content($slide) .'" image_title="'.$slide_title [$c].'" image_caption="'.$slide_captions[$c].'" class="slide_item"></div>';
$c++;
}
?>
You can implement a more elegant solution for "storing" the titles and captions instead of an array, I guess that depends on the way your plugin works and how it is storing the images.
Next up you can access the title and captions using jQuery like so:
var image_title= $('.slide_item').attr('slide_title');
var image_caption= $('.slide_item').attr('image_caption');
Obviously you will have to decide where exactly you want to use the title and when, but that is how you access them. The best way is probably to modify the slider library on the active image event.
Related
So I want to include this code many times on one page with different data:
if (!empty($faq[$fisf][$title]) ) {
echo '<div class="card card-body col-12"><h5 class="card-title">'.$faq[$fisf][$title].'</h5>';
if (!empty($faq[$fisf][$image]) ) {
echo '<img src="'.$faq[$fisf][$image].'" alt="'.$faq[$fisf][$title].'" class="img-fluid">';
}
if (!empty($faq[$fisf][$title]) ) {
echo $faq[$fisf][$text];
}
echo '</div>';
}
What I normally do is put this code in a separate file and then include it as many times as I need it and depending on where that code is in a loop or foreach it will show the relevant data!.
But I'm trying to figure out a better way of doing it, like using a function!
Kind of like this:
function faqmodal() {
if (!empty($faq[$fisf][$title])) {
echo '<div class="card card-body col-12"><h5 class="card-title">'.$faq[$fisf][$title].'</h5>';
if (!empty($faq[$fisf][$image])) {
echo '<img src="'.$faq[$fisf][$image].'" alt="'.$faq[$fisf][$title].'" class="img-fluid">';
}
if (!empty($faq[$fisf][$title])) {
echo $faq[$fisf][$text];
}
echo '</div>';
}
}
I want this function to run within different foreach's and loading the relevant data to where its run.
faqmodal();
So this part will depend on what the foreach telling it to load it with :
$faq[$fisf][$title]
But now the function does not convert the code above to be relevant whats in the foreach loop is telling it to fill it with!
But this might not be the smartest way of doing it, I'm open for any ideas!
I'm not sure I understood correctly, this should be solvable by passing the data as an argument of the function like this:
function faqmodal($title, $image, $text){
if (!empty($title) && !empty($image) && if (!empty($text)) {
echo '
<div class="card card-body col-12">
<h5 class="card-title">'.$title.'</h5>
<img src="'.$image.'" alt="'.$title.'" class="img-fluid">
'.$text.'</div>'; //you might wanna think about moving the text into e.g. a <span> tag
}
}
If you now want to call the function you'll do it like so:
faqmodal($faq[$fisf][$title], $faq[$fisf][$image], $faq[$fisf][$title]);
And the data you pass will vary according to the data you get via the foreach loop. If this isn't what you mean, please let me know via a comment and we'll work our way through this.
I have a wordpress function that displays adverts every so often. When are not shown essentially I would prefer to the div to display:none;
I can not seem to figure out the correct PHP function in order for the div not to display when a advert is uploaded.
<div class="advert" <?php if(!empty($_GET['details'])) {echo "style='display: none'";} ?>></div>
Why not completely not echo "advert" element?
if ( !empty($_GET['details']) ){
echo '<div class="advert">add text</div>';
}
if you really want to just hide, you can assign hide class
<div class="advert <?php echo ( empty($_GET['details'])? 'hide' : '' );">add text</div>
then you would need to add "hide" class with display:none in your style.css
Above is shorthand/ternary if/else statement used, its great if you need output some string.
And, please don't output/trust any user input i.e. $_GET['details'] 'as is' anywhere without escaping it, for security reasons.
Wordpress have plenty easy-to-use escape functions, like esc_attr() and esc_html().
This should do it for you
<?php
$advert_display_string = "";
if (!isset($_GET['details'])) {
$advert_display_string = "style='display: none'";
}
?>
<div class="advert" <?php echo $advert_display_string ; ?> ></div>`
but having said that, instead of displaying it and then hiding it with css, you could just choose only to display it if you need it there, like below
<?php
if (isset($_GET['details'])) {
?>
<div class="advert"></div>
<?
}
?>
Im using lightgallery so i need to load images before call them in lightgallery. Problem is that images are large so it takes too much time to load. Is there any way to load that specific gallery when user click on link.
<div id="lightgallery-<?php echo get_the_ID(); ?>" class="hidelightgallery">
<?php
foreach ($files as $image) {
$image_attributes = wp_get_attachment_url( $image->ID );
$attachment_title = get_the_title($image->ID);
$caption = get_post_field('post_excerpt', $image->ID);
?>
<a class="item" href="<?php echo $image_attributes ?>" data-sub-html="<?php echo $attachment_title; ?> <?php if($caption!= '') echo ' - ' ?> <?php echo $caption ?>"><img src="<?php echo $image_attributes ?>"></a>
<?php } ?>
</div>
Now what i want is if user click for example link with this id then do foreach. Is that possible?
Just follow these steps,
create new template / html page where you will write html and populate by foreach loop
add your id = lightgallery whole code to that html page
when you will click on your link (which you mentioned) fire an ajax
Ajax function will get some id or number of images need to show or your logic on how you will populate data in foreach loop
in php you will get all relevant data, and you will populate that data in html file you created in step 1
php function will return that data to ajax function
Ajax function will get all your dynamic html data
populate that html where ever you want or just append that html wherever you want
Go step by step, this will solve your problem.
I am using the code below for a Facebook feed I have on a website. Problem is that it lists the images and the news like it is supposed to but for the life of me, I can't figure out how to put the images on their and have the associated text displayed nicely to the right of it. Can someone please help.
Here is the code:
<?php
//Get the contents of the Facebook page
$FBpage = file_get_contents('https://graph.facebook.com/135860723149188/feed? access_token=456215171075777|OcFg4Sf293Pg3NXeJkg1h3Bg8wE'
);
//Interpret data with JSON
$FBdata = json_decode($FBpage);
//Loop through data for each news item
foreach ($FBdata->data as $news ) {
//Explode News and Page ID's into 2 values
$StatusID = explode("_", $news->id);
echo '<li class="fbframe"; style="list-style:none;" >';
//Check for empty status (for example on shared link only)
if (!empty($news->picture)) {
printf ('<img src="%s" alt="Image from Facebook" />', $news->picture);
}
if (!empty($news->message)) { echo $news->message; }
echo '</li>';
} //end of fbframe
?>
Thanks in advance for any help that you can offer.
wrap the <li> elements in an <ul style="list-style:none;">
remove the semi-colon after "fbframe";
Sounds like Nicole Sullivan's media object is exactly what you're looking for, Facebook and all.
What I'm trying to do is to add some HTML tags to my Joomla! module titles. I will need something like this
Some <b>Title</b>
but when I save !Joomla trims the titles and remove all HTML tags.
I've check the administrator/com_content, which I think should be responsible for inserting the database data, but I couldn't find the answer there.
Can anyone help me with this headache?
Check out ../templates/system/html/modules.php
You can style your module structure in HTML.
function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".otherClass {}";
$css .= ".yourClass {}";
$doc->addStyleDeclaration($css);
?>
<div>
<?php if ($module->showtitle != 0) : ?>
<h1><?php echo $module->title; ?></h1>
<?php endif; ?> // post your title
</div>
<div>
<?php echo $module->content; ?> // post your module content
</div>
<?php
}
Then call your styled module in index.php:
<jdoc:include type="modules" name="right" style="myCustomModule" />
So I found the solutions. It includes both of the previous answers, so I'm putting a new one here with the correct code.
First of all I need to say, that this solution works only for a fixed amount of words (last one, two, etc.) I need only to have the last one, so I will post an example code with one word.
First as SMacFadyen sad I needed to create a new module structure in my template html folder: /templates/system/html/modules.php file.
Note: If you don't want to add this new module styling to all templates, but just on one of them you need to put the module.php in your template's html folder.
The provided by SMacFadyen looks like this:
function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".otherClass {}";
$css .= ".yourClass {}";
$doc->addStyleDeclaration($css);
?>
<div>
<?php if ($module->showtitle != 0) : ?>
<h1><?php echo $module->title; ?></h1>
<?php endif; ?> // post your title
</div>
<div>
<?php echo $module->content; ?> // post your module content
</div>
<?php
}
Then expired by the comments of Hanny I've added some php code to match the last word of the title and to store it in a new varibale.The code looks like this:
$wrap_tag = 'b';
$html_title = preg_replace("~\W\w+\s*$~", '<'.$wrap_tag.'>'.'\\0'.'</'.$wrap_tag.'>', $module->title);
Note: the $wrap_tag variable stores the tag you want. You can put b, em, u and etc. to have different result.
The last thing was to replace the displayed title, so I've replaced this code:
<h1><?php echo $module->title; ?></h1>
with this one:
<h1><?php echo $html_title; ?></h1>
The final result was this:
function modChrome_myCustomModule($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".otherClass {}";
$css .= ".yourClass {}";
$wrap_tag = 'b';
$html_title = preg_replace("~\W\w+\s*$~", '<'.$wrap_tag.'>'.'\\0'.'</'.$wrap_tag.'>', $module->title);
$doc->addStyleDeclaration($css);
?>
<div>
<?php if ($module->showtitle != 0) : ?>
<h1><?php echo $html_title; ?></h1>
<?php endif; ?> // post your title
</div>
<div>
<?php echo $module->content; ?> // post your module content
</div>
<?php
}
Thanks to everybody for the help.
The Gantry framework can help you accomplish what you want (1st word styled one way, 2nd word styled another) - but it's a lot of overhead just accomplish that one task you're looking for. Ultimately you'll have to create a template override for your template, and then do some creative editing with php in order to get it to display that way.
There's no quick and easy way to get that done. You'll have to do some php coding on the backend and edit the template (use an override so you don't hack core files). Ultimately you'll probably have to code the php to pull apart the title, and apply formatting to each pulled apart word (or string of words as the case may be) using CSS.
Hope that helps.