GD Star Rating plug-in: Altering Dynamic Cascading Style Sheet - php

I’m in the midst of creating a page that allows users to vote for one of two competing images. I’ve used the GD Star Rating plug-in for WordPress in the past, but am struggling with altering the output in accordance to my specifications. Ideally I would like to eliminate the thumbs down option, so users will only be presented with the thumbs up option for both of the images. It appears that the CSS style code is created dynamically through PHP. Assuming that this is what it is called. Typically I would merely alter the CSS code and comment out the section that outputs the thumbs down image, but I’m not entirely sure what to do in this case. I’ve tried to comment out the lines that deal with the thumbs down CSS (i.e., gdthumb.gddw), but it doesn’t appear to have an effect. Ideas?
<?php
if (count($thumb_sets) > 0 && count($thumb_sizes)) {
foreach ($thumb_sizes as $size) {
echo sprintf(".gdt-size-%s.gdthumbtext { line-height: %spx; }\r\n", $size, $size);
echo sprintf(".gdt-size-%s.gdthumb, .gdt-size-%s.gdthumb a, .gdt-size-%s.gdthumb div { width: %spx; height: %spx; }\r\n", $size, $size, $size, $size, $size);
echo sprintf(".gdt-size-%s.gdthumb.gddw a, .gdt-size-%s.gdthumb.gddw div { background-position: 0px -%spx !important; }\r\n", $size, $size, $size);
echo sprintf(".gdt-size-%s.gdthumb.gdup a:hover { background-position: 0px -%spx; }\r\n", $size, 2 * $size);
echo sprintf(".gdt-size-%s.gdthumb.gddw a:hover { background-position: 0px -%spx !important; }\r\n", $size, 3 * $size);
foreach ($thumb_sets as $set) {
$url = ($set["location"] == 1 ? $base_url_local : $base_url_extra)."thumbs/".$set["folder"]."/thumbs".$size.".".$set["type"];
echo sprintf(".gdt-size-%s.gdthumb a.gdt-%s, .gdt-size-%s.gdthumb div.gdt-%s { background: url('%s') no-repeat; }\r\n", $size, $set["folder"], $size, $set["folder"], $url);
}
}
}
?>
Related HTML
<div id = "rateA" style="width:285px; float:left">
<div style="display: none">VA:F [1.9.22_1171]</div>
<div class="thumblock "><div id="gdsr_thumb_288_a_up" class="gdt-size-40 gdthumb gdup">
<a id="gdsrX288XupXaX25X40XY" class="gdt-starrating" rel="nofollow"></a></div>
<div id="gdsr_thumb_288_a_loader_up" style="display: none; width: 40px " class="ratingloader loadup">
<div class="loader flower thumb" style="width: 40px; height: 40px;"></div></div>
<div id="gdsr_thumb_288_a_dw" class="gdt-size-40 gdthumb gddw">
<a id="gdsrX288XdwXaX25X40XY" class="gdt-starrating" rel="nofollow"></a></div>
<div id="gdsr_thumb_288_a_loader_dw" style="display: none; width: 40px " class="ratingloader loaddw">
<div class="loader flower thumb" style="width: 40px; height: 40px;"></div></div>
<div class="ratingtext ">
<div id="gdsr_thumb_text_288_a" class="gdt-size-40 gdthumbtext">Rating: <strong>0</strong> (from 0 votes)</div></div><div class="raterclear"></div></div>
Generated CSS
.gdt-size-40.gdthumb, .gdt-size-40.gdthumb a, .gdt-size-40.gdthumb div {
height: 40px;
width: 40px;
}
.gdthumb {
float: left;
position: relative;
}

In order to remove the thumb images (i.e., Thumbs Up or Thumbs Down) you should alter the render.php file. I was unable to accomplish this task when merely changing the PHP file that dynamically creates the CSS.

Related

Equal heights different width layout for dynamic image gallery

am working on a codeigniter website and currently trying to achieve a layout like this where i have equal heights for all images in row but different widths.
My images are stored in a MYSQL database with url paths pointing to the directory where they are located. I have also stored their heights and widths (the height and widths are stored in pixels).
Here is the sql for fetching the contents in PhotoController
$data['data'] = $this->model
->select('photo_path, photo_height, photo_width')
->get()
->getResultArray();
Then in Home view, here is what i have so far. (using bootstrap 4 for styling)
<div class="container">
<div class="row">
<?php foreach ($data as $row) : ?>
<div class="col-md-4 col-lg-6">
<img src="<?= base_url($row['photo_path']); ?>" class="img-lazy img-fluid">
</div>
<?php endforeach; ?>
</div>
</div>
Am stuck on what to do next here.
html
<div class="masonry-with-columns-2">
<?foreach ($data as $row){?>
<div>
img here
</div>
<?}?>
</div>
scss
// Within style tags in your html file
body {
margin: 0;
padding: 1rem;
}
// SCSS
// Masonry layout horizontal
.masonry-with-columns-2 {
display: flex;
flex-wrap: wrap;
div {
height: 150px;
line-height: 150px;
background: #9B1B30;
color: white;
margin: 0 1rem 1rem 0;
text-align: center;
font-weight: 900;
font-size: 2rem;
flex: 1 0 auto;
}
#for $i from 1 through 36 {
div:nth-child(#{$i}) {
$h: (random(400) + 70) + px;
width: $h;
}
}
}
Source https://mdbootstrap.com/docs/angular/layout/masonry/

automatic (not hover) css overlay depending on database field content

I want to make the following bootstrap code automatically show an overlay for two out of three options contained in a database field. They are SOLD, CONTRACT, and NO.
I want different overlays for SOLD and CONTRACT, and no overlay for NO
I have searched for overlays, most tutorials have on hover events, and I am lost as to how to do this.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<a href="listing_show.php?ID=<?php echo($Recordset1->getColumnVal("ID")); ?>">
<img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-responsive center-block sold" alt="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"/>
</a>
</div><br><br>
</div>
I worked it out through a couple of js fiddles on other questions here, if it helps anyone here is the code I added...
html
I added a thumbnail div and a caption div underneath the image both conditional on the contents of the database field.
<?php if($Recordset1->getColumnVal("SOLD") == "YES") { ?>
<div class="caption post-content-sold"></div>
<? } ?>
<?php if($Recordset1->getColumnVal("SOLD") == "CON") { ?>
<div class="caption post-content-contract"></div>
<? } ?>
Then in the CSS I added code to make the thumbnail relative, and then added the two classes to style the image relating to the database field
.thumbnail {
position: relative;
}
.post-content-sold {
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
opacity: 0.8;
top:0;
left:0;
min-width: 100%;
max-height: 98%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/sold.png);
}
.post-content-contract {
background: rgba(255, 255, 0, 1) none repeat scroll 0 0;
opacity: 1;
top:5%;
left:5%;
max-width: 50%;
max-height: 50%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/contract.png);
}

Scale down images effectively without losing aspect ratio or quality in php

I am about launch my biggest dream website(my first one), but have some unresolved issues. I am a complete newbie to coding and highly rely on plugins and tutorials to get stuff done. Now, I am facing problems in handling images and I have tried a lot of options to solve these issues, but not found any perfect solution. I have a feature where users can create their own profile, upload profile pic and a cover pic, re-position it and save it(somewhat like facebook). And also they can update their statuses where they can post multiple images(up to 5).
My requirements are:
While re-positioning and saving the cover pic, I am saving the 'x' and 'y' position of the new position and cropping the image to save it separately. Problem here is, the cropping is done to fit the height and width of the container div of the image.(say the height of the container is 250px and width is 325px, image is cropped to fit that div). Since my container is responsive, the height and width vary in different screen sizes, and so does my cropped image. On a small screen, the image is cropped to 100px * 180px, which is a disaster. I want to know the effective way to deal with this so that the image is consistent everywhere.
In multiple uploads, everything seemed to work fine until I opened the Network tab in my chrome developer tools. One page had 26 images and the page size was a whooping 11.8mb. I used GD library to scale down my images, but now if I try to further resize them to reduce file size, the quality is lost and images become blurry. I am planning to use ImageMagick, but have no idea whether it will serve my purpose. I don't want any of my images to cross 50kb - 60kb but still maintain considerable amount quality. Can I achieve this !
Here is the code I use for Cover pic
HTML
<div class="drag-banner">
<!--Container div for Cropped and repositioned image-->
<div class="banner-wrapper">
<!--Dropdown menu for Options-->
<div class="dropdown upload-banner">
<div class="dropdown-toggle cam-wrap" type="button" data-toggle="dropdown" >
<i class="fa fa-camera"></i>
</div>
<ul class="dropdown-menu" role="menu">
<li role="presentation" id="" class="uplbBtn">
<a role="menuitem" tabindex="-1" class="type-file">
<form class="banrPosition-form" method="post" enctype="multipart/form-data">
<label class="label-file" for="uploadImage">
<i class="fa fa-upload"></i>Upload Cover
<input type="file" class="btn-file" name="uploadImg" id="uploadImage">
</label>
<input type="hidden" class="banrPosition" name="pos" id="pos" value="0">
</form>
</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" id="repstnBnr"><i class="fa fa-arrows"></i>Reposition Cover</a></li>
</ul>
</div>
<!--Cropped Image-->
<img class="img-responsive bannr-img" id="cropped" src="<?php echo $croppedUrl; ?>">
</div>
<!--Container div for Original uncropped image-->
<div class="banner-resize-wrapper">
<img class="img-responsive banner-img" id="uncropped" src="">
</div>
<!--Drag and reposition instruction text-->
<div class="drag">
<div class="txt"><i class="fa fa-arrows"></i> Drag to reposition banner</div>
</div>
<!--Div shown during ajax submit-->
<div class="ajxFrmDiv"><div class="txt"></div></div>
</div>
<button id="savRpstn" class="btn btn-primary btn-xs savRpstn marg-all-sm">Save Position</button>
<button id="cnclRpstn" class="btn btn-default btn-xs cnclRpstn marg-all-sm">Cancel</button>
CSS
.drag-banner {margin: 0 auto;padding: 0;position: relative;height:275px;} /*Main Container*/
.banner-wrapper {display: block;} /*Original Image Wrapper*/
.banner-resize-wrapper {display: none;} /*Original Image Wrapper*/
.banner-wrapper,.banner-resize-wrapper{width: 100%;position:relative;overflow:hidden;height:100%;}
.banner-wrapper img.banner-img{width: 100%;max-height: 100%;}
.banner-resize-wrapper img.banner-img {position: absolute;width: 100%;min-height:100%;cursor:s-resize;}
.cam-wrap{border-radius:50%;background: transparent;padding: 8px;border:2px solid transparent;}
.banner-wrapper:hover > .upload-banner > .cam-wrap, .upload-banner.open .cam-wrap
{border-radius:50%;background: rgba(0,0,0,0.5);padding: 8px;border:3px solid #ccc;}
.banner-wrapper:hover > .upload-banner > .cam-wrap > .fa-camera, .upload-banner.open .cam-wrap .fa-camera{
font-size: 120%;
-o-transition: all 0.085s;
-moz-transition: all 0.085s;
-webkit-transition: all 0.085s;
transition: all 0.085s;
}
.upload-banner{
cursor: pointer;
position: absolute;
z-index: 10;
top: 10px;
left: 10px;
}
.btn-file{padding:0;}
.dropdown-menu .label-file{width:100%;height:100%;padding:5px 15px;} /*Padding to match with dropdown-menu>li>a padding*/
.label-file{cursor: pointer;}
.label-file .btn-file {
position: fixed;
top: -1000px;
width: 100%;
height: 100%;
outline: none;
cursor: pointer !important;
}
.drag-banner .black-strip{padding: 0 10px;}
.drag{
line-height: 26px;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
display: none;
}
.drag .txt{
background-color: rgba(84, 97, 133, 0.5);
-webkit-border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .12);
color: #fff;
display: inline;
font-size: 13px;
font-weight: 700;
padding: 5px 10px;
}
.ajxFrmDiv{
top: 0;
left: 0;
width: 100%;
color: #000;
height: 100%;
display: none;
margin: 0 auto;
font-size: 150%;
font-weight: 700;
position: absolute;
z-index: 11000;
background: rgba(255,255,255,0.75);
}
.ajxFrmDiv .txt{
position: absolute;
top: 40%;
left: 35%;
align-items: center;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
JS
$('body').on('click', '#savRpstn', function() {
saveReposition();
});
function saveReposition() {
x1 = $('.drag-banner').width(); //Container Width
y1 = $('.drag-banner').height(); //Container Height
y2 = $('.banner-resize-wrapper').find('img').height(); //Image Height
//The form is submitted here with the above values
}
PHP
//The width, height and position from top are sent like this
$from_top = abs($_POST['x1']);
$default_cover_width = $_POST['y1'];
$default_cover_height = $_POST['y2'];
$tb->cropThumb($default_cover_width, $default_cover_height, 0, $from_top);
//New Image is formed
public function cropThumb($width, $height, $x, $y)
{
$oldw = $this->getWidth();
$oldh = $this->getHeight();
$this->handlethumb = imagecreatetruecolor($width, $height);
return imagecopy($this->handlethumb, $this->handleimg, 0, 0, $x, $y, $width, $height);
}
I'm sorry I am not able to recreate the issue anywhere, I don't know how JSFiddle works.
I have uploaded a .gif image on Imagur which shows the issue. I have illustrated how the image is cropped in 2 different screen sizes.
Kindly take a look and help me in cropping and resizing these images efficiently

make an image bigger on hover and show php variable below

I have a php file, where I had made some querys to a phpbb database, obtaining some variables (like topic_title and a image link)
I know how to show the image in php, but now I want to make them bigger on hover, and, when the image is big, show the topic title below, is this posible?
here is the code:
echo '<table cellspan="4">';
echo "<tr>\n";
while ($fila = $resultado->fetch_assoc()) {
preg_match('/\[r?img:(.*?)\](.*?)\[\/r?img:(.*?)\]/', $fila['post_text'], $fila_contenido);
$sololink = preg_replace('[^a-zA-Z0-9_+.-]','',#$fila_contenido[2]);
$fila2 = $fila["post_subject"];
echo "<th><img src=$sololink></th>";
}
echo "</tr>\n";
then I want to grow $sololink (the image) on hover, and show $fila2 (the title) below the grew image
thanks
Here's an example only using CSS.
HTML:
<div class="container">
<img class="image" src="http://lorempixel.com/400/200/" />
<div class="title">Title of this image is here</div>
</div>
CSS:
.image {
-webkit-transition: width 2s, height 2s;
transition: width 2s, height 2s;
width: 400px;
height: 200px;
}
.title {
-webkit-transition: opacity 2s;
transition: opacity 2s;
font-size: 30px;
opacity: 0;
}
.container:hover .image {
width: 600px;
height: 300px;
}
.container:hover .title {
opacity: 1;
}
Example

How to position a picture flyout

So i have this problem. I want to center my flyout but here is the catch. I do not know what the size of the picture will be since it is a picture uploaded by a user. I also don't what the picture disappearing if i make the screen smaller. I tried to set position to be relative but then it pushes my images / texts behind the flyout down.
<div id="imageFlyout<?=$step['order']+1?>" class="popUpWrapper" style="display:none;position:absolute;top:100px;left:<script type="text/JavaScript">
int w = screen.width;
<?php $tempSize=getimagesize("guidebook_images/".$step['attachment']); if($tempSize[0] > 935){?>w/2<?php }else{?>w-<?php echo($tempSize[0]/2);}?></script>px;">
Centering in HTML is an easy two step process:
Give the parent:
text-align:center;
Give the element:
margin:auto;
Demo: http://jsfiddle.net/uriahjamesgd_73/kNFGj/22/
I used the CSS values VW (viewer width) & VH (viewer height) to specify that the flyout be a percentage of whatever the viewport is at a given instance. Hopefully this allows resizing of the viewport in mobile devices.
<!-- HTML -->
<div class="wrap">
<div class="product">
<span class="flyOut"></span>
</div>
</div>​
/* CSS */
body { margin: 50px; }
.wrap { position: relative; }
.product { background-color: #555; position: relative; width: 100px; height: 75px; }
span.flyOut { display: none; background-color: #ddd; position: absolute; width: 50vw; height: 37.5vh; left: 100%; }
.product:hover > span.flyOut { display: inline-block; }
​

Categories